Vue.JS(第二天)-基础篇一

一、数据绑定和第一个Vue应用

1.1 生命周期

每个Vue实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子。我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。比较常用的有:

1、created: 实例创建完成后调用,此阶段完成了数据的观测等,但尚未挂载,$el还不可用,需要初始化处理一些数据时会比较有用。

2、mounted:el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。

3、beforeDestroy:实例销毁之前调用。主要解绑一些使用addEventListener监听的事件等。 这些钩子与el和data类似,也是作为选项写入Vue实例内,并且钩子的this指向的是调用它的Vue实例:

var app8 = new Vue({
    el:'#app8',
    data:{
        message:2
    },
    created:function () {
        console.log('hello world!' + this.message);
    },
    mounted: function () {
        console.log(this.$el);
    }
})

1.2 数据与方法

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 获得这个实例上的属性
// 返回源数据中对应的字段
vm.a == data.a // => true

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

当这些数据改变时,视图会进行重渲染。值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性,比如:vm.b = 'hi'

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个属性,但是一开始它为空或不存在,那么你仅需要设置一些初始值。比如:

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}

注意:这里唯一的例外是使用 Object.freeze(),这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新! -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>

除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

1.3 过滤器

Vue.js 支持在{{}}插值的尾部添加一个管道符"(|)"对数据进行过滤,经常用于格式化文本,比如字母全部大写、货币千位使用逗号分隔等。过滤的规则是自定义的。通过给Vue实例添加选项filters来设置,例如实时显示当前时间的示例,可以对时间进行格式化处理:

    <div id="app9">
        {{ date |formatDate}}
    </div>
var padDate = function (value) {
    return value <10? '0' + value : value;
};

var app9 = new Vue({
    el:'#app9',
    data:{
        date: new Date()
    },
    filters:{
        formatDate:function (value) { //这里的value就是需要过滤的数据
            var date = new Date(value);
            var year = date.getFullYear();
            var month = padDate(date.getMonth() +1);
            var day = padDate(date.getDay());
            var hours = padDate(date.getHours());
            var minutes = padDate(date.getMinutes());
            var seconds = padDate(date.getSeconds());
            // 将整理好的数据返回出去
            return year + '-' + month +'-'+day+' ' +hours+':'+minutes+':'+seconds;
        }
    },
    mounted:function () {
        var _this = this; //声明一个变量指向Vue实例this,保证作用域一致
        this.timer = setInterval(function () { //定时器每隔1000毫秒即1秒就修改一次数据
            _this.date = new Date();//修改数据date
        }, 1000);
    },
    beforeDestroy:function () {
        if(this.timer){
            clearInterval(this.timer);//在实例销毁前,清除我们的定时器
        }
    }
})

注:过滤器也可以串联,而且可以接受参数:例如:

<!-- 串联 -->
{{ message | filterA | filterB}}

<!-- 接收参数 -->
{{ message | filterA('arg1', 'arg3')}}
    <div id="app10">
        {{message | filters2| filters3(true,priceCount)}}
    </div>
var app10 = new Vue({
    el: "#app10",
    data: {
        message: 199,
        priceCount:.8
    },
    filters:{
        filters2:function (arg) {
            console.log("arg:"+arg)
            if(arg>100){
                return arg-8;
            }else {
                return arg;
            }
        },
        filters3:function (arg_1,arg_2,arg_3) {
            var result;
            console.log("arg_1:"+arg_1)
            console.log("arg_2:"+arg_2)
            console.log("arg_3:"+arg_3)
            if(arg_2){
                result = arg_1*arg_3;
                console.log("result"+result);
                return result;
            }else{
                result =arg_1;
                console.log("result"+result);
                return result
            }

        }
    }
});

输出结果:

arg:199 arg_1:191 arg_2:true arg_3:0.8 result152.8

先来看看两个过滤器的入参 第一个过滤器filters2的入参是199,是Vue实例中绑定的message ; 第二个过滤器filters3的入参是191、(第一个过滤器返回的值)false(第二个过滤器的第一个入参)、0.8(第二个过滤器的第二个入参);

1、Vue实例中的message是199 2、第一个过滤器,大于100的数减8(理解为满100减8),199-8=191传给第二个过滤器作为第一个参数 3、第二个过滤器,有两个入参,第一个是boolean值(理解为是否打折),第二个是0.8(折扣)。 当第一个入参为true的时候(表示需要打折),191*0.8=152.8(0.8为折扣)

注意:过滤器应当用于处理简单的文本转换,如果要实现更为复杂的数据变换,应该使用计算属性。


评论(0 ) 点赞(19)


暂未登录,请登录之后发表评论。 QQ