Vue.js学习系列（二）

于 2021-11-20 10:56:10 发布
阅读量956 收藏 1
点赞数 3
分类专栏： Vue.js学习系列 文章标签： 前端框架 vue.js javascript 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44117737/article/details/121436184
版权

在这里插入图片描述
【Vue.js学习系列】
共分为四章：
Vue.js学习（一）：第一节~第四节

文章目录

Vue.js学习系列（一）：1~4章

Vue.js学习系列（二）

五、Vue的分支v-if

5.1 v-if

Vue中的分支语句v-if非常好理解，逻辑跟Java中的if-else相同。v-if语句块包含以下内容：

  • v-if
  • v-else
  • v-else-if
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-if</title>
    </head>
    <body>
        <div id="app">
            <p v-if="flag">
                今天天气很舒服！
            </p>
            <p v-else-if="rich">
                今天天气很燥热，晚上出去溜一圈！
            </p>
            <p v-else="rich">
                晚上只能自嗨！
            </p>
            <!-- 体现了MVVM的双向数据绑定 -->
            <button type="button" @click="rich=!rich">点一下，更改rich状态</button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               flag: false,
               rich: false
           }
        });
    </script>
</html>

当点击button按钮时，若rich值为false，点击后rich值变为true，此时显示 “今天天气很燥热，晚上出去溜一圈！”

当点击button按钮时，若rich值为true，点击后rich值变为false，此时显示 “晚上只能自嗨！”

5.2 v-show

v-if 和 v-show 之间有着看似相同的效果，但优化上却有区别。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-show</title>
    </head>
    <body>
        <div id="app">
            <p v-if="rich">
                好好学习！
            </p>
            <p v-show="rich">
                好好学习！
            </p>
            <!-- 体现了MVVM的双向数据绑定 -->
            <button type="button" @click="rich=!rich">点一下，更改rich状态</button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               rich: false
           }
        });
    </script>
</html>
  • 相同：v-show 和 v-if 在使用上的效果是一样的。
  • 区别：如果在频繁的切换显示状态的场景下（即：显示/不显示）,建议使用v-show，v-show是通过改变css的display属性来控制是否显示，而，v-if则是通过添加或删除dom元素来达到是否显示的效果，从而可以得知，v-show的效率更高。

六、Vue的循环v-for

Vue中的循环关键字并没有 Java 的那么多，只有 v-for，但用法上有多种。

6.1 普通的for循环

需要定义数据源，然后通过v-for来遍历数据源，再使用插值表达式输出数据

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-for 普通的遍历</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="arg in args"> {{arg}} </li>
            </ul>
            <hr>
            <ul>
                <li v-for="(arg,index) in args"> {{index}} === {{arg}} </li>
            </ul>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               args: [1,2,3,4,5]
           }
        });
    </script>
</html>
  • arg：自定义的变量名，在“ arg in args ”代表的是数组args中的一个元素，即数组项。
6.2 带着索引的for
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-for 带着索引的遍历</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(arg,index) in args"> {{index}} === {{arg}} </li>
            </ul>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               args: [1,2,3,4,5]
           }
        });
    </script>
</html>
  • arg：自定义的变量名，代表的是数组args中的一个元素，即数组项。
  • index： 自定义的变量名，代表的是arg在args数组中下标索引值。
6.3 遍历一个对象中的信息：v、k、i
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-for 遍历一个对象中的信息</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(v,k,i) in student"> 索引：{{i}} == 关键字：{{k}} == 值：{{v}}</li>
            </ul>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               student: {
                   username: '小黑',
                   age: 25,
                   girlfriend: '小鱼'
               }
           }
        });
    </script>
</html>
  • v：自定义变量，代表value（对象中属性的值）
  • k：自定义变量，代表key（对象中属性的关键字）
  • i：自定义变量，代表index（对象中属性的索引值）
6.4 遍历一个对象数组：嵌套的for循环
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-for 遍历对象</title>
    </head>
    <body>
        <div id="app">
            <table>
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>对象</th>
                </tr>
                <tr v-for="(student, i) in students">
                    <td>{{i+1}}</td>
                    <td>{{student.username}}</td>
                    <td>{{student.age}}</td>
                    <td>{{student.girlfriend}}</td>
                </tr>
            </table>

            <hr>

            <ul v-for="student in students">
                <li v-for="(v,k,i) in student">
                    {{i+1}} == {{k}} == {{v}}
                </li>
            </ul>

        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               students: [
                    {
                        username: '小黑',
                        age: 25,
                        girlfriend: '小鱼'
                    },
                    {
                        username: '小明',
                        age: 25,
                        girlfriend: '小花'
                    },
                    {
                        username: '小希',
                        age: 25,
                        girlfriend: '小溪'
                    }
               ]
               
           }
        });
    </script>
</html>

在这里插入图片描述

七、Vue的属性绑定

