【vue2第二章】vue指令(v-for,v-model,v-bind,v-on....)

怼烎@ 2023-10-15 09:58 15阅读 0赞

##### vue指令 #####

什么是vue指令呢？  
vue指令就是指带有 “v-”前缀的特殊属性，不同的属性对应不同的功能，学习不同的指令可以解决不同的业务需求.

#### 一、v-html指令 ####

v-html类似于innerHTML向页面插入HTML标签，但是它在动态的解析字符串标签。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="box">
            <div v-html="msg"></div>
        </div>
        <script src="js/vue.js"></script>
        <script>
            const app = new Vue({
          
            el:"#box",
                data:{
          
                    msg:`<a href="http://www.baidu.com">百度</a>`
                }
            })
        </script>
    </body>
    </html>

这段代码就会在浏览器中看到一个超链接，点击就会是baidu搜索的页面。

#### 二、v-if(条件渲染) 和 v-show ####

v-if和v-show是两个很相似的指令，都是根据判断条件来显示和隐藏标签的，但是事实上他们又有很大的区别。  
**相同点：**

1.  控制元素的显示与隐藏
2.  语法v-if=“表达式” 或 v-show=“表达式” 表达式值为 “true”则显示，为“false”则隐藏。

**不同点:** v-show是通过控制css样式来显示和隐藏标签，始终都会加载到页面。  
v-if是条件渲染一但条件不成立。那么是不会渲染标签的

<table> 
 <thead> 
  <tr> 
   <th></th> 
   <th>作用</th> 
   <th>语法</th> 
   <th>原理</th> 
   <th>应用场景</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>v-if</td> 
   <td>控制元素的显示与隐藏</td> 
   <td>v-if=“表达式” 值为 “true”则显示，为“false”则隐藏。</td> 
   <td>v-if是条件渲染一但条件不成立。那么是不会渲染标签的</td> 
   <td>不频繁切换的场景</td> 
  </tr> 
  <tr> 
   <td>v-show</td> 
   <td>控制元素的显示与隐藏</td> 
   <td>v-show=“表达式” 值为 “true”则显示，为“false”则隐藏。</td> 
   <td>通过控制css样式来显示和隐藏标签，始终都会加载到页面。</td> 
   <td>频繁切换显示隐藏的场景</td> 
  </tr> 
 </tbody> 
</table>

演示：flag为true时，两个div都显示  
![在这里插入图片描述][4f8f98d1b37045928962f148f5c5e641.png_pic_center]  
当flag为false时，v-show控制的标签只是改变了css样式的display值，而v-if控制的标签则是直接没有渲染。  
![在这里插入图片描述][00328b3b607f4669890621e54101d9d2.png_pic_center]

#### 三、v-else-if 和 v-else(配合v-if进行条件渲染)。 ####

作用：配合v-if进行条件渲染。  
注意：必须紧挨这v-if使用。  
语法：v-if=“条件表达式” v-else-if=“条件表达式” v-else

当flag为1时显示第一个标签  
![在这里插入图片描述][fc8f235d8cdf407aa013bb8aa3dc9e3c.png_pic_center]  
当flag显示不为1时：  
![在这里插入图片描述][ece13fe0209141d8ac8f15002898f524.png_pic_center]

#### 四、v-on(添加监听事件) ####

1.作用：注册事件=添加监听+提供处理逻辑  
2.简写： @事件名=“内联语句”  
3.语法：

1.  v-on：事件名=“内联语句”
2.  v-on：事件名=“methods中的函数名”

首先演示第一种内联语：  
点击其中的按钮可以对count的值进行自增或者自减。  
![在这里插入图片描述][78a29edc9ae04ffea34fe19953121ebb.png_pic_center]  
演示第二种methods中的函数名：  
通过点击 显示隐藏按钮，来回切换当前flag的值，从而实现隐藏显示 "hello! vue!"的效果  
![在这里插入图片描述][2566c8b1e2794bd6aea06c33ccdd9d8e.png_pic_center]  
当然第二种方式也可以传参，调用，就像：我传入一个”我爱学习vue“的字符串，methods里面接收参数，打印到控制台。  
![在这里插入图片描述][c301604c3a96483d8910251d8fc03084.png_pic_center]

#### 五、v-bind ####

作用：动态设置thml的标签属性如：src，url，titlte  
语法：“v-bind：属性名=”表达式“”  
简写：":属性名=”表达式“ "  
![在这里插入图片描述][76988fdd51ab4037be71c2eecc05afa8.png_pic_center]

