Vue_指令
v-cloak
这个指令会保持在元素上直到关联实例结束编译。
[v-colak]{display:none}
<div v-cloak>{{msg}}</div>
- 在chrome浏览器中可以调试slow 3G模式，会看到在编译缓慢的情况下没有写v-cloak的div中会显示插值表达式{{msg}}。
- 写了v-cloak可以在element中查看到，直到编译结束显示插值表达式的值它就会消失。
- 上面两条经常连用
v-text
<span v-text="msg"></span>
<span>{{msg}}</span>
以上两条都是一样的。
区别在于：
- v-text指令不存在编译过慢导致直接显示插值表达式的问题。
- v-text指令下span标签内写入的内容无效
<span v-text="msg">XXX</span>
<!--写入的XXX不会被显示-->
<span>{{msg}}XXX</span>
<!--写入的XXX会显示-->
v-html
<div v-html="msg"></div>
//省去若干代码
msg:"<h2>这是一个html字符串</h2>"
v-bind
- 绑定一个属性：
<img :src="imageSrc"> - 内联字符串拼接：
<img :src="'./path/image/'+fileName">
class的绑定：
<style>
.red{color:red}
.thin{font-weight:200}
</style>
<body>
<div id="app">
<!--直接写在一个数组内-->
<div :class="['red','thin']">
<!--在数组中使用三元表达式-->
<div :class="['red',flag?'thin':'']">
<!--在数组中使用对象来代替三元表达式-->
<div :class="['red',{'thin':flag}]">
<div :class="{red:true,thin:true}">
<div :class=classObj>
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
flag:true,
classObj:{red:true,thin:true}
}
});
</body>
v-on
- .stop
调用event.stopPropagation()
- .prevent
调用event.preventDefault()
- .capture
添加事件侦听器时使用 capture 模式。
- .self
只当事件是从侦听器绑定的元素本身触发时才触发回调。
- left
(2.2.0) 只当点击鼠标左键时触发。
- right
(2.2.0) 只当点击鼠标右键时触发。
- middle
(2.2.0) 只当点击鼠标中键时触发。
示例
<!--添加事件处理程序-->
<button @click="doThis"></button>
<!--添加动态事件处理程序-->
<button @[event]="doThis"></button>
<!--停止冒泡-->
<button @click.stop="doThis"></button>
<!--阻止默认行为-->
<button @click.prevent="doThis"></button>
<!--串联修饰符-->
<button @click.stop.prevent="doThis"></button>
<!--点击回调只会触发一次-->
<button @click.once="doThis"></button>
<!--对象语法-->
<button v-on="{mousedown:doThis,mouseup:doThat}"></button>
v-model
- 限制
- <input>
- <select>
- <textarea>
- 修饰符
- .lazy取代input监听change事件
- .number输入字符串转为有效的数字
- .trim输入首尾空格过滤
<body>
<div id="app">
<p>{{msg}}</p>
<input type="text" v-model="msg" style="width: 100%;">
<!--修改input的文本会同时修改p标签的文本-->
</div>
<script>
var vm=new Vue({
el:"#app",
data:{
msg:"默认文本"
}
})
</script>
</body>
v-for
在2.20+版本中，当在组件中使用v-for时，key是必须的。
如果数据项的顺序被改变，Vue将不是移动DOM元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。
为了给Vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个key属性。
见Vue_v-for中key的使用注意事项
v-if条件渲染
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
v-show条件渲染
用于根据条件展示元素的选项，与v-if用法大致一样。不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
