VUE
vue框架的两个核心:
和。
第一周：我们需要改变编程思维的习惯：(数据的变化将驱动页面的变化，无需操作DOM）
第二周：我们需要改变编程思维的习惯：(页面包装)
一、前端开发历史
1994年可以看作是前端历史的起点(但没有前端名称) 网景于1995年推出JavaScript 微软于1996年推出iframe标签， 异步局部加载实现 1999年W3C发布第四代HTML微软推出了用于异步数据传输的标准 ActiveX(ActiveXObject)，各大浏览器厂商的模仿实现了 XMLHttpRequest（这是前端的真正的起始） 2006年，XMLHttpRequest被W3C正式纳入标准(这是前端正式的开始，称为富(胖)客户端) 2006年, 发布了jQuery 谷歌于2008年问世V8引擎，发布H5的草案 第五代于2009年发布JavaScript 2009年
2010年 backbone.js 诞生 2014年左右，4G时代到来，混合发展（js, android, ios混合开发） 2017年底年 微信小游戏 前三个框架： angular, react, vue，现在： react， vue， 小程序(微信、支付宝、百度、头条) 以后： js ----- ts (typescript)
二、MV*模式
库 VS 框架
包装一小部分通用业务逻辑（函数），多个包装形成模块或文件，多个模块或文件发展成库或框架
：函数库，如：jQuery。
：框架改变了代码的整体结构，如：vue，react，小程序等等。
MVC架构模式
MVC出现在后端(全栈时代)
M：model，模型，主要完成业务功能，在数据库相关项目中，数据库的增删属于模型(重点)。(nodeJS，不含html的php没有页面的文件是纯逻辑的
V：view，视图主要负责数据显示（HTML CSS，动态网页（jsp，含有html的php)页面显示和用户交互。
C：controller，控制器主要负责每个业务的核心流程，体现在项目的路由和中间部件上(nodeJS)
[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-oGNUZoYm-1647875628960)(.\img\01mvc.png)]
优点:耦合度低，再用性高，生命周期成本低，部署快，可维护性高管理 缺点：由于模型和视图的严格分离，也给调试应用程序带来了一些困难。
MVP架构模式
MVP是单词Model View Presenter首字母的缩写分别表示数据层、视图层和发布层MVC结构的演变。作为一种新模式，
M：model，模型，主要完成业务功能，在数据库相关项目中，数据库的增删属于模型(重点)。 V：view，视图主要负责数据显示 P：Presenter负责业务流程的逻辑处理，Presenter是从Model中获取数据并提供给View的层，Presenter还负责处理后端任务。
[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-APL4OT2p-1647875628962)(.\img\02mvp.png)]
在MVP中View不直接使用Model，而在MVC中View可以绕过Controller从直接Model中读数据。
MVVM架构模式
MVVM是Model-View-ViewModel的缩写，MVVM模式把Presenter改名为ViewModel，基本与MVP模式相似。 唯一的区别是:
[外链图片存储失败，源站可能有防盗链机制，建议保存图片直接上传(img-cJGABu2e-1647875628964)(.\img\03mvvm.png)]
vue是MVVM
MVC衍生出许多变体，MVP,MVVM,MV*, ，M----V----VM，M数据，V视图, VM是负责M与V相互通信
总结：
架构只是一种思维方式，无论是MVC，MVP，还是MVVM，只是一种思考问题解决问题的思维，其目的是解决模块内部的编程过程，模块与模块之间，可维护性、易测试等问题。 架构在于做好代码。
三、开发工具
vscode，webstorm，HbuilderX等等
四、vue框架的初识
vue官网](https://cn.vuejs.org/)
作者：尤雨溪 ( 华人 ) , 前Google员工
vue的介绍
-
构建的web应用开发框架
-
Vue (读音 /vju?/，类似于 view) 构建用户界面用户界面的一套框架
-
Vue 可以设计逐层应用
-
Vue 的核心库只
-
vue框架的核心：和
-
另一方面，易于与第三方库或现有项目集成和 Vue 当生态系统支持的库结合使用时， Vue 也可以完全复杂提供驱动。
vue的示例代码
<body> V <div id="app"> 要被控制的html{
{key}} </div> </body> <scriptsrc="vue.js"></script>
<script> let vm = new Vue({
el:'#app' //el：element。要控制的那片html代码 data:{
key:value }//数据 M }) </script>
vue框架的理解
1、首先：一个页面包括：结构（HTML模板），表现（css），行为（js） 2、其次：原生JS中的做法：写好HTML的模板和css样式，用js产生数据（逻辑），通过dom的方式控制数据显示在HTML中的那个位置，包括如何显示（DOM的方式改变样式） 3、vue框架：vue中，写好HTML模板，地告知vuejs库，数据显示在何处，在vue对象中处理数据，不用做DOM操作（vuejs框架负责）
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xuVJMagr-1647875628965)(\img\04vuejs.png)]
简单理解：new出来一个Vue的实例，传一堆配置参数，控制一片html
记住一点：有了vue，不用程序员操作dom了，因为，vue把dom操作都做好了。
数据驱动和声明式渲染
数据驱动，就是通过控制数据的变化来改变（驱动）DOM。背后使用了，靠数据的变化来控制页面的变化。这是vue框架的核心，第一周，一定要把数据驱动的思路和编程习惯养成。
声明的意思就是告知，广而告之，即告知程序（Vue框架），在何处渲染什么数据
Vue 实现数据绑定（响应式）的原理（面试题）
vue数据绑定是通过 和 的方式来实现的
vue2.× 使用Object.defineProperty(); Vue3使用的是proxy。 当你把一个普通的 JavaScript 对象（json）传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
。当给属性赋值时，程序是能够感知的（知道的）。如果知道的话，就可以控制属性值的有效范围，也可以改变其它属性的值等，在Vue中也可以去改变模板上的显示。
Object.defineProperty()函数：https://blog.csdn.net/jiang7701037/article/details/102785223
数据绑定：涵盖了：数据绑定，响应式。
五、vue语法（view层）
data选项（model层）
功能：
data选项中存储的是页面中需要显示的数据（当然数据可以进行一定的加工后再显示）
是初始化数据的位置，是元数据，是vue实例的一个实例属性，可以接受的数据类型: number/string/boolean/array/json/undefined/null/function
数据绑定
把data中的数据，显示在html中的某处。
https://cn.vuejs.org/v2/guide/syntax.html#%E6%8F%92%E5%80%BC
功能：可以让html标签里的变成动态的（从data中获取）， 使用 mustache语法
格式：{ {变量|属性名|表达式|函数调用等等}}；
示例：
<div id="app">
<span>Message: {
{ msg }}</span>
</div>
new Vue({
el:"#app"
data:{
msg:"hello 哥们！"
}
});
这种写法叫作：声明式渲染，即：只需要告知vue，数据在何处显示。
内容指令：让标签的内容变成动态的。
指令名：v-text 和 v-html
1、v-text="数据名" 转义输出
功能：可以让html标签里的变成动态的（从data中获取），相当于。
示例：
<p v-text="str">内容：</p>
对比v-text和插值({ {}})表达式：
1）、当网络速度慢的时候（vueJs还没有处理自己的语法（v-text和{ {}}），插值表达式会在页面上出现 { {}} 的显示，但是指令v-text不会，因为，v-text是自定义属性，最多不做解读。当，标签中的内容全部来自于属性，那么，可以使用v-text。
2）、插值表达式更加灵活，可以在标签里面的某个地方显示，但是v-text会让整个标签的内容全部变化。
2、v-html="数据" 非转义输出（原封不动进行替换）
功能：可以让html标签里的变成动态的（从data中获取），但是不会对内容中的html标签进行转义。相当于。
示例：
输出真正的 HTML
<p v-html="str">内容：</p>
注
双花括号和 v-text（相当于innerText）会将数据解释为普通文本。 v-html相当于innerHTML
属性指令
属性指令：让标签的属性部分变成动态的。
指令名：v-bind
功能：可以让html标签里的**属性（名和值）**变成动态的（从data中获取）
1、 属性动态绑定：v-bind:html属性="数据" 简写 :html属性=“数据”`
2、 属性动态绑定： v-bind:[属性名]="数据"
示例：
<div v-bind:id="dynamicId"></div>
注意： 属性值是布尔值 的情况
<button v-bind:disabled="isButtonDisabled">Button</button> 如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 属性甚至不会被包含在渲染出来的 元素中
在dom里面插入数据，除了可以写原始的数据，还可以使用javascript表达式
格式：{
{数据+表达式}} 、 v-指令="数据+表达式"
示例：
{
{ number + 1 }}
{
{ ok ? 'YES' : 'NO' }}
{
{ 'i love you'.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
注意：
不能使用语句 ，条件语句可以使用三元代替
条件渲染(指令)
https://cn.vuejs.org/v2/guide/conditional.html
指令名: v-if 和 v-show
功能：一段dom可以根据条件进行渲染
<div v-if="false">box2</div>
<div v-show="true">box1</div>
v-show VS v-if
| v-show=“布尔” | v-if=“布尔” | |
|---|---|---|
| （原理上）区别 | 操作css的display属性 | 操作dom（添加和删除dom完成的） |
| 使用场景 | 适合频繁切换 | 适合不频繁切换 |
| 性能消耗 | 初始渲染消耗（就算元素不显示，也得创建元素） | 频繁切换消耗 |
v-if和 v-show的区别?
相同点： v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。
不同点： 1、原理：
v-show是通过控制元素的样式属性display的值，来完成显示和隐藏； v-if是通过对dom元素的添加和删除，完成显示和隐藏
2、使用场景：由原理（做法）得出使用场景的区别
v-show：使用在dom元素频繁切换的场景 v-if：当dom元素的切换不频繁，可以使用。特别是，首次元素处于隐藏的情况下。
补充： dom的操作（如：创建和删除）是非常耗性能的。为什么？ 请看：https://blog.csdn.net/jiang7701037/article/details/98516468
另外，v-if指令还可以结合v-else-if ， v-else一起使用。
示例：
<p v-if="age<10"> 宝宝 </p>
<p v-else-if="age<18">大宝宝</p>
<p v-else>非宝宝</p>
列表渲染(循环指令)
https://cn.vuejs.org/v2/guide/list.html
指令名: v-for
功能：把数据进行循环显示在html里（渲染）。推荐操作的数据类型：数组、对象、字符串、数字
格式：
用in或者用of都可以：
<li v-for="值 in 数据" v-bind:属性="值">{
{值}}</li>
<li v-for="值 of 数据">{
{值}}</li>
各种情况：
<li v-for="(值,索引) in 数组">{
{值}}/{
{索引}}</li>
<li v-for="(对象,索引) in 数组">{
{对象.key}}/{
{索引}}</li>
<li v-for="(值,键) in 对象">
<li v-for="(数,索引) in 数字">
<li v-for="(单字符,索引) in 字符串">
注意：
1、空数组，null，undefined不循环
2、也可以进行循环嵌套
3、v-for和v-if使用在同一个标签里时，v-for 的优先级比 v-if 更高，即：v-for套着v-if，先循环再判断
面试题：为什么不建议把v-for和v-if连用？
https://blog.csdn.net/jiang7701037/article/details/114954542
在标签里使用属性key，可以唯一标识一个元素。
1、当 Vue.js 用 v-for **更新**已渲染过的元素列表时，它默认用“就地复用”策略。即：**尽量不进行dom元素的操作，只替换文本**。
2、如果你希望进行dom操作，就用key（key不要使用下标），因为key的目的是为了。
有了key后，可以跟踪每个节点的身份，从而重用和重新排序现有元素 建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为（就地复用）以获取性能上的提升。
注意：
key不要使用（数组）下标，并不是会报错，而是失去了唯一标识的意义
事件绑定(指令)
https://cn.vuejs.org/v2/guide/events.html
指令名：v-on
v-on指令可以简写为：@
功能：绑定事件，vue通过v-on指令把事件和处理函数进行绑定。
事件处理函数需要放在methods选项当中去，事件名 不带on，函数可以按照ES5的写法，也可以按照ES6的写法。
格式：
<input type="button" v-on:事件名="方法" >
<input type="button" v-on:事件名="方法(参数)" >
<input type="button" v-on:事件名="方法($event,参数)">
new Vue({
el:，
data:{
}
methods:{
方法1:function(ev,参数){
业务
这里面的this是vue对象本身
}
方法2(ev,参数){
业务
}
}
})
1、 不传参，默认第一个参数，就是事件对象
如：
<button type="button" @click="fn02()">修改数据</button>
………………
fn02(ev){
console.log('事件对象',ev);
},
2、 传参，事件对象需要手动传入(使用vue框架官方提供的 )
如：
<button type="button" @click="fn03('qq',$event)">修改数据</button>
………………
fn03(str,ev){
console.log('事件对象',ev);
console.log('参数',str);
},
1、methods选项里的函数里的this都是vue对象本身，所以，事件处理函数里的this也是vue对象本身
2、vue提供的选项的值如果是函数时，不可用箭头函数 , 会造成this丢失
<div @click.修饰符="函数"></div>
.stop 阻止单击事件继续传播（阻止事件流）
.prevent 阻止默认行为
.capture 使用事件捕获模式
.self 点到自己时才触发，不是从其它地方（事件流的流）流过来的
.once 只会触发一次
.passive onScroll事件 结束时触发一次，不会频繁触发，移动端使用
注意:
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用
v-on:click.stop.self会阻止，而 `v-on:click.self.stop 阻止自身的点击，stop就不起作用了
<div class="greenbox" @click="fnGreen">
<!-- <div class="redbox" @click.self.stop="fnRed"> -->
<div class="redbox" @click.stop.self="fnRed">
<div class="bluebox" @click="fnBlue"></div>
</div>
</div>
<!--普通键--> <div @keyup.修饰符="函数"></div> .left 左 .enter 回车 .13 可以使用键码 <!--系统(组合)键--> <div @keyup.修饰符="函数"></div> .ctrl .alt .shift .exact 精准控制,@键盘事件.修饰符1.修饰符2.exact 只有1+2才可触发 1+2+3不可以 <!--鼠标--> <div @mousedown.修饰符="函数"></div> .left .right .middle 鼠标中键
双向绑定(指令)_表单控件绑定
https://cn.vuejs.org/v2/guide/forms.html
指令名：v-model
功能：视图控制数据，数据也可控制视图,这就是，可通过属性+事件来实现双向绑定。而vue中直接提供了一个指令v-model直接完成（v-model 本质上不过是语法糖）。v-model指令只能使用在表单元素上。
不使用v-model完成双向绑定
<input type="text" :value="data数据" v-on:input="changeIptValue">
使用v-model完成双向绑定
<input type="text" v-model="data数据">
其它表单元素的双向绑定
https://cn.vuejs.org/v2/guide/forms.html
<input v-model.修饰符="数据" />
.number 把标签的值转成数字赋给vue的数据
.trim 删除前后空格
.lazy 确认时才修改model数据
示例：
//需求：
//在下拉框里选择 房间类型（一个房子住多少人，即：几人间）
//动态产生 相应数量的文本框
<select v-model.number="num" >
<option value="1">1人间</option>
<option value="2">2人间</option>
<option value="3">3人间</option>
</select>
<hr>
<input v-for="i in num" type="text" :value="i" >
指令总结
指令 (Directives) 是带有 v- 前缀的特殊属性。其实就是html标签的里的自定义属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，地作用于 DOM，以下是官方的指令，程序员也可以自定义指令。
- v-text： 更新元素的 textContent。如果要更新部分的 textContent ，需要使用 { { Mustache }} 插值。
- v-html：更新元素的 innerHTML
- v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。
- v-on：绑定事件监听器。事件类型由参数指定。
- v-model：在表单控件或者组件上创建双向绑定v-show：根据表达式值的真假，切换元素的 display （CSS 属性）。
- v-if：根据表达式的值的真假条件渲染元素（与编程语言中的if是同样的意思）
- v-else：表示否则（与编程语言中的else是同样的意思）
- v-else-if：（与编程语言中的else if是同样的意思）
- v-for：可以循环数组，对象，字符串，数字，
- v-pre：跳过这个元素和它的子元素的编译过程（vue处理的过程）。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
- v-cloak：防闪烁，模板没编译完，电脑配置差，网速慢等等，有可能会看到{ {}}，体验不佳，不如用css先隐藏，之后再显示，包括被包裹的子元素。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则，如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
- v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。
v-bind 缩写 是冒号 v-on 缩写是 @
样式操作
https://cn.vuejs.org/v2/guide/class-and-style.html
操作样式，就是属性绑定，只不过绑定的属性是class和style，vue在class和style属性上做了，给样式属性赋的值还可以是。
<div v-bind:class="数据|属性|变量|表达式"></div>
<div v-bind:style="数据|属性|变量|表达式"></div>
字符串/对象 / 数组
<div :class="{active:true,t1:false}"></div>
<div :style="[{css属性名:值},{css属性名小驼峰：值}]"></div>
class的属性值（）示例：
//
<div class='big-box' :class="{active:isActive,borderbox:isBorder}"></div>
let vm = new Vue({
el: "#app",
data: {
isActive:true,
isBorder:true
}
});
注：vue绑定的class属性和普通的class属性可以共存
class的属性值（）示例：
<div v-bind:class="[activeClass, errorClass]"></div>
data: {
activeClass: 'active',
errorClass: 'text-danger'
}
style的属性值（）示例：
<div id="app">
<p v-bind:style="str">我是个p</p>
<p v-bind:style="{ width:widthVal+'px',height:'100px',backgroundColor:'blue'}">我是p</p>
<input type="button" value="测试" @click="fn">
</div>
let vm = new Vue({
el: "#app",
data: {
// style属性的值是个对象
str: { width:"200px",height:"100px",backgroundColor:"blue"},
widthVal:200
},
methods:{
fn(){
this.str.width="250px";
this.widthVal ++;
}
}
});
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
activeColor: 'red',
fontSize: 30
}
style的属性值（）示例：
<div :style="[obj1,obj2]"> 我是div</div>
data: {
obj1:{
width:"200px",
height:"150px"
},
obj2:{
"background-color":"red"
}
}
todoList 练习的实现
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6myV0IKo-1647875628967)(img\1594365849928.png)]
为了让大家体会vue是，根据班级情况尝试扩展如下： 二阶段的运动 全选反选（购物车）
非响应式情况
什么是响应式？数据a发生变化了，那么界面使用a的所有地方也会变化（依赖a的所有的数据和界面都会发生变化），背后使用了观察者模式。
什么是非响应式？数据发生变化了，而依赖该数据的地方没有任何变化。
在vue中，使用某些方式改变数据（model层）时，vue不会把结果呈现在页面上（view层），这就是vue出现的非响应式的情况：
-
对数组使用了 （方法的调用不会改变原始数组的内容，如：concat,filter,map）。因为，没有改变原始数组的内容。
-
使用数组的索引（根索引)的方式改变数组的元素时
-
修改数组的长度时
-
给对象添加新的属性时。
所以，强烈建议：不要用下标的方式修改数组的元素，不要修改数组的长度，可以把未来需要的数据都声明在data选项内部，不要对数组使用非变异的api（数组的变异方法：https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95）
Vue.set | this.$set(数组, index, value)
Vue.set | this.$set(对象, key, value)
this.$forceUpdate() 强制刷新
六、vue语法（model层）vue的配置项
data属性：
不再说了
methods:
也暂时不说了，这里面放的是函数的定义，就是普通函数的定义。这些函数可以作为事件处理函数，也可以在其它地方调用。
计算属性
在模板(HTML)中放入太多的逻辑会让模板过重且难以维护，而且不好阅读。计算属性computed来帮忙。
计算属性是一个函数，是经过元数据（data里）进一步运算后的数据，计算属性的是：当元数据不发生变化时，不会再做计算（即：缓存），只有元数据发生变化时，才做计算。是响应式的，需要在模板中渲染才可调用（计算属性只能在模板上使用）
//定义
computed:{
计算属性: function(){
return 返回值}
}
//使用
使用: {
{
计算属性}} | v-指令="计算属性"
| methods | computed |
|---|---|
| 每次调用都会执行函数里的代码 | 基于它们的响应式依赖进行缓存的，如果依赖没有变化，就不再调用 |
| 性能一般 | 性能高 |
| { {methodname()}} | { {computedname}} |
| 适合强制执行和渲染 | 适合做筛选 |
属性检测（侦听属性）
https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7
需要在数据变化时执行的操作时，这个时候需要属性检测watch。而不要使用计算属性，因为计算属性是同步的（需要立即返回结果）
定义一个选项
watch:{
被侦听的属性名:'methods的里函数名' //数据名==data的key
被侦听的属性名:函数体(new,old){
}
被侦听的属性名:{
handler:function(new,old){
},
deep: true //面试题：深度检测，当侦听的属性是个对象，修改对象的某个键时，就能检测到
immediate: true //首次运行,要不要监听
}
}
示例：
请输入您的问题：<input type="text" v-model.lazy="question" /><br/>
答案：<input type="text" v-model="answer" /><br/>
let vm = new Vue({
el:"#app",
data:{
question:"",
answer:""
},
watch:{
question:function(){
setTimeout(()=>{
this.answer = "吃的是草"
},2000);
}
}
});
深度检测：
<div id="app">
<input type="button" value="测试" @click="fn" />
</div>
let vm = new Vue({
el:"#app",
data:{
person:{
name:"张三疯",
wife:{
name:"梅超风"
}
},
},
methods:{
fn(){
this.person.name="李思峰";
}
},
watch:{
person:{
deep: true, //深度检测，当侦听的属性是个对象，修改对象的某个键时，就能检测到
handler:function(){
console.log("person变了");
},
immediate: true
}
}
});
| 计算属性（computed） | 函数（methods） | 属性检测（侦听）（watch） | |
|---|---|---|---|
| 为了显示而用 | 只是处理逻辑，跟普通的函数一样 | 属性变化的检测（相当于事件），当属性的值发生变化时，可以调用函数 | |
| 依赖模板调用 | √（只能在模板上调用的） | √（可以在模板使用） | ×（不能在模板上使用） |
| 是否缓存 | √ | × | √ |
| 异步 | ×（必须是同步） | √（可以有异步） | √（可以有异步） |
自定义指令
https://cn.vuejs.org/v2/guide/custom-directive.html
系统（官方）指令在不够用的情况下，考虑自定义，指令是个函数|对象,用来操作dom的, 里面的this 返回window
Vue.directive('指令名',{
bind:function(el,binding){
binding.arg v-bind:class
}//指令第一次绑定到元素时调用,此时DOM元素还没有显示在页面上
inserted:function(el,binding){
} //绑定指令的DOM元素插入到父节点时调用。DOM已经渲染（显示）
update:function(el,binding){
} //指令所在的元素的model层的数据，view有更新请求时
componentUpdated:function(el,binding){
} //更新完成时，不讲
})
-
**指令名：**定义指令时，不用加 v- , 使用指令时，加 v-
-
钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。 https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0
name: 指令名（不带v-）
arg：写在指令名后面的参数，如：v-myfocus:id ， arg就是id 。 v-bind:value ，arg就是value
expression: 等号后面的表达式，如：v-myfocus:id=“msg+‘1’” ，expression就是msg+‘1’。
value：绑定数据的值，如：v-myfocus:id=“msg+‘1’” ， value就是msg的值和1拼接的结果
示例：
//定义指令：
Vue.directive('myfocus', {
inserted: function (el) { // 当被绑定的元素插入到 DOM 中时……
// 聚焦元素
el.focus()
}
})
使用指令
<div>
<input type="text" v-myfocus />
</div>
模拟v-bind