入门vue框架的学习过程中做了一些指令汇总的笔记，以防丢失同时也方便自己查找在这里记录一下。
1.v-html
用于输出html代码
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<h1>一介书生</h1>'
}
})
</script>
2.v-bind
html 中元素的属性绑定：常用于动态绑定 class 和 style 以及 href 等
<div id="demo">
<div v-bind:title="message">DOM 元素属性绑定</div>
<div :title="msg">DOM 元素属性绑定</div>
</div>
<script>
var demo= new Vue({
el:'#demo',
data:{
message:'aaa',
msg:'bbb',
}
})
</script>
如上：将这个元素节点的 title 属性和 Vue 实例的 message 属性绑定到一起。
3.v-if/v-else
用来判断是否加载html的DOM
如果条件为false，那么在生成的HTML语句中，条件为false的标签不会生成在代码中
<div id="app">
<p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({
el: '#app',
data: {
seen: true
}
})
</script>
4.v-show
调整css dispaly属性，根据条件来展示元素的
<div id="app">
<h1 v-show="ok">Hello!</h1> //条件为TRUE，输出
<h1 v-show="error">false!</h1> //条件为false，不输出
<h1 v-show="10>5">10大于5，输出!</h1> //条件为TRUE，输出
<h1 v-show="2>10">不大于10，不输出!</h1> //条件为false，不输出
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true,
error: false
}
})
</script>
v-if和v-show的区别
1.v-if 根据条件渲染，它会确保在切换过程中条件块内的组件销毁和重建
2.v-if如果在初始渲染时条件为假，则不会渲染条件块，直到条件变为真时，才会开始渲染条件块
3.v-show 不管初始条件是什么，元素总是会被渲染，只会根据条件的真假，在display:block 和display:none 之前切换
5.v-on
用于监听 DOM 事件，简写为：【 @ 】
监听按钮事件，并且对用户的输入进行响应
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转字符串</button>
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('') //字符串反转
}
}
})
</script>
6.v-model
用于实现双向数据绑定用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div>
<script>
new Vue({
el: '#app',
data: {
message: 'Runoob!'
}
})
</script>
7.v-text
v-text主要用来更新textContent，可以等同于JS的text属性
<span v-text="msg"></span>
8.v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译
<div id="app">
<span v-pre>{{message}}</span> //这条语句不进行编译
<span>{{message}}</span>
</div>
ps：最终仅显示第二个span的内容
9.v-cloak
这个指令是用来保持在元素上直到关联实例结束时进行编译
<div id="app" v-cloak>
<div>
{{message}}
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
message:'hello world'
}
})
</script>
在页面加载时会闪烁，先显示:
<div>
{{message}}
</div>
然后才会编译为：
<div>
hello world!
</div>
10.v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内容跳过，这可以用于优化更新性能
<span v-once>This will never change:{{msg}}</span> //单个元素
<div v-once>//有子元素
<h1>comment</h1>
<p>{{msg}}</p>
</div>
<my-component v-once:comment="msg"></my-component> //组件
<ul>
<li v-for="i in list">{{i}}</li>
</ul>
上面的例子中，msg、list即使产生改变，也不会重新渲染
11.v-for
用v-for指令根据遍历数组来进行渲染
有下面两种遍历形式
<div v-for="(item,index) in items"></div> //使用in，index是一个可选参数，表示当前项的索引
<div v-for="item of items"></div> //使用of
下面是一个例子，并且在v-for中，拥有对父作用域属性的完全访问权限
<ul id="app">
<li v-for="item in items">
{{parent}}-{{item.text}}
</li>
</ul>
<script type="text/javascript">
var example = new Vue({
el:'#app',
data:{
parent:'父作用域'
items:[
{text:'文本1'},
{text:'文本2'}
]
}
})
</script>
会被渲染为：
<ul id="app">
<li>父作用域-文本1</li>
<li>父作用域-文本2</li>
</ul>
ps：当v-for和v-if同处于一个节点时，v-for的优先级比v-if更高。这意味着v-if将运行在每个v-for循环中
12.自定义指令
全局指令
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
// 创建根实例
new Vue({
el: '#app'
})
</script>
局部指令
<div id="app">
<p>页面载入时，input 元素自动获取焦点：</p>
<input v-focus>
</div>
<script>
// 创建根实例
new Vue({
el: '#app',
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.focus()
}
}
}
})
</script>
13.事件修饰符
.stop 阻止事件继续传播
.prevent 事件不再重载页面
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
14.按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获 "删除" 和 "退格" 键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
<p><!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
