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

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 发布,支持熔断降级能力