计算属性: 是一个函数,所依赖的元数据变化时,就会再次执行
典型案例todolist
computed:{
计算属性: function(){return 返回值}使用:{{计算属性}}
}
与method的区别:方法会每次调用,计算属性不会
计算属性的性能高: 适合做筛选,基于它们的响应式依赖进行缓存的
方法:适合在列表渲染使用,强制渲染执行
计算属性:计算属性也可以是个对象
读取了属性 -> get:fn
修改了属性 -> set:fn
{{ cptStr }}
let vm = new Vue({
el: '#example-5',
data: {
str: 'i love you',
},
computed:{
/* cptStr(){
return this.str.split(' ').reverse().join(' ')
} */
cptStr:{
get: function(){
console.log('get')
return this.str.split(' ').reverse().join(' ')
},
set: function(val){
this.str = val;
console.log('set')
}
}
}
})
在控制台输入vm.str='123'页面会立刻改123.即set发生改变
2、样式的操作
class操作/style操作:
v-bind:class="数据|属性|变量|表达式"
:class/style = " 数据 "数据类型:字符/对象 / 数组
:class="{类名:true,类名2:false}" 布尔值决定样式是否使用
:style="[{css属性名:值},{css属性名小驼峰:值}]"
let vm = new Vue({
el: '#app',
data: {
cl1:'btn btn-primary'
}
})
3、指令
指令: 扩展了html语法功能,区别了普通的html属性
vue自带的指令:v-text/v-html/v-bind/v-for/v-model/v-on
v-show="布尔" v-if="布尔"
区别:操作css操作dom
场景:适合频繁切换 适合不频繁切换
性能:初始渲染消耗频繁切换回有消耗
其他指令: https://cn.vuejs.org/v2/api/#指令
指令(directive):
v-text/v-html/v-bind/v-on/v-model/v-for/v-if/v-show/v-else/v-else-if
自定义指令: 指令是个函数|对象,用来操作dom的, 里面的this 返回window
a)全局:Vue.directive('指令名不带v-',函数(el,binding))
el == 使用指令的DOM元素
binding 是个对象 含有传入的 参数(binding.value)
b)局部: 定义在选项里面
directives:{
指令名不带v-: 函数(el,binding){}
}
Vue.directive('color',function(el,binding){
// console.log('指令运行',el,binding) //el== dom元素 binding == 指令信息,传入的值等
console.log('指令运行',this);//指令函数内部的 this指向window
el.style.background=binding.value|| 'red';
// $(el).css('background',binding.value|| 'red');
})
Vue.directive('color',function(el,binding){
el.style.background=binding.value||'green';
})
let vm = new Vue({
el: '#app',
data: {
colorValue:'blue'
}
})
####局部指令
/* Vue.directive('color',function(el,binding){
// console.log('指令运行',el,binding) //el== dom元素 binding == 指令信息,传入的值等
console.log('指令运行',this);//指令函数内部的 this指向window
el.style.background=binding.value|| 'red';
// $(el).css('background',binding.value|| 'red');
}) */
let vm = new Vue({
el: '#app',
data: {
colorValue:'blue'
},
directives: {
color:function(el,binding){
console.log('指令运行',this);//指令函数内部的 this指向window
el.style.background=binding.value|| 'red';
}
}
})
###全局和局部的差异
/* Vue.directive('color',function(el,binding){
// console.log('指令运行',el,binding) //el== dom元素 binding == 指令信息,传入的值等
console.log('指令运行',this);//指令函数内部的 this指向window
el.style.background=binding.value|| 'red';
// $(el).css('background',binding.value|| 'red');
}) */
let vm = new Vue({
el: '#app',
data: {
colorValue:'blue'
},
directives: {
color:function(el,binding){
console.log('指令运行',this);//指令函数内部的 this指向window
el.style.background=binding.value|| 'red';
}
}
})
let vm2 = new Vue({
el: '#app2',
data: {
colorValue:'blue'
},
/* directives: {
color:function(el,binding){
console.log('指令运行',this);//指令函数内部的 this指向window
el.style.background=binding.value|| 'red';
}
} */
})
把全局函数注释掉后发现app2不能用了,因为局部函数只能影响当时在的一部分会报错
vue.js:634 [Vue warn]: Failed to resolve directive: color
(found in )