一、基本指令
- v-cloak
作用：解决初始化慢导致网页闪动
用法：
<div id="app" v-cloak>
{{message}}
</div>
<script>
var app = new 飞lue ( {
el:’ #app ’,
data : {
message ： ’ 这是一段文本 ’
}
})
</script>
<style>
[v-cloak] {
display: none;
}
</style>
原理：配合css设置v-cloak不显示，所以看不到相应的标签，当dom被渲染之后，v-cloak会自动失效，所以现在就显示出来啦
- v-once
数据只渲染一次，后面数据变化的时候，它不再变化，相当于渲染了一次之后，后面将变成不是双向绑定的
二、v-if 和v-show
1、
v-if 是条件判断，满足条件之后再显示。
v-else 不满足上面的 v-if条件的显示
v-else-if 是不满足上面的if条件的，且满足这个if条件的才显示
这里的显示和不显示是值dom节点渲染或者不渲染
2、
v-show 满足条件才显示
这里的显示和不显示是指：display是不是none
三、v-for循环
1、数组循环
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
parentMessage: 'Parent',
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
结果：
你也可以用 of 替代 in 作为分隔符，因为它是最接近 JavaScript 迭代器的语法：
<div v-for="item of items"></div>
2、对象循环
你也可以用 v-for 通过一个对象的属性来迭代。
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
firstName: 'John',
lastName: 'Doe',
age: 30
}
}
})
你也可以提供第二个的参数为键名：
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
第三个参数为索引：
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
注：在遍历对象时，是按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。
3、key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index" 。
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。这个特殊的属性相当于 Vue 1.x 的track-by ，但它的工作方式类似于一个属性，所以你需要用 v-bind 来绑定动态值 (在这里使用简写)：
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制，key 并不与 v-for 特别关联，key 还具有其他用途，参考链接key
四、方法和事件
v-on:click=“xxx” 简写模式 @click=“xxx”
事件修饰符：
• .stop
• .prevent
• .capture
• .self
• .once
具体用法如下：
//阻止单击事件冒泡
<a @click.stop=”handle " ></a>
//提交事件不再重载页面
<form @submit.prevent="handle ” ></ form>
//修饰符可以串联
<a @click.stop.prevent=” handle ” ></ a>
//只有修饰符
<form @submit . prevent></form>
添加事件侦听器时使用事件捕获模式
<div @click . capture=” handle ” > ... </div>
//只当事件在该元素本身（而不是子元素） 触发时触发回调
<div @click.self=” handle ” > ... </div>
//只触发 次，组件同样适用
<div @click.once=” handle ” > ... </div>
在表单元素上监昕键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：
//只有在 keyCode 13 时调用 vm submit()
<input @keyup.13 ＝“ subm ”
也可以自己配置具体按键：
Vue . config .keyCodes .fl = 112;
//全局定义后，就可以使用自 keyup. fl
除了具体的某个 keyCode 外， Vue 还提供了 些快捷名称，以下是全部的别名：
• .enter
• .tab
• .delete （捕获“删除”和“退格”键）
• .esc
• .space
• .up
• .down
• .left
• .right
这些按键修饰符也可以组合使用，或和鼠标一起配合使用：
• .ctrl
• .alt
• .shift
• .meta (Mac 下是 Command 键， Windows 下是窗口键）
例如：
<! -- Shift + S -->
<input @keyup.shift . 83=”handleSave ”>
<!-- Ctrl + Click -->
<div @click.ctrl=”doSomething”>Do something</div>