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

最新推荐文章于 2023-08-07 22:00:00 发布

laluneX

最新推荐文章于 2023-08-07 22:00:00 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45969777/article/details/105559738

版权

Vue 专栏收录该内容

13 篇文章 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的参数传递问题

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

<div class = "app">
      <h2>{{num}}</h2>
      <button v-on:click="increment()">+</button>
      <button @click="decrement">-</button>
    </div>

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

<button @click="decrement(event)">-</button>

情况二： 当事件需要传递一个参数且需要用到事件对象的时候，则必须把事件对象传到事件处理程序里面，使用 $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>

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

<script src="../library/vue/vue.js"></script>

如果使用的是 生产版本

<script src="../library/vue/vue.min.js"></script>

就不会有错误
在这里插入图片描述
所以还是推荐使用$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”>

例子：
在这里插入图片描述
了解其他的修饰符可以点击这里

四、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>

结果图：
在这里插入图片描述
由图可以知道，上面我们的两个input都是不同的（因为id都不一样的），但是神奇的发生了，在切换不同的input的时候它里面的value值却没有改变，这是为什么呢？答案是Vue内部的虚拟DOM
那上面是虚拟DOM呢？
虚拟DOM其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象(Virtual DOM)。最终可以通过Vue里面的一系列操作使这棵树映射到真实环境上，这样加快了渲染的速度，提升了效率
当然也可以参考官网的虚拟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修改为：

<input type = "text" name = "" id="userName" size="20" placeholder="userName" key="userName">
<input type = "email" name = "" id="userEmail" size="20" placeholder="userEmail" key="userEmail">

结果为：
在这里插入图片描述
大功告成！

五、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属性，原因在下面的视频里面说明
点这里
在对视频里的内容补充一点东西和一些说明
在这里插入图片描述

遍历数字

<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(数组， 索引， 具体值)，给数组的某个位置添加元素*/

例子:
在这里插入图片描述

非响应式的：

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

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

在这里插入图片描述

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

laluneX

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的学习Ⅱ（v-on、v-if、v-else-if、v-else、v-show、v-for）

一、v-on基本使用 <div class = "app"> <h2>{{num}}</h2> <button v-on:click="increment">+</button> /*v-on事件绑定*/ <button @click="decrement">-</butto...
复制链接

扫一扫