指令(directive):

1.什么是指令:

专门给HTML元素添加新功能的特殊HTML属性

2.包括: 13种

2.6. v-on:

a.什么是: 专门为元素绑定事件的指令

b.何时: 今后，只要在vue中要给元素绑定事件处理函数，都用v-on

c.如何: <元素 v-on:事件名="事件处理函数(实参值,...)"

d.简写:

所有v-on，都可简写@:

<元素  @事件名="事件处理函数(实参值,...)"

如果事件处理函数不需要传实参值，则可以省略()
```
<元素  @事件名="事件处理函数"
```

e.传参: vue中事件处理函数，可以传实参值:

<元素  @事件名="事件处理函数(实参值1, 实参值2,...)"
methods:{
	事件处理函数(形参1, 形参2, ...){
     ...
    }
}

f.获得事件对象: vue中也可以像DOM一样获得事件对象

回顾: DOM中: 当事件发生时，浏览器总是将事件对象event，默认作为事件处理函数的第一个实参值传入函数。所以，我们只要定义一个形参变量e，等着接就可以了！

//事件发生时
    //    浏览器自动创建event对象
    //                    ↓
    元素.on事件名=function(e){ e->event }
    或
    元素.addEventListener("事件名", function(e){ e->event })

在vue中也可以这样获得事件对象e:

<元素  @事件名="事件处理函数" //一定不要加()
methods:{
	事件处理函数(e){ e->event }
}

问题: 想获得事件对象，就无法传实参；传实参就不能获得事件对象

解决: 既想穿实参值，又想获得事件对象，就要借助于vue中一个关键字:$event

i.什么是: 专门在vue中提前获得事件对象的一个关键字

ii.如何:

     //当事件发生时
     //     浏览器自动创建事件对象event
     //                              ↓
     <元素  @事件名="事件处理函数($event, 其它实参, ...)"
     methods:{
       事件处理函数(e, 形参,...){
         e->event //结果是一样的。
       }
     }

原理: 在事件发生时，$event关键字会提前获得事件对象event。再由vue框架代为转交给事件处理函数对应的形参变量
强调: 只要使用$event关键字获得事件对象，则参数顺序无所谓，只要形参和实参可以对应的上即可！

g.示例:

有无参数：

事件对象e

既想穿实参值，又想获得事件对象

cilck-$event.png

$eventV.png

2.7v-ckoak:

什么是: 专门在new Vue()加载之前，暂时隐藏部分元素的特殊指令
何时: 今后只要希望在new Vue()加载完之前，暂时隐藏部分元素，避免用户短暂看到{{}}，都可以用v-cloak。
如何: 2步:

i. 先在css中用属性选择器，选择所有带有v-cloak属性的元素，使用display:none，手工隐藏这些元素

ii. 然后，才<要暂时隐藏的元素 v-cloak>
原理:

i. 在new Vue()加载完之前，v-cloak和css中的属性选择器[v-cloak]联合发挥作用，隐藏部分元素

ii. 当new Vue()加载完之后，会自动查找页面中所有v-cloak的元素，自动删除所有v-cloak属性。结果，原来被v-cloak隐藏的元素，现在都显示出来了。

2.8. v-text:

什么是: 专门代替{{}}绑定元素内容的特殊指令
何时: 今后，只要不想让用户短暂看到{{}}，都可用v-text代替{{}}

如何:

<要隐藏的元素  v-text="变量或表达式"></要隐藏的元素>

强调: 如果v-text的内容需要部分写死的文本和变化的内容拼接而成，则必须用模板字符串:xxx${变量}xxx
原理: v-text和{{}}一样，底层相当于DOM中的v-text。v-html底层相当于DOM中的innerHTML。
示例: 使用v-cloak或v-text防止用户短暂看到{{}}

2.9v-once:

什么是: 专门控制一个元素只在首次加载时绑定一次。之后，即使变量值改变，也不会自动更新页面。
何时: 如果发现一个元素的内容，只会在首次加载时绑定一次。之后几乎不会改变时，都用v-once标记
如何: <元素 v-once>{{...}}</元素>
原理: 凡是标有v-once的元素，new Vue()只在首次记载时，动态更新元素的内容。但是不会将v-once的元素加入到虚拟DOM树中。所以，将来就算变量值发生变化，也无法通知到这个元素。
优化: 凡是标有v-once的元素，都不会加入虚拟DOM树中。所以，无形中，又减少了虚拟DOM树中的元素的个数！使虚拟DOM树遍历更快，效率更高！所以，今后，只要发现一个值只在首次页面加载时动态变化，之后几乎不变时，都应该用v-once。
示例: 使用v-once标记元素只在首次绑定时更新一次，之后不再反复更新

2.10v-pre:

什么是: 专门阻止vue编译内容中的{{}}的特殊指令
何时: 极少数情况下，正文中包含了不像被vue编译的{{}}时，采用v-pre保护。
如何:
```
<元素  v-pre>xxx{{xxx}}xx</元素>
```
示例: 使用v-pre防止vue编译内容中的{{}}

