指令(directive)
指令: 增强HTML功能的特殊属性
为什么: HTML本身是静态的，没有程序必须的元素: 变量、分支、循环
何时: 只要需要加强HTML的功能时
如何: <ANY 指令名=”值”>
指令有
v-bind: 绑定属性:
如何:<ANY v-bind:属性名=”模型变量/表达式”
可简写为: <ANY :属性名=”模型变量/表达式”
v-on: 绑定事件处理函数
如何: <ANY v-on:事件名=”处理函数(参数值,…,$event)”>
可简写为:
<ANY @事件名=” 处理函数(参数值,…,$event)”
处理函数定义在:
new Vue({
el:”#app”,
data:{ … },
methods:{
处理函数(形参,…){
… …
}
}
})
获得事件对象e: 2步:
<ANY @事件名=”处理函数($event)”
methods:{
处理函数(e){
e就是DOM的事件对象
}
}
事件修饰符: 代替事件对象的API
阻止默认行为: e.preventDefault()
<ANY @click.prevent=”处理函数()”
取消冒泡: e.stopPropagation()
<ANY @click.stop=”处理函数()”
v-if: 根据条件控制元素的可见不可见
单独使用: 控制一个元素的可见不可见
如何: <ANY v-if=”条件表达式”>
联合使用: v-if v-else-if v-else控制多个元素选其一显示
v-show: 根据条件控制元素的可见不可见
v-show是通过display:none隐藏——效率高
vs v-if 是通过修改DOM树(是否加载DOM节点)实现隐藏——效率低
但是，如果控制多个元素选其一显示时，首选v-if v-else-if v-else。。。
v-for: 反复生成多个相同结构的HTML片段
如何: <parent>
<child v-for=”(value,i) in/of 数组”>
<sub>value和i可用于更子级元素的绑定
v-text 和 v-html:
代替{{}}绑定元素的内容:
如果绑定的是HTML片段: 用v-html
如果绑定的是纯文本内容: 用v-text
v-cloak: 在Vue对象加载完之前，临时隐藏受监视的元素
如何: 2步:
自定义选择器属性[v-cloak]{ display:none }
在要隐藏的元素上，添加v-cloak属性:
<ANY v-cloak >
原理: 当Vue对象加载完，自动查找v-cloak属性移出
v-once: 仅在首次加载时，绑定一次，之后模型变量即使再变化，也不自动更新
原理: 一旦首次绑定结束，就从虚拟DOM中移除该元素
如何: <ANY v-once>绑定语法
v-pre: 保护元素内容中的{{}}不被vue编译//用的不多~
v-model:双向绑定
问题: :value的方式只能将内存中模型变量的值绑定到页面，不能将页面的修改自动同步到内存中的模型变量上——单向绑定
解决: 双向绑定: 既能将内存中模型变量的值绑定到页面，又能将页面的修改自动同步到内存中的模型变量上。
何时: 只要绑定可修改的表单元素，都用v-model
如何: v-model:value=”模型变量”
简写: v-model=”模型变量”
原理: 所有带v-model绑定的元素，都被加入一个监视队列(watch)，由一个死循环不断监视队列中元素的内容变化。只要发生变化，就直接修改绑定的模型变量
监视函数: 只要页面变化，就自动执行的函数
绑定class和style
可将class和style作为字符串绑定
问题: 拼接字符串很麻烦！
用对象绑定class和style
<ANY :style=”模型变量” 模型变量是一个对象
new Vue({
el:
data:{
模型变量:{
Css属性:值, //不能省略单位
… : …
}
})
<ANY class=”写死的class” :class=”模型变量” 也是对象
结果: class和:class最终会合并为一个class=””
new Vue({
el:
data:{
模型变量:{
“class名”:true, 表示启用的class
“class名”:false, 表示不启用的class
}
}
})