created
即通常初始化某些属性值，而后再渲染成视图
mounted
在模板渲染成html后调用，通常是初始化页面实现后，再对html的dom节点进行一些操作。
<body>
<div id="example1">
<demo1></demo1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
Vue.component("demo1",{
data:function(){
return {
name:"",
age:"",
city:""
}
},
template:"<ul><li id='name'>{{name}}</li><li>{{age}}</li><li>{{city}}</li></ul>",
created:function(){
this.name="Eric"
this.age = "20"
this.city ="广州"
var x = document.getElementById("name") // ①第一个命令台谬误
console.log(x.innerHTML);
},
mounted:function(){
var x = document.getElementById("name") // ②第二个命令台正确
console.log(x.innerHTML);
}
});
var vm = new Vue({
el:"#example1",
})
</script>
</body>
① 在created的时候，视图中的html还没有被渲染进去，所以此时如果间接去操作html的dom节点，肯定找不到相干的元素。
② 而在mounted中，因为此时html曾经渲染进去了，所以能够间接操作dom节点，故输入了后果。
发表回复