Vue自定义指令和计算属性和侦听器和过滤器(2)

*/

var vm = new Vue({

el: ‘#app’,

data: {

msg: {

color: ‘red’

}

},

//局部指令，需要定义在 directives 的选项

directives: {

color: {

bind: function(el, binding){

el.style.backgroundColor = binding.value.color;

}

},

focus: {

inserted: function(el) {

el.focus();

}

}

}

});

3.计算属性computed

计算属性是基于它们的响应式以来进行缓存的;

computed比较适合对多个变量或者对象进行处理后返回一个结果值,也就是书多个变量中的值发生了变化则我们监控的这个值也会发生变化;

{{msg}}

{{reserseString}}

4.侦听器watch

侦听器watch来响应数据的变化,watch中的属性一定是data中已经存在的数据;

当需要监听一个对象的改变时,普通的watch方法无法监听到对象内部属性的改变,只有data中的数据才能监听到变化,此时就需要deep属性对对象进行监听

用户名:

{{tip}}

5.过滤器filter

局部过滤器,filters 全局过滤器注册 Vue.filter()

{{msg | upper}}

{{msg | lower}}

测试数据