vue指令以“v-”开头。在Vue中，指令是作用于HTML元素的带有“v-”前缀的特殊特性；指令的作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，因此可以将指令看作特殊的HTML特性（attribute）。
本教程操作环境：windows7系统、vue3版，DELL G3电脑。
vue.js指令是什么？作用是什么？
Vue.js指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
Vue.js作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。
指令的作用是：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
立即学习“前端免费学习笔记（深入）”；
每个指令都有自己的用途，当其绑定的表达式发生改变的时候，会响应式的影响dom的变化。而变化的具体则是看每个指令其本身的用途。比如v-bind指令是绑定属性值，当绑定的表达式发生改变，dom上属性的值也会发生对应的改变。【相关推荐：vuejs视频教程、web前端开发】
指令的语法是：v-指令:参数="表达式"（参数并不是绝对需要的）
参数
:后面跟着的就是参数，但并不一定所有的指令都会有参数，只有特定的指令会需要参数，这是由于指令的性质决定的。这里的参数和函数的参数是类似的，就好比我这个指令需要对应的参数才能使功能生效。
拿v-bind:type="type"来说，v-bind指令用于绑定属性值，那么需要绑定什么属性呢，光靠这个指令无法确定，所以需要参数来进一步确定。也就是v-bind:type，冒号后面跟着的type就是传入指令中的参数。告诉指令，我要绑定属性type和表达式的关联。
上面我们也说了，并不是所有的指令都需要参数。比如v-html指令，这个指令是绑定元素内部的html，功能点已经非常明确，不需要额外的参数去确定，只需要指令和表达式即可完成指令的功能。
表达式
""引号内的值就是表达式，表达式一般可以是一个可执行的js表达式。它与指令本身是有绑定关联的，类似传入指令的值。并且当表达式内的响应式数据发生变化，也会引发dom的变化。
常用的指令
指令一般都是vue内嵌实现的，我们只需要用就可以了。vue中是可以自定义指令的，但这不是我们本节的重点。接下来主要说说一些常用指令的用法和注意点。
v-bind
描述：绑定dom属性，绑定表达式与dom属性
语法：v-bind:属性="表达式" or :属性="表达式"
示例： 绑定输入框的类型为数值类型且禁用
data: {
type: 'number',
disabled: true
}v-on
描述：绑定事件，监听dom上的事件，并绑定回调函数
语法：v-on:事件名="回调函数" or @事件名="回调函数"。事件绑定指令的表达式一般是回调函数，且该函数接受一个参数$event。当绑定的事件被触发就会执行绑定的函数
示例：当点击按钮的时候弹出对话框
methods: {
alert($event) {
alert('有种你打我呀！')
}
}事件绑定的函数一般是在methods中定义的函数，但这边并不是绝对的。对于实例上存在的函数，都可以作为事件绑定的回调函数。
v-if
描述：dom元素显示判断，当表达式为真的时候，显示dom元素，否则销毁dom
语法：v-if="表达式"。只要表达式不一定必须是true，只要能判断为真即显示dom元素
示例：
{{title}}
data: { show: true title: 'v-if的用法' }
除此之外，v-if还可以和v-else-if、v-else搭配使用，其逻辑和js中的if、else if、else是类似的，都是由上至下的执行指令，当指令的表达式为真的时候则该指令生效，显示该dom操作，然后不再执行后续的判断
示例：
lili
mingming
hanhan
无
data: { student: 'mm' }
当判断到第二个条件成立后，即显示dom元素，并不再继续向下执行，v-else不需要表达式判断，若以上情况都不满足该指令执行。
这里需要注意的是，这里的显示更像是初始化，当每次判断为真后都会初始化该元素，而判断为假则会销毁该元素。所以使用v-if类的指令对dom的操作开销较大，会在一定程度上影响性能。
LWP是Library for Web access in Perl的缩写，用途说得很清楚，就是一个访问Web服务器的Perl包。 利用LWP这个包，我们可以很方便的在我们的perl脚本里面访问外部的Web服务器上面的资源。 为什么要用LWP？ 现在的网站应用越做越复杂，要想简单的写一个Sockettelnet去用GET指令获取资源简直是不可能的，特别是一些需要用口令登陆的网站。 如果你只想简单获取一些资源而不想写太多比较复杂的代码的话，那么就应该选用一个合适的封装起来的HTTPD模块。 这些文件的确国内
v-show
描述：dom元素显示判断，当表达式为真的时候，显示dom元素，否则隐藏dom。 看到这里，是不是发现和v-if很相似呢？从功能上看是的，但从实现原理来说这两个则完全不同，这个我们后面在讨论。
语法：v-show="show"
示例：
{{title}}
data: { show: true title: 'v-if的用法' }
当表达式为真的时候则显示元素，否则则隐藏元素。
v-show和v-if的区别
v-show和v-if最根本的区别在于显示和隐藏元素的方式。
-
v-show是采用样式的方式控制元素的显示和隐藏，也就是我们常用的display: none，此时虽然元素是隐藏状态，但在html代码中还是存在的。 -
v-if则是通过直接控制元素代码的方式在控制显示和隐藏。也就是说当元素隐藏的时候，该元素本身在html是不存在的。所以v-if的显示和隐藏，我更喜欢用初始化和销毁来描述。
示例：我们直接来看一下他们在html中的表现形式，因为在显示的情况下，他们几乎看不出区别，所以这里我们隐藏来看看他们之间的差异。
{{title}}
{{title}}
data: { show: false title: 'v-if的用法' }
为了更直观，我为两个元素打上标识
可以看到v-if的html代码是通过注释符替代现隐藏元素，而v-show则是通过css样式display: none来隐藏元素。
这两种控制元素显隐方式各有优劣，适用于不同的场景。这里暂时不详细说，大家有兴趣也可以去了解一下，后面我也会针对这点去展开说说。
v-model
描述：数据双向绑定，这个指令多用于需要绑定值和修改值的操作，比如输入框
语法：v-model="value"
示例：绑定input的值为value，并当改变input的值的时候改变value的值
{{value}}
value的值会与输入框的值绑定，且当编辑输入框的内容的时候也会修改value的值，这就是双向绑定。
双向绑定其实是一种语法糖，它主要有两个操作来实现：
它基本的原理就是，先绑定元素的value值，然后监听input事件，当触发input事件后，改变value（data中）的值，从而实现双向绑定。但需要注意，这里只是说简单的实现，真实情况可能比这个复杂，不同的类型所使用的监听事件类似是不同的，但他们中心原理都是类似的，理解基础实现原理即可。
v-for
描述：用于循环列表。v-for指令最基本的功能就是用于渲染一些样式相对重复的dom，最常使用的就是列表
语法：v-for="item in list" :key="item.id"。v-for指令的表达式与普通表达不同，它基本是确定的，list是需要循环的数组，item则是list遍历的子元素。且不同其他指令，v-for还要搭配key来使用，这主要是为了做唯一标识的作用。item和list都是可以自定义的。比如你也可以写成v-for="data in datas" :key="data.id"。
我们除了可以接收遍历的子元素的值，还可以接收遍历的序号：v-for="(item, i) in list" :key="i"。
要点：将v-for指令绑定到需要循环渲染的元素中，有点类似js的 for in 的用法。并指定好key值。key一般是数据中的唯一值，如果实在没有唯一值，也可以用序号索引
示例：渲染名称列表，
- {{item.name}}
以上就是几个比较常用的指令，用熟悉这几个指令的使用方法和特性，基本可以完成基本的开发工作。
