我的Vue.js的学习之旅记录(3)

最新推荐文章于 2025-09-08 13:18:17 发布

原创最新推荐文章于 2025-09-08 13:18:17 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端同时被 3 个专栏收录

12 篇文章

订阅专栏

学习

10 篇文章

订阅专栏

vue.js

5 篇文章

订阅专栏

本文详细介绍了Vue.js中的生命周期函数及其执行顺序，并探讨了计算属性的使用方式，包括getter和setter的应用，以及如何利用Vue的特性实现样式绑定。

看了文档听课会好些····

v-xx = js的表达式

生命周期函数

<div id="app"></div> //挂载点
        <script>
        //生命周期函数就是Vue实例在某一个时间点会自动执行的函数
        //生命钩子，渲染渲染！！！
            var vm = new Vue({
                el: '#app',         //没有template的时候将这个用作模板
                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("mouted");
                    },
                    beforeDestroy:function(){
                        console.log("beforeDestroy");
                    },
                    destroyed:function(){
                        console.log("destroy");
                    },
                    beforeUpdate:function(){
                        console.log("beforeUpdate");
                    },
                    updated:function(){
                        console.log("updated");
                    }

            })
        </script>

计算属性，方法，侦听器

<!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 vm = new Vue({
                el:'#app',
                data:{
                    firstName:"Dell",
                    lastName:"Lee",
                    fullName:"Dell Lee",
                    age : 27
                },
                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("does once")
//                      return  this.firstName + " " + this.lastName;
//                  }
//              }     //无缓存机制

                //计算属性
//              computed:{
//                  fullName:function(){
//                      console.log("does once")
//                  return  this.firstName + " " + this.lastName
//                  } //内置缓存机制

            })
        </script>
</html>

计算属性的setter,getter

<body>
        <div id="app">{{fullName}}</div>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                firstName:"dell",
                lastName:"Lee"
            },
            computed:{    //computed依赖的值发生变化才会重新计算一次，
                            //有get,set方法，set会接受返回一个值value
                fullName: {
                        get: function(){
                    return this.firstName + " " + this.lastName; 
                    },
                        set: function(value){
                            console.log(value);
                            var arr = value.split(" ");
                            this.firstName = arr[0];
                            this.lastName = arr[1];

                    }
                }
            }
        })
        </script>
    </body>

Vue中的样式绑定

绑定样式的几种方法：
1、v-bind:class和对象（通过true或false）
2、v-bind:class和数组（可设置多个值,数组内的每一项都是对象）
3、v-bind:style=”一个对象”
4、v-bind:style=”数组”(数组内的每一项都是对象）
即：
1、class绑定对象
2、class绑定数组
3、style绑定对象
4、style绑定数组

:class="xxx"   xxx是JS表达式。
样式绑定：
1、:class="{className: boolean}",class的对象绑定；
2、:class="[varibleName,varibleName2]",class的数组绑定；
3、:style="{styleName: value}",style的对象绑定，和写css没区别；
4、:style="[{styleName: value},{styleName2: value}]"，style的数组绑定

   <style>
            .activated{
                color:red;
            }
   </style>

方法1.class绑定对象

<body>
        <div id = "app">
            <div @click="handleDivClick"
                :class="{activated: isActivated}"
                >Hello world</div>   <!--class的名字activated，执行取决于isActivated-->
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    isActivated: false
                },
                methods: {
                    handleDivClick:function(){
                        this.isActivated = !this.isActivated ;
                    }
                }
            })
        </script>
    </body>

方法2.class数组绑定

<body>
        <div id = "app">
            <div @click="handleDivClick"
                :class="[activated]"
                >Hello world</div>   
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    activated: ""
                },
                methods: {
                    handleDivClick:function(){
                        this.activated = this.activated === "activated"?"":"activated";
                    }
                }
            })
        </script>
    </body>

3.style的数组和对象绑定

<body>
        <div id = "app">
            <div :style="styleObj" @click = "handleDivClick">hello world</div>
        <!--    <div :style="[styleObj,{fontSize:'20px'}]" @click = "handleDivClick">hello world</div> -->
        </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    styleObj:{
                        color:'black'
                    }
                },
                methods: {
                    handleDivClick: function(){
                        this.styleObj.color = this.styleObj.color ==="black"?"red":"black";
                    }
                }
            })
        </script>
    </body>

Vue的条件渲染

1、v-if中表达式的值决定了dom节点是否存在于页面中，
2、v-show中表达式的值为false时，dom依然在页面中，只是设置了display:none；v-if为false时，dom直接被移除，所以从性能上讲，v-show比v-if高一些；
3、v-if、v-else-if、v-else必须前后紧贴使用；
4、vue在数据更新的时候，会尝试复用已经存在的dom，使用key属性来设置dom的唯一性，这样可以避免复用了。

<body>
    <!--    
            <div id ="app">

            <div v-if="show==='a'">This is A</div>
            <div v-else-if="show==='b'">This is B</div>  // v-if和v-else 必须紧贴使用  
      //    <div v-show="show" data-test="v-show">{{message}}</div> //这个情况下show的性能更高
            <div v-else>Other</div> 

    </div>
     -->

    <div id ="app">

            <div v-if="show">用户名:<input key = "username"/></div>
            <div v-else>e-mail:<input key = "emailname"/></div>  <!--key 唯一的元素 复用嘛 所以这么用--> 
    </div>
        <script>
            var vm = new Vue({
                el:'#app',
                data:{
                    show:false
                }
            })
        </script>
    </body>