Vue指令

阳光穿透心脏的1/2处 2023-06-25 11:29 14阅读 0赞

### 一、Vue指令的规定 ###

1.  所有的Vue指令必须以v-开头，后面带命令动词。
2.  指令的参数：v-指令动词.参数
3.  指令的修饰符：v-指令动词:修饰符

### 二、绑定HTML属性 ###

1、完整格式：`<a v-bind:href=“url”>链接</a>`  
2、简化格式：`<a :href=“url”>链接</a>`  
3、利用对象同时绑定多个属性：`<a v-bind=“{href:url,title:ti,target:open}”></a>`，上诉代码中url、ti、open都是Vue数据区的变量。

### 三、绑定事件 ###

1.  完整格式：`<button v-on:click=“btnClick”>确定</button>`
2.  简化格式：`<button @click=“btnClick”>确定</button>`
3.  v-on指令的修饰符：  
    (1) 取消事件的传递
    
        <button v-on:click.stop=“btnClick”>确定</button>
    
    (2) 实现事件的捕获传递
    
        <button v-on:click.capture=“btnClick”>确定</button>
    
    (3) 取消对象的默认行为
    
        <button @click.prevent>提交数据</button>
    
    (4) 键盘码/键盘别名

<table> 
 <thead> 
  <tr> 
   <th>键盘按键</th> 
   <th>键盘码</th> 
   <th>键盘别名</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ESC</td> 
   <td>27</td> 
   <td>esc</td> 
  </tr> 
  <tr> 
   <td>Tab</td> 
   <td>9</td> 
   <td>tab</td> 
  </tr> 
  <tr> 
   <td>Enter</td> 
   <td>13</td> 
   <td>enter</td> 
  </tr> 
  <tr> 
   <td>Space</td> 
   <td>32</td> 
   <td>space</td> 
  </tr> 
  <tr> 
   <td>Left</td> 
   <td>37</td> 
   <td>left</td> 
  </tr> 
  <tr> 
   <td>Up</td> 
   <td>38</td> 
   <td>up</td> 
  </tr> 
  <tr> 
   <td>Right</td> 
   <td>39</td> 
   <td>right</td> 
  </tr> 
  <tr> 
   <td>Down</td> 
   <td>40</td> 
   <td>down</td> 
  </tr> 
  <tr> 
   <td>A</td> 
   <td>65</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>a</td> 
   <td>97</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>0</td> 
   <td>48</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

### 四、为元素绑定CSS样式 ###

##### （1）通过class属性绑定CSS样式： #####

1.  利用普通变量： `<div :class="sty01"></div> `
2.  利用数组：`<div :class="[vm,vn]"></div> `
3.  利用对象：`<div :class="{s01:isS01,s02:isS02}"></div> `

##### （2）通过style属性绑定CSS样式： #####

1.  利用普通变量：

1.  利用数组：

1.  利用对象：

> 注意：  
> 上述三种绑定方式中，取值为对象时，键名都是CSS属性名。此时若CSS属性名用引号引住，则可以书写CSS完整的属性名；若CSS属性名不用引号引住，则必须书写为驼峰式命名。

例：

### 五、利用v-model指令为表单元素绑定数据 ###

##### （1）为文本框绑定数据：`<input type=“text” />` #####

1.  绑定方法：`<input type=“text” v-model=“message” />`
2.  实现本质：  
    `<input type="text" :value="message" @input="ok" />`  
    `ok(){ this.message=this.$el.querySelector("input[type=text]").value;}`
3.  利用v-model绑定在文本框上的变量取值为字符串。
4.  v-model也可以为密码域、多行文本域（< textarea>< /textarea>）绑定数据。

##### （2）为单选框绑定数据：`<input type=“radio” />` #####

###### 1. 为单一的一个单选框绑定数据：将变量绑定到checked属性上。 ######

ok:true/false     //为checked属性绑定的变量取值为逻辑值

###### 2. 为成套的多个单选框绑定数据： ######

A .多个互斥选择的单选框必须利用v-model指令绑定同一个变量。【代替了HTML

中name属性必须一致的特点】  
B .将v-model绑定的变量设置为某个单选框value属性的取值，则该单选框默认处  
于选中状态。【代替了HTML中checked属性的功能】  
C .用户所选中的单选框的value属性的取值会被v-model绑定的变量获取。

###### 3. 为复选框绑定数据：`<input type=“checkbox” />` ######

A. 为单一的一个复选框绑定数据：利用v-model绑定一个逻辑变量。
    B. 为成套的多个复选框绑定数据：利用v-model绑定一个数组。

##### （3）为列表/菜单绑定数据： #####

###### 1. HTML中列表/菜单的实现： ######

A .multiple，放置性属性。具备该属性，则表单元素变为列表，可以实现多选。借助Ctrl键选中多个不连续的列表项；借助Shift键选中多个连续的列表项。  
B .size，在multiple实现存在的前提下，设置可以显示的条目个数。

###### 2. 利用v-model绑定变量： ######

A .菜单实现单选，利用v-model指令绑定一个字符变量。该字符变量的取值可以是菜单项value属性的取值，也可以是菜单项的文本内容。  
B .列表实现多选，利用v-model指令绑定一个数组。

### 六、条件渲染指令 ###

*  v-if、v-else、v-else-if：当条件成立时，指定元素被渲染到页面上（可见），否则指定元素  
    不渲染在页面上（不可见）。
 *  v-if和v-show区别：v-show本质是利用CSS中的display:none来实现的。v-if本质是通  
    过重新渲染页面来实现的。频繁切换于显示和隐藏之间的对象最好使用效率较高的v-show。

### 七、循环渲染指令 ###

##### 1. 利用v-for指令遍历数组 #####

v-for="(item,index) in 数组名"
    v-for="(item,index) of 数组名"
    //其中：item表示数组元素内容；index表示索引值。

*  v-for指令可以用于被重复渲染的元素上。

<li v-for="(item,index) in animal">{ { index+1}}.{ { item}}</li>

*  v-for指令可以用于被重复渲染的父元素上，此时多使用< template>标记对。

##### 2. 利用v-for指令遍历对象 #####

v-for="(item,key,index) in 对象名"
    //其中：item表示键值；key表示键名；index表示索引值。