Vue的学习Ⅱ（v-on、v-if、v-else-if、v-else、v-show、v-for）

- 日理万妓 2023-05-22 06:46 46阅读 0赞

# 一、v-on基本使用 #

<div class = "app"> <h2>{ { num}}</h2>
          <button v-on:click="increment">+</button>		/*v-on事件绑定*/
          <button @click="decrement">-</button>			/*v-on的语法糖*/
        </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              num: 10
            }, methods: { 									/*ES6的方法增强写法*/
              increment() { 
                return this.num++;
              }, decrement() { 
                return this.num--;
              }
            }
          })
        </script>

# 二、v-on的参数传递问题 #

**情况一：**当事件不需要传递参数的时候（）有还是没有都不影响的

**要注意的是：** 在绑定事件的时候，如果没有括号那么该方法则会本身自带传递一个参数（事件对象）  
**类似于**

**情况二：** 当事件需要传递一个参数且需要用到事件对象的时候，则必须把事件对象传到事件处理程序里面，使用 **$event** 即可

<div class = "app"> <h2>{ { num}}</h2> <button v-on:click="increment(str)">需要传参数，但没有传事件对象的</button> <br><br> <button @click="test(str, event)">需要传参数，传了一个event的</button> <br><br> <button @click="decrement(str, $event)">需要传参数，传了一个$event的</button> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              num: 10,
              str: '熊大',
              event: '我是一个变量，不是事件对象'			/*event是一个变量*/
            }, methods: { 
              increment(str, event) { 
                console.log(str);
                console.log(event)
              }, test(str, event) { 
                console.log(str);
                console.log(event)
              }, decrement(str, event) { 
                console.log(str);
                console.log(event)
              }
            }
          })
        </script>

**结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]  
但要注意的是上面我这里的Vue用的是 **开发版本**

如果使用的是 **生产版本**

就不会有错误  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]  
**所以还是推荐使用$event，因为生产版本更加符合程序员的气质（严谨一点吧）**  
官方是这样解释的：**Deprecated symbol used, consult docs for better alternative** （不赞成使用符号，请查阅文档以获得更好的选择  
）  
**情况三：** 当需要传递一个参数且不需要用到事件对象的时候，直接使用括号即可

<div class = "app"> <h2>{ { num}}</h2> <button @click="increment(str)">需要传参数，但不需要传事件对象的直接使用（）</button> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              num: 10,
              str: '熊大'
            }, methods: { 
              increment(str) { 
                console.log(str);
              }
            }
          })
        </script>

**要注意的是这里的 $event事件对象 与 原生js 里面的 事件对象是同一个对象**

# 三、v-on的修饰符 #

### 阻止冒泡 ###

> 原生js：e.stopPropagation();  
> Vue：<button @click.stop=“increment”></button>

### 阻止默认行为 ###

> 原生js：e.preventDefault();  
> Vue：<button @click.prevent=“increment”></button>

### 监听键盘的某个键 ###

> 原生js：需要在js里面写写if语句判断  
> Vue：<input type = “text” @keyup.enter=“getKeycode”>

### 监听组件根元素的原生事件（用于自定义组件） ###

> .native  
> 这里等我学习到了在补充吧

### 一触发一次的回调 ###

> <button @click.once=“increment”>

**例子：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]  
了解其他的修饰符可以点击[这里][Link 1]

# 四、v-if、v-else-if、v-else #

不过不适合在template里面的业务逻辑太多，一般都是在vue里面的computed里面经过处理之后再在template呈现数据

<div class = "app"> <h2 v-if="num > 101">当前的数字为：{ { num}} > 101</h2> <h2 v-else-if="num > 11">当前的数字为：{ { num}} > 11</h2> <h2 v-else>当前的数字为：{ { num}}</h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              num: 10,
            }
          })
        </script>

if语句**从大到小**，媒体查询**从小到大**

# 五、一个关于input的复用的小问题（与Vue的虚拟DOM有关系） #

**上代码：**

<div class = "app"> <span v-if="flag"> <label>用户名登陆</label> <input type = "text" name = "" id="userName" size="20" placeholder="userName"> </span> <span v-else> <label>邮箱登陆</label> <input type = "email" name = "" id="userEmail" size="20" placeholder="userEmail"> </span> <br> <button @click="getChange">切换</button> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              flag: true
            }, methods: { 
              getChange() { 
                this.flag = !this.flag;
              }
            }
          })
        </script>

**结果图：**  
![在这里插入图片描述][20200416192741654.gif]  
由图可以知道，上面我们的两个input都是不同的（因为id都不一样的），但是神奇的发生了，在切换不同的input的时候它里面的value值却没有改变，这是为什么呢？答案是Vue内部的虚拟DOM  
**那上面是虚拟DOM呢？**  
虚拟DOM其实就是一棵以 **JavaScript 对象( VNode 节点)作为基础的树**，用对象属性来描述节点，实际上它只是一层对**真实 DOM 的抽象(Virtual DOM)**。最终可以通过**Vue里面的一系列操作使这棵树映射到真实环境上**，这样加快了渲染的速度，提升了效率  
当然也可以参考[官网的虚拟DOM][DOM]  
**那上面的两个input的与虚拟DOM有上面关系呢？**  
**在最开始的时候**，Vue把模板里面if语句包含且值为true的DOM元素（与用户名登陆相关的元素）先挂到虚拟DOM树上面，在把虚拟DOM树上面的DOM渲染到页面上面，当点击**切换**的时候，Vue**还是**先把模板里面if语句包含且值为true的DOM元素（与用户名登陆相关的元素）先挂到虚拟DOM树上面，**但是树上面已经有了一个label与一个input的元素**，所以**Vue不会重新在树上面挂上DOM** **（key的原因）**，而是经过Vue内部的一些算法来替换掉对应不同的内容（比如input的value、type、placeholder等等），**但是input的key属性除外**，所以我们可以利用 **key** 来处理掉相应的问题(**key不同就不会复用**)，**且key的查找是在虚拟DOM里面全局查找** ,**且key如果不唯一那么运行的时候就会有警告，所以就需要尽量保证数据的唯一性**  
**input修改为：**