#### 六、v-for(循环) ####

1.作用：基于数据循环，多次渲染整个元素  
2.遍历数组语法：  
v-for=“(item,index) in 数组”  
item：每一项  
index：数组下标  
演示:使用v-for循环遍历了data中的数据list数组.  
![在这里插入图片描述][18a31c97fe98455a8488de042fa03684.png_pic_center]

###### v-for中的key ######

key的作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用。  
注意点：

1.  key值只能是 字符串 或者 数字类型
2.  key的值必须具有唯一性
3.  推荐使用id做为key(唯一)，不推荐使用index做为key(会变化，不唯一)

这是一个测试案列：  
![在这里插入图片描述][f06f1c43545d4aa1aa3e53ae5dcf06fb.png_pic_center]

加了key会指定删除元素![在这里插入图片描述][f0c105dedd254b1da152020fb50d6fb5.png_pic_center]

没有加key的效果v-for将会直接复用元素：![在这里插入图片描述][aaf80cfc31fd4403bcd5777a80ac3da3.png_pic_center]

![在这里插入图片描述][8d9d6a36b69a4488afc11537ed17e0f0.png_pic_center]

#### 七、v-model(双向绑定) ####

v-model可以让数据和视图，形成双向数据绑定  
(1) 数据变化，视图自动更新  
(2) 视图变化，数据自动更新  
**语法**：v-model=“变量名”

如下图：在浏览器input框输入改变值下面vue插件对应的值也会改变。在vue插件中改变对应的值，那么上面浏览器中input框的数据也会改变.  
![在这里插入图片描述][256c23f5318446418a692e854deee294.png_pic_center]

[4f8f98d1b37045928962f148f5c5e641.png_pic_center]: https://img-blog.csdnimg.cn/4f8f98d1b37045928962f148f5c5e641.png#pic_center
[00328b3b607f4669890621e54101d9d2.png_pic_center]: https://img-blog.csdnimg.cn/00328b3b607f4669890621e54101d9d2.png#pic_center
[fc8f235d8cdf407aa013bb8aa3dc9e3c.png_pic_center]: https://img-blog.csdnimg.cn/fc8f235d8cdf407aa013bb8aa3dc9e3c.png#pic_center
[ece13fe0209141d8ac8f15002898f524.png_pic_center]: https://img-blog.csdnimg.cn/ece13fe0209141d8ac8f15002898f524.png#pic_center
[78a29edc9ae04ffea34fe19953121ebb.png_pic_center]: https://img-blog.csdnimg.cn/78a29edc9ae04ffea34fe19953121ebb.png#pic_center
[2566c8b1e2794bd6aea06c33ccdd9d8e.png_pic_center]: https://img-blog.csdnimg.cn/2566c8b1e2794bd6aea06c33ccdd9d8e.png#pic_center
[c301604c3a96483d8910251d8fc03084.png_pic_center]: https://img-blog.csdnimg.cn/c301604c3a96483d8910251d8fc03084.png#pic_center
[76988fdd51ab4037be71c2eecc05afa8.png_pic_center]: https://img-blog.csdnimg.cn/76988fdd51ab4037be71c2eecc05afa8.png#pic_center
[18a31c97fe98455a8488de042fa03684.png_pic_center]: https://img-blog.csdnimg.cn/18a31c97fe98455a8488de042fa03684.png#pic_center
[f06f1c43545d4aa1aa3e53ae5dcf06fb.png_pic_center]: https://img-blog.csdnimg.cn/f06f1c43545d4aa1aa3e53ae5dcf06fb.png#pic_center
[f0c105dedd254b1da152020fb50d6fb5.png_pic_center]: https://img-blog.csdnimg.cn/f0c105dedd254b1da152020fb50d6fb5.png#pic_center
[aaf80cfc31fd4403bcd5777a80ac3da3.png_pic_center]: https://img-blog.csdnimg.cn/aaf80cfc31fd4403bcd5777a80ac3da3.png#pic_center
[8d9d6a36b69a4488afc11537ed17e0f0.png_pic_center]: https://img-blog.csdnimg.cn/8d9d6a36b69a4488afc11537ed17e0f0.png#pic_center
[256c23f5318446418a692e854deee294.png_pic_center]: https://img-blog.csdnimg.cn/256c23f5318446418a692e854deee294.png#pic_center