vue 02-上计算属性、样式的操作，指令（含自定义,全局和局部）
计算属性: 是一个函数,所依赖的元数据变化时，就会再次执行
典型案例todolist
computed:{
计算属性: function(){return 返回值} 使用: {{计算属性}}
}
与method的区别: 方法会每次调用，计算属性不会
计算属性的性能高: 适合做筛选，基于它们的响应式依赖进行缓存的
方法：适合在列表渲染使用，强制渲染执行
计算属性：计算属性也可以是个对象
读取了属性 -> get:fn
修改了属性 -> set:fn
<body>
<div id="example-5">
{{ cptStr }}
</div>
<script>
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')
}
}
}
})
</script>
</body>
在控制台输入vm.str='123'页面会立刻改123.即set发生改变
2、样式的操作
class操作/style操作:
v-bind:class="数据|属性|变量|表达式"
:class/style = " 数据 " 数据类型：字符/对象 / 数组
:class="{类名:true,类名2:false}" 布尔值决定样式是否使用
:style="[{css属性名:值},{css属性名小驼峰：值}]"
<body>
<div id="app">
<!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
<!-- class动态绑定 -->
<h4>class动态绑定</h4>
<a class="btn btn-primary" href="#">按钮1</a>
<a href="#" :class="cl1">按钮2</a>
<!-- <a :class=" cl1 " href="#">按钮2</a> -->
<a :class=" 'btn btn-primary' " href="#">按钮3</a>
<a :class=" {btn:false,'btn-primary':true} " href="#">按钮4</a>
<a :class=" [{btn:false},{'btn-primary':true}] " href="#">按钮5</a>
<!-- style动态绑定 -->
<h4>style动态绑定</h4>
<!-- <a class="btn btn-primary" style="background:red" href="#">按钮</a> -->
<a class="btn btn-primary" :style=" 'background:red' " href="#">按钮1</a>
<!-- <a class="btn btn-primary" :style=" {background:'red',height:'50px'} " href="#">按钮2</a> -->
<!-- <a class="btn btn-primary" :style=" [{background:'red'},{height:'50px',width:'120px'}] " href="#">按钮3</a> -->
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
cl1:'btn btn-primary'
}
})
</script>
</body>
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){}
}
<body>
<div id="app">
<div v-color>box</div>
<div v-color=" colorValue ">box2</div>
<div v-color=" 'yellow' ">box3</div>
</div>
<script>
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'
}
})
</script>
</body>
局部指令
<body>
<div id="app">
<div v-color>box</div>
<div v-color=" colorValue ">box2</div>
<div v-color=" 'yellow' ">box3</div>
</div>
<script>
/* 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';
}
}
})
</script>
</body>
全局和局部的差异
<body>
<div id="app">
<div v-color>box</div>
<div v-color=" colorValue ">box2</div>
<div v-color=" 'yellow' ">box3</div>
</div>
<hr>
<div id="app2">
<div v-color>box</div>
<div v-color=" colorValue ">box2</div>
<div v-color=" 'yellow' ">box3</div>
</div>
<script>
/* 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';
}
} */
})
</script>
</body>
把全局函数注释掉后发现app2不能用了，因为局部函数只能影响当时在的一部分会报错
<pre>
vue.js:634 [Vue warn]: Failed to resolve directive: color
(found in <Anonymous>)
</pre>