**结果为：**  
![在这里插入图片描述][20200416195038412.gif]  
大功告成！

# 五、v-show #

<div class = "app"> <h2 v-show="flag">吉吉大王</h2> <h2 v-if="flag">吉吉大王</h2> <h2></h2> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              flag: true
            }
          })
        </script>

由上面可知，**v-if与v-show渲染效果相同**，实则不然  
因为**当flag值由true切换为为false时**，在页面里的DOM里面根本就没有v-if对应的元素（直接删除了其对应dom节点），但v-show对应的DOM只是display：none了而已 ，**当然在flag值为true的时候他们两者渲染效果的确相同**  
**所以在需要在显示与隐藏频繁切换的时候**，用v-show  
**只有一次切换的时候**用v-if

# 六、v-for #

### 遍历数组 ###

<div class = "app"> <h2 v-for="(value, index) in names">{ { index + 1}}号--{ { value}}</h2>	/*两个值的时候，第一个为具体值，第二个为索引*/
          <h2 v-for="item in names">{ { item}}</h2>	/*一个值的时候，值为具体值*/
          <h2>{ { names[0]}}</h2>				/*数组里面索引为0的值*/
          <h2>{ { names}}</h2>				/*整个数组*/
        </div> </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              names: ['熊大','熊二','翠花','光头强']
            }
          })
        </script>

### 遍历对象 ###

<div class = "app"> <h2 v-for="(value, key, index) in names">{ { key}}--{ { value}}--{ { index}}</h2>	/*三个值的时候，第一个为对应值，第二个为键值，第三个为索引*/
          <h2 v-for="(value, key) in names">{ { key}}--{ { value}}</h2>	/*两个值的时候，第一个为对应值，第二个为键值*/
          <h2 v-for="item in names">{ { item}}</h2>	/*一个值的时候，值为对应值*/
          <h2>{ { names.actress1}}</h2>				/*对象里面的actress1属性*/
          <h2>{ { names}}</h2>						/*整个对象*/
        </div> <script> const app = new Vue({ 
            el: '.app', data: { 
              names: { 
                actor1: '熊大',
                actor2: '熊二',
                actress1: '翠花',
                actor3: '光头强'
              }
            }
          })
        </script>

**官方推荐我们在使用v-for的时候，给对应的元素或者组件添加上一个v-bind:key属性，原因在下面的视频里面说明**  
[点这里][Link 2]  
**在对视频里的内容补充一点东西和一些说明**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]

### 遍历数字 ###

<div v-for="index in 5" :key="index">{ {  index }}</div>		
    /*注意这里是从1开始*/

# 七、数组中哪些方法是响应式的 #

### 响应式的： ###

##### push()：在数组的最后面加入元素（可以是一个也可以是多个值） #####

this.names.push('111','222');

##### pop()：在数组的最后面删除元素（没有参数，只能删除最后一个） #####

this.names.pop();

##### shift()：在数组的最前面删除元素（没有参数，只能删除最后一个） #####

this.names.shift();

##### unshift()：在数组的最前面加入元素（可以是一个也可以是多个值） #####

this.names.unshift('111','222');

##### splice()：在数组的某个位置加入（替换、删除）元素（可以是一个也可以是多个值） #####

this.names.splice(0, 0, '老王', '吉吉国王');

##### sort()：给数组排序（里面可以传递一个函数） #####

this.names.sort();

##### reverse()：给数组翻转 #####

this.names.reverse();

##### Vue.set()：给数组某个位置加入元素 #####

Vue.set(arr, 0, 23);		/*Vue.set(数组， 索引， 具体值)，给数组的某个位置添加元素*/

**例子:**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 7]

### 非响应式的： ###

**因为Vue的内部并没有对以下的修改数组的方式进行监听，所以导致了当数据改变时，数组渲染到页面的数据并没有改变**

this.names[0] = '毛毛';

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 8]

本人只用于个人的学习与记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230521/363f5fc68e79405e8ecdfbb3b7876193.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 1]: /images/20230521/a5486a0777424330969fb15b6375c33d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 2]: /images/20230521/3d408e7c73664fee89163f39999637ed.png
[Link 1]: https://cn.vuejs.org/v2/guide/events.html#%E4%BA%8B%E4%BB%B6%E4%BF%AE%E9%A5%B0%E7%AC%A6
[20200416192741654.gif]: /images/20230521/b111db59d94a47419fa2dc654575ab62.png
[DOM]: https://cn.vuejs.org/v2/guide/render-function.html#%E8%99%9A%E6%8B%9F-DOM
[20200416195038412.gif]: /images/20230521/3c189dde469643aaa228491eff5f17d0.png
[Link 2]: https://www.bilibili.com/video/BV15741177Eh?p=37
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 3]: /images/20230521/43d1c65403a746b6b98b7f1467c7960f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 4]: /images/20230521/618e87b723034c5db012934f33c6a8e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 5]: /images/20230521/cb9450fb722a4e99b926e6786fb878b7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 6]: /images/20230521/0ec01a831601457f8d3b694b3fb93681.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 7]: /images/20230521/b2a01e3f3e4c49ac803d1e97e2a1fe36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70 8]: /images/20230521/435216f9b3ce4b7ba6c2c30f60a12994.png