el与data的两种写法
目录
1 el的两种写法
2 data的两种写法
3 总结
1 el的两种写法
之前创建一个容器对象和一个vue实例的时候，我们采用的是如下的方式。
<body>
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时提示
new Vue({
el:'#root',
data:{
name:'老六'
}
})
</script>
</body>此时我们的容器和vue实例产生了联系。其实还有一种写法。
<body>
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时提示
const v = new Vue({
// el:'#root',
data:{
name:'老六'
}
})
console.log(v)
v.$mount('#root')
</script>
</body>用$.mount去联系这个容器对象。这种容器与对象绑定的方式更加灵活。
2 data的两种写法
第一种写法：对象式
<body>
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时提示
new Vue({
el:'#root',
data:{ //data第一种写法，对象式
name:'老六'
}
})
</script>
</body>第二种写法：函数式
<body>
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false //阻止vue在启动时提示
new Vue({
el:'#root',
data:function(){ //第二种写法，函数式
return{
name:'老六'
}
}
})
</script>
</body>3 总结
1 el有两种写法
1）.new Vue()时配置el属性。
2）先创建Vue实例，随后在通过v.$mount('#root')指定el的值
2 data的写法
1）.对象式
2）.函数式
前期两种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3 一个重要的原则
由Vue管理的函数，一定不要写箭头函数，写了箭头函数之后，this就不是vue实例了