vue的指令

目录

v-指令

vue修饰符

localStorage和sessionStorage

计算属性和侦听属性

计算属性 computed

侦听属性 watch

computed和watch区别

样式绑定

style绑定

class绑定

---

v-指令

• v-text 元素的InnerText属性,必须是双标签
• v-html 元素的innerHTML
• v-if 判断是否插入这个元素
• v-else-if
• v-else
• v-show 隐藏元素 如果确定要隐藏, 会给元素的style加上display:none

vue修饰符

• @click.prevent 阻止默认事件
• @click.stop 阻止冒泡
• @click.once 只触发一次
• @click.capture 在捕获阶段触发，而不是在冒泡阶段触发
• @click.self 直接点击自己的时候触发（也可以用来阻止冒泡）
• @click.passive 默认行为立即执行（演示：@scroll，@wheel）

localStorage和sessionStorage

localStorage ：在新标签页中访问原来网址，也可以访问到

sessionStorage:在新标签页中访问原网址，sessionStorage会小时

cookie:在新标签页中打开原网址，cookie会存在

计算属性和侦听属性

计算属性 computed

深度监视

• vue中的watch默认不监测对象内部值的改变（一层）
• 配置deep:true，可以监测对象内部值的改变（多层）

备注：

• vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
• 使用watch时根据数据的具体解构，决定是否采用深度监视

侦听属性 watch

computed和watch区别

1. computed能完成的，watch一定能完成
2. watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

注意：

• 所有被vue管理的函数（methods，computed,watch函数），最好写成普通函数，这样this的指向才是vm或组件实例对象
• 所有不被Vue所管理的函数（定时器回调函数、ajax回调函数、Promise回调函数），写成箭头函数，这样this的指向才是vm或组件实例对象

 

样式绑定

style绑定

:style="{color:activeColor,fontSize:fontSize+'px'}"

其中 activeColor/fontSize 是 data 属性

 

class绑定

1. :class="xxx"
2. 表达式是字符串：“classA”
3. 表达式是对象：{classA:isA,classB:isB}
4. 表达式是数组：['classA','classB']