2.11v-model

1.问题: 当用户主动在文本框中输入内容后，如果使用:value="str"方式绑定，则用户输入的内容无法自动回到程序中的变量中保存:

2.原因: 其实之前所学12种指令+{{}}都是单向绑定:

a.只能将程序中的变量值，自动同步到页面上显示

上的去——M->V

b.不能自动将界面中的用户主动做的修改，自动同步回程序中变量里保存

下不来——不能V->M

3.解决: 今后只要希望在程序中自动获得页面中用户主动做的修改时，都要用双向绑定v-model

4.双向绑定:

a.既能将程序中的变量自动同步到页面上显示

上的去——M->V

b.又能将页面上用户主动修改的新值自动更新回程序中的变量保存.

下的来——V->M

5.如何:

<表单元素  v-model="变量">

6.示例: 使用双向绑定实现点按钮，获得文本框中用户输入的内容:

7.原理: 双向绑定无非就是在单向绑定的基础上，能自动为元素添加onchange或oninput事件处理函数。并能在事件处理函数中，自动将新值更新到data中的变量中。

8.示例: 使用:value+@input事件模拟实现双向绑定:

v-model原理.png

9.监视函数:

什么是: 专门用于监视一个变量的变化，并在变量值发生变化时自动执行的一个函数.
何时: 今后，只要希望一个变量的值一改变，我们就能自动执行一项操作时，都可用监视函数

如何:

  new Vue({
    data:{
      变量名: 值
    },
    //监视
    watch:{
	  变量名(){
		//只要上面的同名变量值一发生改变，watch中的同名监视函数就会自动执行。
      }
    }
  })

10.事件修饰符:

什么是: 简化版的对事件的约束
何时: 今后想改变事件的默认行为或约束触发事件的条件时，都可以用事件修饰符

包括:

a. 限制用户按的键盘号:

    1). DOM中: 
     事件处理函数(e){
       if(e.keyCode==13){
         ... ...
       }
     }
    2). vue中: <元素  @事件名.13="事件处理函数">

b. 停止冒泡:

    1). DOM中: 
     事件处理函数(e){
       e.stopPropagation();
       ... ...
     }
    2). vue中: <元素  @事件名.stop="处理函数">

c. 阻止默认行为:

    1). DOM中: 
     事件处理函数(e){
       e.preventDefault()
       ... ...
     }
    2). vue中: <元素  @事件.prevent="事件处理函数">

其实多个事-修饰符可以连用

    <元素 @事件.stop.prevent="事件处理函数">
    //等效于DOM中: 
    事件处理函数(e){
      e.stopPropagation()
      e.preventDefault()
    }

11.示例: 实现按回车搜索和一边输入一边搜索:

事件修饰.png

事件修饰V.png

12.双向绑定在不同表单元素中的原理:

A.文本框<input type="text">和文本域<textarea>:

a. 当首次加载时，v-model将程序中变量的值更新到页面上的文本框中显示

b. 当用户主动在文本框中输入了内容时，v-model自动将用户输入的内容更新回程序中变量中保存。

B.单选按钮<input type="radio">多选一时:

<input type="radio" name="sex" value="1" v-model="sex">男
<input type="radio" name="sex" value="0" v-model="sex">女

a. 现象:

两个或多个input为一组
value值是定死的，是备选的！

b. 如何: 每个<input type="radio">备选项上都要添加一个v-model="sex"。

c. 原理:

首次加载页面时，v-model读取程序中的变量值，用变量值自动与每个radio写死的value值做比较。哪个radio的写死的value值刚好等于变量值，则当前radio自动选中。否则如果radio的写死的value值与变量值不相等，则radio不选中。
当用户切换选中项时，v-mode只会自动将选中的一个radio身上写死的value值更新到程序中变量里保存。如果未选中的radio身上的value值是不需要放回程序中的。

d. 示例: 获取选择的性别:

C.下拉列表<select>:

 <select>
   <option value="备选值1">
   <option value="备选值2">
   <option value="备选值3">

a. 现象:

1). 一个<select>下包含多个<option>

2). 每个<option>上都有一个写死的备选值value属性

b. 如何: 只要在父元素<select>上写一个v-model="变量"即可

c. 原理:

1). 加载数据时: v-model会读取程序中的变量值，自动跟<select>下每个option身上写死的value值做比较。哪个option上写死的value值与变量值一致，则哪个option被选中。反之，其余value值与变量值不相等的option，就不选中

2). 当用户主动切换select中的选中项后，v-model只会将选中的option的value值自动更新回程序中变量里保存。

d. 示例: 选择城市，切换城市图片

D.复选框checkbox单独使用:

<input type="checkbox">同意

a. 现象: 没有value属性值

b. 如何:

<input type="checkbox" v-model="变量">

