Vue.js知识总结（二）

一、实例

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

let app = new Vue({
    el:"#app"
})

二、数据与方法

let app = new Vue({
    el:"#app",
    data:{
        title:"ok",
        message:"你好"
    }
})

三、计算属性与侦听器

let app = new Vue({
    el:"#app",
    data:{
        num1:"",
        num2:"",
        sum:"",
        message:"你好通知"
    },
    computed:{
        reverseMessage:function() {
            return this.message.split("").reverse().join("");
        }
    },
    methods:{
        sumFn:function() {
            this.sum = Number(this.num1) + Number(this.num2);
        } 
    },
    watch:{
        message:function(val) {
            console.log("属性message发生了变化" + val)
        }
    }
})

1、computed：初衷用于模板内的简单运算，如果涉及到数据的运算就写进这里；

2、methods：放置一些函数方法，多用于事件方法；

3、watch：监听data中某个属性的变化；

四、生命周期：钩子函数（特定条件触发的函数）

1、beforeCreate  在实例初始化之前；

2、created 实例创建完成后调用，注意此时挂载未开始；

3、beforeMount 挂载开始前调用；

4、mounted  挂载完毕后调用；

5、beforeUpdate  数据更新时调用，在数据渲染前；

6、updated 更新完毕；

7、activated  keep-alive组件激活时调用；

8、deactivated  keep-alive组件停用时调用；

9、beforeDestroy  实例销毁前调用；

10、destroed  实例销毁后调用；