Vue提供了多个关键字，能快速的将数据对象中的值绑定在视图层中。

7.1 v-model

通过v-model将标签的value值与vue对象中的data属性值进行绑定。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-model</title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-model="title" /> {{title}}
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               title: "hello vue"
           }
        });
    </script>
</html>

input 标签中加入了“v-model=‘title‘ ”，表示input的value值与vue对象中的title属性绑定，当在input输入框中输入的内容发生改变，会实时修改title的值。于是{{title}}插值表达式能实时输出input输入框的值。

7.2 v-bind
  • 插值表达式是不能写在html的标签的属性内的
  • 如果要想在标签的属性中使用vue对象中的属性值，可以通过v-bind进行属性绑定，如 v-bing:href
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-bind</title>
    </head>
    <body>
        <div id="app">
            <a v-bing:href="link">百度一下</a>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               link: "http://www.baidu.com"
           }
        });
    </script>
</html>

通过v-bing，a标签内的href属性就与vue对象中的属性值进行绑定。

注意：v-bind也可以简写，使用冒号 “:” 来代替。

<a v-bing:href="link"></a>     ===>    <a :href="link"></a>

八、Vue的事件绑定

关于事件，要把握好三个步骤：设参、传参和接参。

8.1 v-on

v-on：事件绑定，绑定的方法是vue对象里的方法（格式： v-on:事件类型=“vue对象定义好的方法”）

注意：v-on可以用@进行简写，如： v-on:click ===> @click

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>v-on</title>
    </head>
    <body>
        <div id="app">
            sum = {{sum}}
            <br />
            <button type="button" @click="increase()">增加</button>
            <button type="button" v-on:click="show(3)">设参、传参、接参</button>
            步长：
            <input type="text" v-model="step" />
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               sum: 0,
               step: 1
           },
           methods: {
               increase: function() {
                   this.sum += (this.step - 0);
               };
               show: function(num) {
            	   alert(num);
               }
           }
        });
    </script>
</html>
  • 字符串和0进行算术运算，字符串会被自动转化成数值，然后再参与数值运算
  • 当vue对象中的方法需要调用vue对象中的其他属性，需要使用this以代表调用该本vue对象的属性，如： this.sum
  • 设参、传参、接参定义：
    • v-on:click="show(3)：此时的3位设参
    • Vue对象方法的： show: function(num)，此时为传参
    • show（num）方法里的alert(num)：此时为接参
8.2 事件修饰符

使用Vue中定义好的事件修饰符，可以快速达到效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue的事件修饰符</title>
    </head>
    <body>
        <div id="app">
            <p @mousemove="mouseMove">
                x: {{x}}
                y: {{y}}
                <span @mousemove.stop>鼠标移到此处即停止坐标更新</span>
            </p>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
           el: "#app",
           data: {
               x: 0,
               y: 0
           },
           methods: {
               mouseMove: function(event) {
                   this.x = event.clientX;
                   this.y = event.clientY;
               }
           }
        });
    </script>
</html>

上面页面的效果：

鼠标在p标签的范围内移动时，x，y坐标会进行实时更新，当移到span标签范围时，停止更新

8.3 计算属性：computed
8.3.1 什么是计算属性

计算属性的重点突出在属性两个字上（属性是名词），首先它是个属性，其次这个属性有计算的能力（计算是动词），这里的计算就是个函数；简单的说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性）。

8.3.2 计算属性与方法的区别
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue的计算属性</title>
    </head>
    <body>
        <div id="app">
            调用methods的方法（函数）：
            {{ getCurrentDate() }}
            <hr>
            调用computed的计算属性：
            {{ getCurrentDate1 }}
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var v1 = new Vue({
                    el: "#app",
                    data: {
                        
                    },
                    methods: {
                        getCurrentDate: function() {
                            return Date.now();
                        }
                    },
                    computed: {
                        getCurrentDate1: function() {
                            return Date.now();
                        }
                    }
                });
    </script>
</html>

说明：

  • 插值表达式搜索属性时，会先去vue对象的data找相应属性，若data找不到，会去computed下去找属性（此时的属性为计算属性）。

  • methods：定义方法，调用方法使用getCurrentDate()，需要带括号

  • computed：定义计算属性，调用属性使用getCurrentDate1，不需要带括号，

区别：

  • methods：定义的方法，调用时，值可能会产生变化，如调用getCurrentDate()方法时，会根据当前时间显示当前时间戳（即每次调用的值都不一样）。
  • computed：定义计算属性，调用时，值一旦赋值，将不会改变，如调用getCurrentDate1属性时，将会显示第一次调用时的值（即第n次的值与第一次的值一样）

注意：methods和computed里不能重名

8.3.3 测试效果

在这里插入图片描述

8.3.4 结论

调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的话，此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约系统的开销。

Vue.js学习系列（三）：9~12章

Vue.js学习系列（四）：13~16章

Vue.js学习系列合集下载（资源）

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值