Vue2.6学习整理(二)

Vue实例的生命周期钩子

lifecycle.png
图片源于官网，侵，删
Vue生命周期钩子详解见官网

重写方式：

<div id="app">
       
    </div>

    <script>
        new Vue({
            el:"#app",
            beforeCreate:function () {
                console.log("beforeCreate")
            }
        })
    </script>

直接在Vue对象中创建函数即可。
感想：
本人是后台出身，之前没有或很少接触过前端的代码，在写Vue代码的时候，越写越感觉跟面向对象编程类似。Vue提供的生命周期函数，我们可以类比C++中的构造函数，析构函数。比较相似。

Vue 样式绑定

需求：点击页面中的文字，点击一次，文字颜色变红，再次点击，文字颜色恢复成原来的颜色。

• 方式1，class对象绑定

1. 实现：

    <style>
        .activated{
            color: red;
        }
    </style>
    <div id="app">
        <div @click="handleDivClick"
             :class="{activated: isActivated}">Hello Vue</div>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                isActivated:false
            },
            methods:{
                handleDivClick:function () {
                    this.isActivated=!this.isActivated
                }
            }
        })
    </script>

2. 解释：
   :class是Vue的一个指令，代表样式。该例子中使用的样式是activated,isActivated是一个boolean类型的变量，为true时，样式才生效。

• 方式2

1. 实现：
   通过直接改变class属性的值控制样式。

    <div id="app">
        <div @click="handleClick"
             :class="[activated]">
            Hello Vue
        </div>
    </div>

    <script>
        new Vue({
            el:"#app",
            data:{
                activated:""
            },
            methods:{
                handleClick:function () {
                    this.activated = this.activated === "activated"?
                        "":
                        "activated"
                }
            }
        })
    </script>

image.png