目录
一、v-on
二、v-bind、v-model
三、v-if、v-else、v-show、v-for
四、v-text、v-big
五、v-html
六、v-cloak
七、v-once
八、v-pre
九、自定义指令_函数式
十、自定义指令_对象式
十一、自定义指令_总结
1.指令名的问题
2.directives配置中this指向
3.将指令变成全局指令
4.备注
一、v-on
绑定事件监听，可以简写为@
具体信息可参照链接：
z http://t.csdn.cn/tLu8B
二、v-bind、v-model
v-bind：单向绑定解析表达式 ：xxx
v-model：双向数据绑定
具体信息可参照链接：
http://t.csdn.cn/B03jQ
三、v-if、v-else、v-show、v-for
v-if、v-else:条件渲染，动态控制结点是否存在
v-for：遍历数组、对象、字符串
v-show:条件渲染（动态控制结点是否展示）
具体信息可参照链接：
http://t.csdn.cn/wpAm5
四、v-text、v-big
但是我们更经常使用插值语法，插值语法更灵活
1.作用：向其所在的节点中渲染文本内容
2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会
备注：v-text不支持结构的解析！
五、v-html
支持结构的解析
作用：向指定节点中渲染包含html结构的内容
与插值语法的区别：
v-html会替换掉节点中所有的内容，{{xx}}则不会
v-html可以识别html结构
注意：
v-html有安全性问题！！！！
在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击
一定要在可信的内容上使用v-html，永远不要在用户提交的内容上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<div>你好，{{name}}</div>
<div v-text="name">你好，</div>
<div v-html="str"></div>
</div>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊！</h3>'
},
})
</script>
</body>
</html>
六、v-cloak
v-cloak指令（没有值）
1.本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题
下面这个案例，我们把<script>放到body的底部，并且延迟五秒钟
当我们打开页面的时候，就会出现{{name}}
为了预防这种情况，我们设计了以下案例， 当【v-cloak】这个属性存在的时候，我们就对有这个属性的变迁进行display，当vue接管实例之后，就会删除v-cloak属性，然后页面中所有有关vue的内容就会显示出来
七、v-once
v-once 是没有值的
v-once所在节点在初次动态渲染后，就是视为静态内容了
以后数据的该表不会引起v-once所在结构的更新，可以用于优化性能
比如下面我们用了之后，点击按钮，我们发现有v-once属性的那个{{n}}是不会变得，只有下面当前的n会做出改变
八、v-pre
跳过其所在节点的编译过程
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译（其实就是vue不会解析他们了）
九、自定义指令_函数式
需求1：定义一个v-big指令，和v-text功能相似，但会把绑定的数值放大10倍
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n"></span></h2>
<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
n:1,
},
directives:{
// big函数何时会被调用？
// 指令与元素成功绑定时（一开始）
//指令所在的模板被重新解析时（data里面的内容，就算不是修改的n，也会调用
// 自定义指令的时候，不用写v-
// 第一个参数是DOM元素（我们可以随意更改了）
// 第二个参数是我们绑定的数据，比如说我们这个时候绑定的就是n
big(element,binding){
// binding.value 就是指令绑定的n的数值
element.innerText =binding.value*10
console.log(element,binding.value)
}
}
})
</script>
</html>
十、自定义指令_对象式
配置对象中常用的三个回调
bind：指令与元素成功绑定时调用
inserted：指令所在元素被插入页面时调用
update指令所在模板结构被重新解析时调用：
需求2：定义一个v-fbind指令，和v-bind功能相似，但可以让其所绑定的input元素默认获取焦点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 初识vue</title>
<!--引入vue 引入之后，全局就多了一个vue这个构造函数-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>当前的n值是：<span v-text="n"></span></h2>
<button @click="n++">点我n+1</button>
<input type="text" v-fbind:value="n">
</div>
</body>
<script type="text/javascript">
//阻止vue在启动时生成生产提示
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
n:1,
},
directives:{
fbind:{
// 指令与元素成功绑定时（一开始）,执行下面这个
bind(element,binding){
element.value = binding.value
},
// 指令所在元素被插入页面时被调用
inserted(element,binding){
element.focus()
},
// 指令所在的模板被重新解析时（data里面的内容，就算不是修改的n，也会调用
update(element,binding){
element.value = binding.value
}
}
}
})
</script>
</html>
十一、自定义指令_总结
1.指令名的问题
加入我们定义一个指令v-bigNumber，驼峰命名法，其实在Vue中是不对的，不能这样写
在Vue中，多个单词之间需要用“-”隔开，就和俩面截图中一样
除此之外，当我们用“-”隔开之后，下面写函数的时候，一定要写完整（以前我们是简写的方式）
'big-number'（element,binding）{}
2.directives配置中this指向
指向Window，而不是vm
3.将指令变成全局指令
与过滤器类似
4.备注
指令定义时不加 v- 但是在使用 时记得添加
提供CDN加速