computed计算属性
处理一些复杂的逻辑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>原始字符串: {{ message }}</p>
<p>计算后反转字符串: {{ reversedMessage }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
</script>
</body>
</html>
� 感觉computed和methods是一样的是不是，恩，我也觉得，但computed是基于它的依赖缓存，只是相关依赖发生改变时才会重新取值，而使用methods在重新渲染的时候，函数总是会被重新调用执行。
� computed也可以和watch的用法类似，看下面的这个例子
<input type="text" v-model="firstName">+
<input type="text" v-model="middleName">+
<input type="text" v-model="lastName">=
<input type="text" v-model="Name">
在data中绑定前几个变量，注意，因为后面我们想用computed绑定Name，所以在data中就不能绑定Name
firstName:'',
middleName:'',
lastName:'',
在computed中绑定Name属性
computed:{
'Name'(){
return this.firstName+this.middleName+this.lastName
}
}
注意：
1． computed定义的属性在引用的时候不要加{}去调用，直接把它当做普通的属性去使用就好；
2． 只要computed定义的属性function内部所用到的任何data中的数据发生了变化，就会立即重新计算这个属性的值；
3． computed属性的求值结果会被缓存起来，如果计算属性方法中所有的数据都没有发生过变化，则不会重新对计算属性进行求值
methods、watch、computed之间对比
computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算，主要当做属性来使用；
methods方法表示一个具体的属性，主要书写业务逻辑
watch是一个对象，键是需要观察的表达式，值是对应的回调函数，主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看做是computed和methods的结合体。
watch监听器
通过watch来响应数据的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "computed_props">
千米 : <input type = "text" v-model = "kilometers">
米 : <input type = "text" v-model = "meters">
</div>
<p id="info"></p>
<script type = "text/javascript">
var vm = new Vue({
el: '#computed_props',
data: {
kilometers : 0,
meters:0
},
methods: {
},
computed :{
},
watch : { //监听data里面数据或者computed计算的数据发生的变化并做某种处理
kilometers:function(val) {
this.kilometers = val;
this.meters = val * 1000;
},
meters : function (val) {
this.kilometers = val/ 1000;
this.meters = val;
}
}
});
// $watch 是一个实例方法
vm.$watch('kilometers', function (newValue, oldValue) { 黄色部分表示调用的是watch中的哪个方法
// 这个回调将在 vm.kilometers 改变后调用
document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
})
</script>
</body>
</html>
使用watch监听路由地址的改变
watch:{
'this.$route.path':function(newVal,oldVal){
console.log(newVal)
console.log(oldVal)
}
}
filters过滤器
过滤器可以用在两个地方：双括号插值和v-bind表达式，过滤器应该被添加在javascript表达式的尾部，由管道符分隔。（可以在使用过滤器的时候加上参数）
过滤器使用的时候采用的是就近原则，如果私有过滤器和全局过滤器重名了，那么就会调用私有的过滤器。
// 在双花括号中
{{ message | capitalize }}
// 在 v-bind 中
<div v-bind:id="rawId | formatId"></div>
全局过滤器：所有的vue实例都可以使用
Vue.filter(‘dataFilter’,function(){})
私有过滤器：只在某个vue实例中才可以使用
filters:{
capitalize:function(){}
}
过滤器串联：
{{ message | filterA | filterB }}
过滤器接收参数：
{{ message | filterA('arg1', arg2) }}
directive自定义指令
参数1：指令的名称，在定义的时候，指令的名称前面不需要加 v- 前缀
但是在调用的时候，必须在指令名称前加上 v- 前缀来进行调用
参数2：是一个对象，这个对象身上，有一些指令相关的钩子函数
全局指令
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
私有指令
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
钩子函数
Vue.directive('focus',{
// 在每个钩子函数中，第一个参数永远是el，表示被绑定了指令的那个元素，这个el参数是一个原生的js对象
bind(el){
//每当指令绑定到元素上的时候，会立即执行这个函数，只执行一次
// 在元素刚绑定了指令的时候，还没有插入到DOM中区，这个时候调用focus方法没有作用
},
inserted(el){
// 表示元素插入到DOM中的时候，只执行一次
el.focus();
},
update(el){
// 当Vnode更新的时候，可能会触发多次
}
})
钩子函数参数
el：指令所绑定的元素，可以用来直接操作DOM
binding：一个对象，包含以下属性
name：指令名，不包括v-前缀
value：指令的绑定值（这个地方当输入的是字符串的时候，代码输出为undefined，不知道为啥；输入1+1反而输出的是2）
expression：字符串形式的指令表达式，意思就是这边不会进行解析，输入1+1，输出就是1+1
函数简写
如果只想在bind和update时触发相同的行为，而不关心其他的钩子，可以直接这么写：
directives: {
color: function(el, binding) {
console.log(binding);
console.log(binding.value);
console.log(binding.expression);
el.style.color = binding.expression;
}
}
网友评论