1、绑定容器,el与$mount的异同
<body>
<div id="root">
<h1>你好,{{name}}</h1>
</div>
</body>
<script>
const vm = new Vue({
//el:'#root', //第一中写法,new的时候直接写好el
data:{
name:"张三",
},
})
vm.$mount('#root') //第二张写法,回头再指定哪个root容器,mount挂载
</script>
第二中写法可以配合,延迟调用效果更明显。
setTimeout(()=>{
vm.$mount('#root') //第二张写法,回头再指定哪个root容器,mount挂载
},1000)
2、data的两种写法
对象式:
const vm = new Vue({
el:'#root',
//data的第一种写法,对象式
data:{
}
})
函数式:
const vm = new Vue({
el:'#root',
//data的第二种写法,函数式
data:function (){
return{
name:'linear',
}
}
})
函数中的this指哪里,data:function(){}函数还可简写为data(){}
data:function (){
console.log("@@@",this) //此处的this是Vue实例对象
return{
name:'linear',
}
data(){
console.log("@@@",this) //此处的this是Vue实例对象
return{
name:'linear',
}
}
总结: