计算属性computed 类似于过滤器 用于处理某个或者几个属性的复杂展示逻辑 但是并不改变源数据
可以直接在HTML中使用即可 computed属性都有一个set和get方法
set方法
当获取这个属性时 会执行get方法的返回值
set方法
当设置computed中的属性时 会触发set方法
注意事项
- computed中的属性都会被vm所代理 最终会放到vm上
- computed中的属性和data中属性不能重名 也不能和methods中的属性同名
- computed计算属性还可以是一个函数 相当于只设置get的情况 函数的返回值就是计算属性的值 但是不能设置
- 若一个属性依赖于其他属性计算而来 那么这个属性最好用computed 计算属性不能用在异步处理中
侦听器属性 watch 用于监听某个属性的改变 若发生改变就会触发对应的函数
watch属性的函数 有两个值 一个是属性的最新值 另一个是属性的上一个值 在工作中能尽量使用computed 就不要使用watch
- computed计算属性
- 页面加载时就求值 支持缓存 若依赖的数据发生改变 才会重新计算
- 不支持异步
- 若一个属性是由其他属性计算而来 这个属性依赖于其他属性 依赖发生变化时自动求取最新的计算结果
- watch 计算属性
- 页面加载时不求值 依赖值发生变化时才求值
- 支持异步
- 只能监听一个属性的变化 若有属性依赖这个结果 需要手动重新去计算这个结果
v-bind:class 简写：
- v-bind:class 动态绑定类名 属性值有以下常用情况
- 若是对象 对象的属性名 是class名 属性值为true时类名生效 为false时 不生效
- 若是三元运算符 三元运算符表达式的返回结果 是生效的class ：class 和 原有的class并不冲突 若有不同 做种会合并 若相同 会覆盖
v-bind:style 绑定元素的动态样式 属性值 是一个对象或者一个数组
- 若是对象 里面可以存储具体的样式
- 数组中可以放多个样式对象 v-bind 后面的属性 在data中进行初始值 在HTML中进行修改
自定义指令 可以给元素增加一些特殊的功能 在directives 对象中存储自定义指令
directives:{
zidingyizhilingming:{
inserted(el){
<!--定义自定义指令的具体行为 第一个参数是使用这个元素的元素-->
}
}
}
<div v-drag>1</div>
<div v-drag>2</div>
let vm = new Vue({
el: '#app',
directives: {
// 对象中存储的自定义指令
drag: {
inserted(el) {
// 这个函数定义了指令的具体行为 第一个参数是使用这个元素的元素
el.onmousedown = function (e) {
this.startX = e.pageX - this.offsetLeft;
this.startY = e.pageY - this.offsetTop;
document.onmousemove = function (e) {
el.style.left = e.pageX - el.startX + 'px';
el.style.top = e.pageY - el.startY + 'px';
};
document.onmouseup = function () {
document.onmousemove = document.onmouseup = null;
}
}
}
}
}
})
