vue基础知识精讲

一、Vue实例生命周期函数

生命周期函数是vue实例在某一个时间点会自动执行的函数。

image

测试一下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue实例生命周期函数</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app"></div>
    
        <script>
            //生命周期函数是vue实例在某一个时间点会自动执行的函数
            var vm = new Vue({
                el:"#app",
                template:"<div>{{test}}</div>",
                data:{
                    test: "Hello World!"
                },
                beforeCreate: function(){
                    console.log("beforeCreate");
                },
                created: function(){
                    console.log("created");
                },
                beforeMount:function(){
                    console.log(this.$el);
                    console.log("beforeMount");
                },
                mounted:function(){
                    console.log(this.$el);
                    console.log("mounted");
                },
                //组件销毁时，函数执行
                beforeDestroy:function(){
                    console.log("beforeDestroy");
                },
                //组件销毁完成之后，函数执行
                destroyed:function(){
                    console.log("destroyed");
                },
                //数据开始改变，还没渲染之前，函数执行
                beforeUpdate:function(){
                    console.log("beforeUpdate");
                },
                //数据渲染之后，函数执行
                updated:function(){
                    console.log("updated");
                }
            })
        </script>
    </body>
</html>

二、Vue的模板语法

2.1 差值表达式

{{}} 两个花括号

举个栗子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模板语法</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">{{test}}</div>
        <script>
            
            var app = new Vue({
                el:"#app",
                data:{
                    test:"你好啊！"
                }
            })
        </script>
    </body>
</html>

这里的{{test}}就是差值表达式。

2.2 v-text

类似差值表达式，将vue传来的数据替换已有的数据。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模板语法</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div v-text="test"></div>
        </div>
        <script>
            
            var app = new Vue({
                el:"#app",
                data:{
                    test:"你好啊！"
                }
            })
        </script>
    </body>
</html>

和差值表达式效果一样。

2.3 v-html

转义输出vue传来的数据。

举个栗子：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模板语法</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div>{{test}}</div>
            <div v-text="test"></div>
            <div v-html="test"></div>
        </div>
        <script>
            
            var app = new Vue({
                el:"#app",
                data:{
                    test:"<h1>你好啊！</h1>"
                }
            })
        </script>
    </body>
</html>

看一下效果：

image.png

2.4 小结

差值表达式、v-text、v-html三种方式不仅仅可以接受变量，还可以写js语法。

eg：

<div>{{test + '世界'}}</div>
<div v-text="test + '世界'"></div>
<div v-html="test + '世界'"></div>

三、计算属性,方法与侦听器

3.1 计算属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算属性、方法、侦听器</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{fullName}}
            {{age}}
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    firstName:"小",
                    lastName:"默",
                    age:"23" 
                },
                //计算属性
                computed:{
                    fullName:function(){
                        console.log("计算了一次");
                        return this.firstName + " " + this.lastName
                    }
                }
            })
        </script>
    </body>
</html>

计算属性具有缓存性，在此例中，若firstName和lastName的值没有发生改变，则fullName只计算一次。若发生改变则会再次计算。可在控制台依次调试验证。

3.2 方法

<div id="app">
            {{fullName()}}
            {{age}}
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    firstName:"小",
                    lastName:"默",
                    age:"23" 
                },
                //使用方法
                methods:{
                    fullName: function() {
                        console.log("计算了一次");
                        return this.firstName + " " + this.lastName;
                    }
                }
                //计算属性
                // computed:{
                //  fullName:function(){
                //      console.log("计算了一次");
                //      return this.firstName + " " + this.lastName
                //  }
                // }
            })
        </script>

使用方法时，效率没有计算属性高，因为无论值有没有改变，都会再次调用fullName方法，再次计算。

3.3 侦听器

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>计算属性、方法、侦听器</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            {{fullName}}
            {{age}}
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    firstName:"小",
                    lastName:"默",
                    fullName:"小 默",
                    age:"23" 
                },
                //侦听
                watch:{
                    firstName:function() {
                        console.log("计算了一次");
                        this.fullName = this.firstName + " " + this.lastName;
                    },
                    lastName:function() {
                        console.log("计算了一次");
                        this.fullName = this.firstName + " " + this.lastName;
                    }
                }
                //使用方法
                // methods:{
                //  fullName: function() {
                //      console.log("计算了一次");
                //      return this.firstName + " " + this.lastName;
                //  }
                // }
                //计算属性
                // computed:{
                //  fullName:function(){
                //      console.log("计算了一次");
                //      return this.firstName + " " + this.lastName
                //  }
                // }
            })
        </script>
    </body>
</html>

在此例中：当age改变时，缓存值不变，不会进入计算。当firstName改变时，会再次计算。

3.4 小结

由上面三个例子可以看出，computed（计算属性）和watch（侦听器）同样具有缓存机制，但是computed写法比较简便，而methods（方法）不具有缓存机制。

若需求可以同时用computed、watch、methods三种方式实现，优先级computed > watch > methods。

四、计算属性的 getter 和 setter

<div id="app">
            {{fullName}}
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    firstName: "小",
                    lastName: "默"
                },
                computed:{
                    fullName:{
                        get:function(){
                            return this.firstName + " " + this.lastName;
                        },
                        set:function(value){
                            var arr = value.split(" ");
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                            console.log(value);
                        }
                    }
                }
            })
        </script>

在此例中：

computed中，不仅可以使用get获取值，也可以使用set设置值改变相关联的值，引起fullName重新计算。

五、Vue中的样式绑定

需求：通过点击文字，让文字改变颜色。

