Vue2.6学习整理(二)

Vue实例的生命周期钩子

lifecycle.png

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

重写方式：

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

Vue 样式绑定

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

• 方式1，class对象绑定

1. 实现：

    
    

        
Hello Vue
    

    

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

• 方式2

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

    

        

            Hello Vue
        
    

    

image.png