VUE学习笔记（二）

2022-02-17 10:37:03

VUE学习笔记（一）

四、Vue对象总结

Vue.js通过加载js，实现对页面的快速渲染。vue封装的js该如何使用？ 就必须了解MVVM双向数据绑定模式。Vue将视图层和数据层分离，通过MVVM建立视图层和数据层的连接。其中，插值表达式是一种连接方式，可以通过插值表达式以多种方式，快速的从数据层获取数据并展示在视图层上。数据层Vue对象，也是由很多部分组成，比如之前介绍的el，data，methods等，以及之后要介绍的mount，computed等。

五、Vue的分支 v-if

5.1 v-if

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

  • v-if
  • v-else
  • v-else-if

接下来以一个简单例子即可理解：

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <p v-if="flag">
                今天天气很舒服！
            </p>
            <p v-else-if="rich">
                今天天气很燥热！晚上要去放松一下！
            </p>
            <p v-else="rich">
                晚上只能自嗨！
            </p>
        </div>
        
    </body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                flag:false,
                rich:false
            },
            methods:{    
            }
        });
    </script>
</html>
从这个例子可以看出，vue对象中的data提供了分支的条件。根据条件，如果是true，则v-if的内容就会显示，反之不显示。

5.2 v-show

v-if和v-show之间有着看似相同的效果，但优化上却有区别。先看下面这个例子：
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        
            <p v-show="rich">
                有钱！
            </p>
            <p v-if="rich">
                有钱！
            </p>
            <button type="button" @click="rich=!rich">今晚彩票开奖</button>
        </div>
        
    </body>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        
        new Vue({
            
            el:'#app',
            data:{
                flag:false,
                rich:false
            },
            methods:{
                
            }
        });
        
        
    </script>
</html>
通过点击“今晚彩票开奖”按钮，能切换rich的值，此时发现，v-if和v-show的显示状态都会来回切换。看起来是一样的，但通过查看控制台代码发现，v-show实际会将p标签的css样式的display属性设为none来达到隐藏的效果。

VUE学习笔记（二）

而v-if是直接在页面上添加和删除p标签来达到效果，因此v-show在反复切换的应用场景下，效率比v-if更高。

六、Vue的循环 v-for

Vue中的循环关键字并没有Java的那么多，只有v-for，但用法上有多种。接下来我们来逐一介绍。

6.1 普通的for循环

我们需要定义数据源，然后通过v-for来遍历数据源，再使用差值表达式输出数据。
<body>

<div id="app">
    <ul>
        <li v-for="a in args">{{a}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>
在这个例子中，数据源提供了一个数组。视图层通过v-for来循环输出多个li标签，非常简单。

6.2 带着索引的for

<body>

<div id="app">
    <ul>
        <li v-for=" (a,i)  in  args" :key='i'>{{i}}{{a}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            args:[1,2,3,4,5,6]
        }
    });
</script>
此时的i就是每次循环的循环变量 ，从0开始一直到元素个数-1

6.3 遍历一个对象中的信息： v、k、i

<body>

<div id="app">
    <ul>
        <li v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
                student:{
                username:'小鱼',
                age:20,
                girl:'如花'
            }
        }
    });

</script>

v、k、i 这几个字符可以自己定义，分别表示每次循环内容的值、键、序号。

  • v: 循环中每条数据的值 小鱼、20、如花
  • k: 循环中每天数据的键 username、age、girl
  • i: 循环的序号，从0开始
页面效果如下：
VUE学习笔记（二）

6.4 遍历一个对象数组：嵌套的for循环

<body>

<div id="app">
    <ul>
        <li v-for=" student in students">
            <span v-for="(v,k,i) in student">{{i+1}}--{{k}}--{{v}}</span>
        </li>
    </ul>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
                students:[
                {
                    name:'xiaoming',
                    age:20
                },
                {
                    name:'xiaowang',
                    age:21
                }
            ]
        }
    });
</script>
可以清楚的看到，此时数据源是一个student数组，通过两层v-for循环，外层遍历数组中的每个student对象，内层v-for遍历每个对象的v、k、i。

页面效果如下：

VUE学习笔记（二）

七、Vue的属性绑定

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

7.1 v-model

通过v-model将标签的value值与vue对象中的data属性值进行绑定。
<html>
    <head>
        <meta charset="utf-8" />
        <title></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 type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                title:"hello vue"
            }    
        })
    </script>
</html>
此时input标签中加入了“v-model='title'”，表示input的value值与vue对象中的title属性绑定，当在input输入框中输入内容会实时修改title的值。于是{{title}}插值表达式能实时输出input输入框内的值。
页面效果如下：
VUE学习笔记（二）

7.2 v-bind

我们知道插值表达式是不能写在html的标签的属性内的，那如果一定要用vue中的属性作为html标签的属性的内容，就可以通过v-bind进行属性绑定。
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <a v-bind:href="link"></a>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                link:'http://www.baidu.com'
            }
        })
    </script>
</html>
这样，a标签内的href属性就可以使用vue对象中的属性值。

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

<a v-bind:href='link'></a>  ==>  <a :href='link'>

八、Vue的事件绑定

关于事件，要把握好三个步骤：设参、传参和接参。
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            sum={{sum}}<br/>
            {{sum>10?'总数大于10':'总数不大于10'}}<br/>
            <button type="button" @click="increase(2)">增加</button>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                sum:0
            },
            methods:{
                increase:function(s){
                    this.sum+=s
                }
            }
        })
    </script>
</html>

从这里例子中：

  • 设参：
<button type="button" @click="increase(2)">增加</button>
  • 传参：
increase:function(s)
  • 接参：
this.sum+=s
接下来我们来看一下VUE中如何进行事件绑定。

8.1 v-on

通过配合具体的事件名，来绑定vue中定义的函数
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <input type="text" v-on:click="changeMajor"  />
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                major:'java'
            },
            methods:{
                sayHi:function(){
                    alert("HELLO VUE!");
                },
                changeMajor:function(){
                    console.log("change Title")
                }
            }
    </script>
</html>
此时，该按钮，在点击时将会调用Vue对象中定义的changeMajor方法。

注意： v-on也可以简写，使用"@"替代。

<input type="text" @click="changeMajor"  />

8.2 事件修饰符

可以使用Vue中定义好的事件修饰符，快速达到效果。查看以下例子：
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <p @mousemove="mm">
                x:{{x}}
                y:{{y}}
                <span @mousemove.stop>鼠标移动到此即停止</span>
            </p>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script type="text/javascript">
        new Vue({
            el:'#app',
            data:{
                x:0,
                y:0
            },
            methods:{
                mm:function(event){
                    this.x = event.clientX;
                    this.y = event.clientY;
                },
                stopm:function(event){
                    event.stopPropagation();
                }    
            }
        })
    </script>
</html>
当鼠标经过P标签区域内时，区域内就会显示X和Y轴的坐标，如果经过P标签内的Span标签内时，此时会调用事件属性mousemove.stop预定的效果，鼠标移动的效果将会被取消，X和Y不再显示信息。

8.3计算属性：computed

8.3.1 什么是计算属性
计算属性的重点突出在 属性 两个字上（属性是名词），首先它是个 属性 其次这个属性有 计算 的能力（计算是动词），这里的 计算 就是个函数；简单点说，它就是一个能够将计算结果缓存起来的属性（将行为转化成了静态的属性），仅此而已；
8.3.2 计算属性与方法的区别
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>布局篇 计算属性</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
</head>
<body>

<div id="vue">
    <p>调用当前时间的方法：{{currentTime1()}}</p>
    <p>当前时间的计算属性：{{currentTime2}}</p>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#vue',
        data: {
            message: 'Hello Vue'
        },
        methods: {
            currentTime1: function () {
                return Date.now();
            }
        },
        computed: {
            currentTime2: function () {
                this.message;
                return Date.now();
            }
        }
    });
</script>
</body>
</html>

[说明]

  • methods：定义方法，调用方法使用 currentTime1()，需要带括号
  • computed：定义计算属性，调用属性使用 currentTime2，不需要带括号；this.message 是为了能够让 currentTime2 观察到数据变化而变化

注意：methods 和 computed 里不能重名

8.3.3 测试效果

仔细看图中说明，观察其中的差异

VUE学习笔记（二）

8.3.4 结论
调用方法时，每次都需要进行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢？此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这一点；计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
上一篇：介绍一款开源的类Excel电子表格软件


下一篇：阿里开源分布式限流框架 -Sentinel Go 0.3.0 发布，支持熔断降级能力