c. 强调: 绑定给checkbox的值也应该是bool类型的值

d. 原理:

1). . 加载数据时: v-model会先取出变量值，将变量值赋值给checkbox的checked属性。如果checked属性为true，则当前checkbox选中，否则如果checked属性值为false，则当前checkbox就不选中。

2). 当用户切换当前checkbox的选中状态后，v-model会将当前checkbox的checked属性的新状态bool值，自动更新回程序中的变量里保存。

f. 示例: 点同意，启用元素; 不同意，禁用元素

复选框checkbox使用

2.12绑定样式:

A.绑定内联样式: 3种方式:

(1). 将元素的style属性看做一个大的字符串来绑定:

<元素  :style="变量名">

   data:{
    变量名:"css属性名1: 属性值1; css属性名2:属性值2;..."
   }

b. 结果: 运行时，vue会把变量的字符串值，直接放到元素的style属性后，作为元素的内联样式。

c. 问题: 极其不便于只修改其中某一个css属性值——几乎不用！

内联样式1.png

(2). 使用对象语法灵活绑定每个css属性值:

style="css属性1:属性值1;css属性2:属性值2;..."

自动↑翻译

<元素  :style="{ css属性名1:变量1, css属性名2:变量2 , ... }>

data:{
	变量1: 属性值1, 
	变量2: 属性值2
}

b. 优点: 极其便于修改其中某一个css属性值

c. 缺点: 如果多个元素刚好都需要绑定同一个css属性，则属性值的变量名极容易冲突！

d. 示例: 绑定一架飞机的位置:

内联样式2.png

(3). 将对象写在data中的绑定方式:

<元素1  :style="变量1">
<元素2  :style="变量2">
data:{   //变量1:" css属性1:值1; css属性2:值2;..."
	变量1:{ //先将对象语法编译为字符串
		css属性1:值1,
		css属性2:值2
	},
	变量2:{
		css属性1:值1,
		css属性2:值2
	},
}

b. 好处: 既便于修改任意一个元素的css属性，又避免多个元素的css属性发生冲突

(4). 问题: 如果有些css属性是变化的，有些css属性是固定不变的，怎么办？

(5). 解决: 固定不变的css属性，写在不带:的style里。变化的css属性，写在带:的style里。运行时，两个style是合并发挥作用的。不会发生覆盖！

<元素 style="固定不变的css属性们" :style="可能变化的css属性们">

(6). 示例:绑定两架飞机的位置:

内联样式3.png

2.13绑定class: 3种:

(1). 将class属性看做一个普通的字符串变量绑定

<元素  :class="变量名"
   data:{
    变量名:" class名1  class名2   class名3  ..."
   }

b. 缺点: 极其不便于只修改其中某一个class。

(2). 将class属性看做一个对象来绑定:

<元素  :class="{ class名1: 变量1, class名2:变量2,... }"
data:{
    变量1: true或false, 
    //开关，true启用这个class，false就不启用这个class
  	变量2: true或false
   }

b. 优点: 便于修改某一个class

c. 问题: 如果多个元素都绑定同一种class，但是启用或不启用的状态不同，class的变量名就极容易发生冲突

d. 示例: 实现手机号带样式的验证:

(3). 将对象放进data中定义:

<元素1 :class="变量1">
<元素2 :class="变量2">

   data:{
   变量1:{ //vue先将对象语法翻译为class字符串，再放入HTML中class属性中
    class名1: true或false, 
    class名2:true或false
   },
   变量2:{
    class名1: true或false, 
    class名2:true或false
   },
  }

b. 优点: 避免不同元素之间绑定同一class时互相影响

(4). 问题: 大部分class其实是很稳定的，只有个别class需要切换。

(5). 解决: 不变的class，应该放在不带:的class中。而变化的class，才放在带:的class中。最终编译时，不带:的class会和带:的class合并为一个class共同起作用。

<元素 class="固定不变的class" :class="变化的class"

(6). 示例: 实现手机号和密码的带样式的验证:

总结:

(1). 如果元素的内容需要随变量自动变化: {{}}

(2). 如果元素的属性值需要随变量自动变化: :

(3). 控制一个元素显示隐藏: v-show //使用display:none隐藏元素

(4). 控制两个元素二选一显示: v-if v-else //使用删除元素方式隐藏元素

(5). 控制多个元素多选一显示隐藏: v-if v-else-if v-else

(6). 反复生成多个相同结构不同内容的元素时: v-for :key

(7). 事件绑定: @ $event

(8). 只要绑定的内容中包含HTML片段: v-html

(9). 防止用户短暂看到{{}}: v-cloak 或 v-text

(10). 限制元素只在首次加载时绑定一次，之后不再变化: v-once

(11). 阻止vue编译内容中的{{}}: v-pre

(12). 只要想自动获得页面上用户输入或选择的新值: v-model

(几乎只要表单元素，都用v-model)

vue-02:指令与v-model与其他元素的绑定