vue学习大纲2-生命周期，计算属性

实战：留言板

生命周期

• 钩子函数
• vue1.0 生命周期

var vm=new Vue({
    //el:'#app',//如果没有el元素，是无法进行编译的
    data:{
        msg:'ymy'
    },
    init(){
        alert('初始化')
    },
    created(){
        alert('初始化完成')
    },
    beforeCompile(){
        alert('编译前')
    },
    compiled(){
        alert('编译后')
    },
    ready(){//页面首次加载，获取数据；在ready方法中获取数据
        alert('准备好了')
    },
    beforeDestroy(){
        alert('销毁前')
    },
    destroyed(){
        alert('销毁后')
    }
});
vm.$mount('#app');//手动挂载绑定范围；效果和在对象中写 el:'#app'一样；
vm.$destroy();//强制让实例销毁；但是编译好的数据不会销毁；
console.log(vm);//查看是否销毁

• vue2.0 生命周期

生命周期图地址

var vm=new Vue({
    data:{
        msg:'ymy'
    },
    methods:{
        update(){
            this.msg="哈哈哈哈哈"
            alert('修改了')
        }
    },
    beforeCreate(){
        alert('创建前')
    },
    created(){
        alert('创建后')
    },
    beforeMount(){
        alert('挂载前')
    },
    mounted(){
        alert('挂载后')
    },
    beforeUpdate(){
        alert('更新前')
    },
    updated(){
        alert('更新后')
    },
    beforeDestroy(){
        alert('销毁前')
    },
    destroy(){
        alert('销毁后')
    }
});
vm.$mount('#app');
//vm.$destroy();//强制手动销毁

防止闪烁的指令 v-cloak

• v-cloak：当数据加载后，会将此指令移除掉

//样式中先隐藏，等数据加载后，再干掉v-cloak
<style>
    [v-cloak]{
        display: none;
    }
</style>

计算属性

• 获取值

//html
<div id="app">
    {{total}}
</div>

//js
var vm=new Vue({
    el:'#app',
    data:{
        price:20,
        count:10
    },//计算属性：
    computed:{
        //计算属性的获取值：它虽然是个函数，但使用的时候，跟变量一样；
        total(){
            return this.price*this.count
        }
    }
})

• 计算属性的设置

//HTML
<div id="app">
    {{total}}
    {{count}}
</div>
//JS
var vm=new Vue({
    el:'#app',
    data:{
        price:20,
        count:10
    },//计算属性：
    computed:{
        //计算属性的获取值：它虽然是个函数，但使用的时候，跟变量一样；
        total:{
            get(){
                return this.price*this.count
            },
            set(total){
                //设置total影响了我们的count属性
                this.count=total/this.price
            }
        }
    }
})
vm.total=300//手动设置total的值；

实例上的常用属性

• vm.$el 获取当前元素；

vm.$el.style.background='red';

• vm.$data 获取当前实例上挂载的数据
• vm.$options.a 自定义属性的获取

var vm=new Vue({
    el:'#app',
    a:1
})

• vm.$watch 监控某个值的变化

//html中： {{total}}
//JS中
var vm=new Vue({
    computed:{
        //计算属性的获取值：它虽然是个函数，但使用的时候，跟变量一样；
        total:{
            get(){
                return this.price*this.count
            },
            set(total){
                //设置total影响了我们的count属性
                this.count=total/this.price
            }
        }
    }
})
vm.$watch('total',function(newVal,oldVal){
    //newVal:新值
    //oldVal:旧值
});
vm.total=300;