3-生命周期、模版、计算属性、方法、侦听器

最新推荐文章于 2024-07-16 17:56:11 发布

valueyear

最新推荐文章于 2024-07-16 17:56:11 发布

阅读量288

点赞数

分类专栏： Vue 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/qq_43714814/article/details/121755568

版权

Vue 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

(一)、生命周期

Init Events & Lifecycle初始化事件和生命周期相关的内容

生命周期钩子函数：Vue实例在某一个时间点会自动执行的函数

Init injections & reactivity 初始化外部注入和双向绑定

mount挂载

<body>
    <div id="root"><p>123</p>44</div>

    <script type="text/javascript">
        var root = document.querySelector('#root');
        console.log(root.outerHTML);
    </script>
</body>

outerHTML会打印出：

<div id="root"><p>123</p>44</div>

<body>
    <div id="root"><p>123</p>44</div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                content: '法国 VS 克罗地亚'
            },
            template: '<div>{{ content }}</div>',
            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");
            },
            beforeDestory: function(){
                console.log("beforeDestory");
            },
            destoryed: function(){
                console.log("destoryed");
            },
            beforeUpdate: function(){
                console.log("beforeUpdate");
            },
            updated: function(){
                console.log("updated");
            }

        })
    </script>
  
</body>

在控制台输入

vm.$data.content = ‘123’; 会修改view的内容

vm.$destory(); 销毁vue实例

vm…$data.content = ‘456’; 页面的内容不会跟着更改，双向绑定被消除了

(二)、模版语法

(1)、v-once

<body>
    <div id="root">
        <span v-once>{{content}}</span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                content: '法国 VS 克罗地亚'
            }

        })
    </script>
</body>

(2)、v-html、v-text

<body>
    <div id="root">
        <p>插值表达式：{{rawHtml}}</p>
        <p>使用v-html指令：<span v-html="rawHtml"></span></p>
        <p>使用v-text指令：<span v-text="rawHtml"></span></p>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                rawHtml: '<span style="color: red">现在我是一个红色的span了</span>'
            }

        })
    </script>
</body>

插值表达式里的内容实际上是一段JS表达式

<p>插值表达式：{{rawHtml + '--鲁迅'}}</p>

插值表达式里可以写JS表达式

<body>
    <div id="root">
        <p>插值表达式：{{rawHtml + '--鲁迅'}}</p>
        <p>使用v-html指令：<span v-html="rawHtml"></span></p>
        <p>使用v-text指令：<span v-text="rawHtml"></span></p>
        <span>{{ flag ? 'The weather is good' : 'The weather is NOT good'}}</span>
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
                rawHtml: '<span style="color: red">现在我是一个红色的span了</span>',
                flag: false
            }

        })
    </script>
</body>

动态传值可以用JS表达式

<body>
    <div id="root">
        <child :content="'你吃饭了吗?' + name"></child>
    </div>

    <script type="text/javascript">
        Vue.component('child',{
            props: ['content'],
            template: '<span>{{content}}</span>'
        })
        var vm = new Vue({
            el: '#root',
            data: {
               name: '张三'
            }
        })
    </script>
</body>

(三)、计算属性

假如在模版里面写太多的表达式或者写太多的JS逻辑的话就显得比较笨重。

页面被重新渲染，方法就会被执行一次。

只有在计算属性相关联的数据发生改变的时候，计算属性才会被计算一次。

<body>
    <div id="root">
        我是一条经过精密计算前的数据：{{message}} -- {{author}}
        <br />
        我是一条经过精密计算后的数据：{{reversedMessage}}
        <!-- 我是一条经过精密计算后的数据：{{reversedMessage()}} -->
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
               message: '大家好, 我是小猪佩奇',
               author: '鲁迅先生'
            },
            // methods:{
            //     reversedMessage: function(){
            //         console.log('调用并执行了一次');
            //         return this.message.split('').reverse('').join('')
            //     }
            // },

            computed:{
                reversedMessage: function(){
                    console.log('计算了一次');
                    return this.message.split('').reverse('').join('')
                }
            }
        })
    </script>
</body>

计算属性有getter属性和setter属性

<body>
    <div id="root">
        {{fullName}} {{age}}
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
              firstName: '张',
              lastName: '三',
              age: 28
            },
            computed: {
                fullName:{
                    get: function(){
                        return this.firstName + this.lastName;
                    },
                    set: function(value){
                        var arr = value.split("");
                        this.firstName = arr[0];
                        this.lastName = arr[1];
                    }
                }
            }
        })
    </script>
</body>

(四)、侦听属性

侦听属性与计算属性一样都有缓存，只有改变相关内容才会被执行一次

<body>
    <div id="root">
        {{fullName}} {{age}}
    </div>

    <script type="text/javascript">
        var vm = new Vue({
            el: '#root',
            data: {
              firstName: '张',
              lastName: '三',
              fullName: '张三',
              age: 28
            },
            watch:{
                firstName: function(){
                    console.log("计算了一次");
                    this.fullName = this.firstName + this.lastName;
                },
                lastName: function(){
                    console.log("计算了一次");
                    this.fullName = this.firstName + this.lastName;
                }
            }
        })
    </script>
</body>
</html>