5.1 class的对象绑定

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的样式绑定</title>
        <script src="../vue.js"></script>
        <style type="text/css">
            .activated {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div @click="handleDivClick"
                 :class="{activated: isActivated}">
                Hello World
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el: "#app",
                data:{
                    isActivated: false
                },
                methods:{
                    handleDivClick: function() {
                        this.isActivated = !this.isActivated;
                    }
                }
            })
        </script>
    </body>
</html>

5.2 数组

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的样式绑定</title>
        <script src="../vue.js"></script>
        <style type="text/css">
            .activated {
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!-- <div @click="handleDivClick"
                 :class="{activated: isActivated}">
                Hello World
            </div> -->
            <div @click="handleDivClick"
                 :class="[activated]">
                Hello World
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el: "#app",
                data:{
                    // isActivated: false
                    activated: ""
                },
                methods:{
                    handleDivClick: function() {
                        // this.isActivated = !this.isActivated;
                        // if(this.activated === "activated"){
                        //  this.activated = "";
                        // }else{
                        //  this.activated = "activated";
                        // }
                        this.activated = this.activated === "activated" ? "" : "activated";
                    }
                }
            })
        </script>
    </body>
</html>

通过改变activate的值，引用style。

5.3 style

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue中的样式绑定</title>
        <script src="../vue.js"></script>
        <!-- <style type="text/css">
            .activated {
                color: red;
            }
        </style> -->
    </head>
    <body>
        <div id="app">
            <!-- <div @click="handleDivClick"
                 :class="{activated: isActivated}">
                Hello World
            </div> -->
            <!-- <div @click="handleDivClick"
                 :class="[activated]">
                Hello World
            </div> -->
            <div :style="styleObj" @click="handleDivClick">
                Hello World
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el: "#app",
                data:{
                    // isActivated: false
                    // activated: ""
                    styleObj:{
                        color:"black"
                    }
                },
                methods:{
                    handleDivClick: function() {
                        this.styleObj.color = this.styleObj.color === "black" ? "red" : "black";
                    }
                    // handleDivClick: function() {
                    //  // this.isActivated = !this.isActivated;
                    //  // if(this.activated === "activated"){
                    //  //  this.activated = "";
                    //  // }else{
                    //  //  this.activated = "activated";
                    //  // }
                    //  this.activated = this.activated === "activated" ? "" : "activated";
                    // }
                }
            })
        </script>
    </body>
</html>

5.4 小结

无论是用class或者是style，都可以通过对象和数组的方式，为class或者style赋值，从而达到绑定样式的效果。

六、Vue中的条件渲染

6.1 v-if

使v-if默认为false，页面不会被渲染

<div id="app">
            <div v-if="show">
                {{message}}
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    show: false,
                    message: "Hello Xiaomo"
                }
            })
        </script>

运行，此时页面没有被渲染：

image.png

调出控制台，改变v-if（show）的默认值，发现页面被渲染了：

image.png

这就是vue中的条件渲染。

6.2 v-show

v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

6.3 v-else-if 与 v-else

<div id="app">
            <div v-if="show === 'a'">This is A</div>
            <!-- <div v-show="show" data-test="v-show">{{message}}</div> -->
            <div v-else-if="show === 'b'">This is B</div>
            <div v-else>This is others</div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    show:"a"
                }
            })
        </script>

v-if 与 v-else-if 与 v-else 需要连在一起写。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

七、Vue中的列表渲染

需求：将一个数组中的值，渲染到页面。

7.1 v-for

<div id="app">
            <div v-for="item in list">
                {{item}}
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    list:[
                        "hello",
                        "xiaomo",
                        "nice",
                        "to",
                        "meet",
                        "you"
                    ]
                }
            })
        </script>

使用v-for是最基础的循环。

7.2 唯一标识

<div id="app">
            <div v-for="(item, index) in list"
                 :key="item.id">
                {{item.text}} -- {{index}}
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    list:[{
                        id:"1",
                        text:"Hello"
                    },{
                        id:"2",
                        text:"xiao"
                    },{
                        id:"3",
                        text:"mo"
                    },
                    ]
                }
            })
        </script>

运行结果：

image.png

7.3 操作数组的七个方法

push -- 在数组的尾部添加一个或者多个元素，并返回数组的新长度

pop -- 删除数组的最后一个元素，并返回它的删除值。

sort -- 返回排序后的数组

splice -- 用来删除或插入元素，会修改原数组

unshift -- 可向数组的开头添加一个或更多元素，并返回新的长度

shift -- 把数组的第一个元素从其中删除，并返回第一个元素的值

reverse -- 返回逆序数组

7.4 对象循环

<div id="app">
            <div v-for="(item, key, index) of userInfo">
                {{item}} -- {{key}} -- {{index}}
            </div>
        </div>
        
        <script>
            var app = new Vue({
                el:"#app",
                data:{
                    userInfo:{
                        name:"xiaomo",
                        age:23,
                        gender:"male"
                    }
                }
            })
        </script>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,277评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,689评论 3赞 393
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,624评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,356评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,402评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,292评论 1赞 301
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,135评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,992评论 0赞 275
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,429评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,636评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,785评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,492评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,092评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,723评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,858评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,891评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,713评论 2赞 354

vue基础知识精讲

一、Vue实例生命周期函数

二、Vue的模板语法

2.1 差值表达式

2.2 v-text

2.3 v-html

2.4 小结

三、计算属性,方法与侦听器

3.1 计算属性

3.2 方法

3.3 侦听器

3.4 小结

四、计算属性的 getter 和 setter

五、Vue中的样式绑定

5.1 class的对象绑定

5.2 数组

5.3 style

5.4 小结

六、Vue中的条件渲染

6.1 v-if

6.2 v-show

6.3 v-else-if 与 v-else

七、Vue中的列表渲染

7.1 v-for

7.2 唯一标识

7.3 操作数组的七个方法

7.4 对象循环

推荐阅读更多精彩内容