VUE学习笔记（二）-阿里云开发者社区

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来达到隐藏的效果。

而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开始

页面效果如下：

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提供了多个关键字，能快速的将数据对象中的值绑定在视图层中。

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输入框内的值。

页面效果如下：

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 测试效果

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

8.3.4 结论

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

VUE学习笔记（二）

VUE学习笔记（一）

四、Vue对象总结

五、Vue的分支 v-if

5.1 v-if

5.2 v-show

六、Vue的循环 v-for

6.1 普通的for循环

6.2 带着索引的for

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

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

七、Vue的属性绑定

7.1 v-model

7.2 v-bind

八、Vue的事件绑定

8.1 v-on

8.2 事件修饰符

8.3计算属性：computed

8.3.1 什么是计算属性

8.3.2 计算属性与方法的区别

8.3.3 测试效果

8.3.4 结论

云服务技术课堂

热门文章

最新文章

相关课程

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

VUE学习笔记（二）

VUE学习笔记（一）

四、Vue对象总结

五、Vue的分支 v-if

5.1 v-if

5.2 v-show

六、Vue的循环 v-for

6.1 普通的for循环

6.2 带着索引的for

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

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

七、Vue的属性绑定

7.1 v-model

7.2 v-bind

八、Vue的事件绑定

8.1 v-on

8.2 事件修饰符

8.3计算属性：computed

8.3.1 什么是计算属性

8.3.2 计算属性与方法的区别

8.3.3 测试效果

8.3.4 结论

云服务技术课堂

热门文章

最新文章

相关课程

相关电子书