Vue初识(1)

1、Vue是一个响应式系统,所有在Vue实例中data对象中所有的属性都会加入到响应式系统中,这些属性的值发生改变,视图就会发生相应的改变,改为最新的值。值得注意的是只有当实例被创建时就已经存在于 data 中的属性才是响应式的。也就是说如果你添加一个新的属性,它的值变化不会引起任何视图的更新。创建Vue的一个实例代码如下:

var vm = new Vue({

    el:'#div1',

    data:{

            name :'jack',

            age:40

    }

    vm.$data.age = 35;

});

2、计算属性和方法列表

使用v-on指令绑定的函数,必须放在vue实例的methods里面,否则事件不会触发。

计算属性和方法列表表示如下:

var vm = new Vue({

        data:{},

        computed:{},

        methods:{}

})

计算属性和方法的区别在于,计算属性有缓存,除非依赖的属性发生变化,否则一直采用之前的值,不会重新触发计算属性的get方法。

而方法不会有缓存,每次都会执行。


3、watch方法 。监听data对象中某个属性值的变化。

var vm = new Vue({

    data:{

            message:'hello'

    }

});

vm.$watch('message',function(newVal,oldVal){

    console.log('oldvalue'+oldVal);

    console.log('newvalue'+newVal);

});

vm.$data.message = 'world';

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。