VUE学习之-------created mounted

vue实例中的钩子函数 created  mounted  涉及到了vue实例生命周期的概念，感觉类似于C++中的构造函数和析构函数。不错的设计。记得Linux中的网络协议栈netfilter模块中也有很多钩子函数。。。。

 

<div id="simple">
    <template>
        <div id="simple1">show after mounted</div>
    </template>
</div>

var simpleID = new Vue({
    el:"#simple",
    data:{
        createdData : "liubbc"
    },
    created:function () {
        console.log("created hook: data is: " + this.createdData);
        console.log("mounted hook: div text is: " + document.getElementById("simple1").innerText); //before compile template
    },
    mounted:function () {
        console.log("mounted hook: data is: " + this.createdData);
        console.log("mounted hook: div text is: " + document.getElementById("simple1").innerText);//after compile template
    }
});

vue官网上有关于生命周期的图。从上面例子可以看到：

created hook function 是在编译模板前调用，还没有渲染为dom节点，所以不可以操作dom节点

mounted hook function 是在编译模板后调用，已经渲染为dom节点，所以可以操作dom节点