目录
前言：
通过这篇文章，您能了解，vue中的指令，以及使用他们
需要注意的点，当然话多不如实践，所以我自己自定义了一个简单的指令
浅聊vue指令
vue的基本结构
<div id="root">
//模板语法
<h1>Hello{
{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})1.为什么学vue指令
我们都了解，在vue中，容器（又称模板），通过vue实例
来管理并解析。最终将数据显示在容器中。如果容器需要绑定
函数的话，就需要在vue实例中书写各种逻辑。
而指令就是封装一系列的逻辑函数。只需要了解使用的场景，以及
语法规则。就可以简化代码量。也是可以与容器建立绑定，实现
数据随data动态改变。
2.指令
2.1数据绑定
2.1.1 v-bind
v-bind : 单向绑定解析表达式, 可简写为 :xxx
数据只能从vue实例中的data流向页面
结构如下：
<div id="root">
单向数据绑定：<input type="text" :value="name"><br/>
<div/>
<!--js部分与前面一样-->效果就是
页面出现一个input框，里面有data中name的值。
2.1.2v-model
v-model：双向绑定解析表达式
数据不仅能从data流向页面，还可以从页面流向data。
结构如下
<div id="root">
单向数据绑定：<input type="text" v-model:value="name"><br/>
<div/>
<!--js部分与前面一样-->
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。
2.2列表渲染
使用指令v-for
v-for指令:
1.用于展示列表数据
2.语法：v-for="(item, index) in xxx" :key="yyy"
3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
eg:
<div id="root">
<!-- 遍历数组
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{
{p.name}}-{
{p.age}}
</li>
</ul>
<div/>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
})
2.2.1了解在v-for中index和key的区别
index是遍历时的每一项的下标。key是每一项的唯一标识。
设想一个场景，当我们已经遍历好一个数组的时候，每一项后面携带一个
input框。这时我们添加一个向数据加入一项数据时，当我们是按顺序添加时，
即数据添加到数组的末位，这时没有任何问题。但是，如果我们是不按顺序添加时
这时index和key的区别就体现出来了
diff算法
Diff算法的作用是用来计算出 Virtual DOM 中被改变的部分，然后针对该部分进行原生DOM操作，而不用重新渲染整个页面，可提交性能
这是通过index为索引的遍历数组
通过key为索引遍历数组时。效果如下
2.3事件监听
2.3.1 v-on
绑定事件监听, 可简写为@后面添加事件
格式如下：
<button @click="showInfo1">点我提示信息</button>在vue实例中配置相应的方法，记住methods中配置的函数，不要用箭头函数！否则this就不是vm了
2.4条件渲染
2.4.1 v-if
写法：
-
v-if="表达式"
-
v-else-if="表达式"
-
.v-else="表达式"
适用于：切换频率较低的场景。
特点：不展示的DOM元素直接被移除。
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。
2.4.2 v-show
写法：v-show="表达式"
适用于：切换频率较高的场景。
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。
2.5其他指令
2.5.1 v-text
1.作用：向其所在的节点中渲染文本内容。
2.与插值语法的区别：v-text会替换掉节点中的内容，{ {xx}}则不会。
比如
<div id="root">
<!-- 遍历数组
<h2>人员列表（遍历数组）</h2>
<ul>
<li v-for="(p,index) of persons" :key="index">
{
{p.name}}-{
{p.age}}
</li>
</ul>
<div/>
new Vue({
el:'#root',
data:{
persons:[
{id:'001',name:'张三',age:18},
{id:'002',name:'李四',age:19},
{id:'003',name:'王五',age:20}
],
})
2.5.2 v-cloak
v-cloak指令（没有值）：
1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。
2.使用css配合v-cloak可以解决网速慢时页面展示出{ {xxx}}的问题
2.5.3 v-once
用法：
<h2 v-once>初始化的n值是:{
{n}}</h2>
v-once指令：
1.v-once所在节点在初次动态渲染后，就视为静态内容了。
2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。
就比如当我们绑定一个数据增加1时的点击事件时，我们点击后，绑定v-once
的节点初次会渲染，点击后不在渲染。
2.5.4 v-pre
<h2 v-pre>Vue其实很简单</h2>
v-pre指令：
1.跳过其所在节点的编译过程。
2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点
3.自定义指令
在自定义指令需要用到一个vue实例的一个属性directives
用法就是directives:{指令名:配置对象} 或 directives{指令名:回调函数}
配置对象中常用的3个回调：
(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。
在这些回调中会接到两个参数
element :DOM节点
binding:事件的实例
3.1实践
定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍
<div id="root">
<h2>{
{name}}</h2>
<h2>当前的n值是：<span v-text="n"></span> </h2>
<h2>放大10倍后的n值是：<span v-big="n"></span> </h2>
</div>
new Vue({
el:'#root',
data:{
name:'尚硅谷',
n:1
},
directives:{
//big函数何时会被调用
//1.指令与元素成功绑定时（一上来）。
//2.指令所在的模板被重新解析时。
big(element,binding){
console.log('big',this) //注意此处的this是window
console.log(element,binding)
element.innerText = binding.value * 10
},
}
在directives属性中定义指令时，this是window
好了这次的文章就到这了
如果觉得还不错的话，帮忙点个关注吧
欢迎大家积极探讨
