文章目录
- 前文提要
- Vue实例的el
- 第一种写法
- 第二种写法
- 小结
- Vue实例中data
- 第一种写法，对象式
- 效果图片
- 第二种写法，函数式
- 效果图片
- 小结
前文提要
本文仅做自己的学习记录，如有错误，请多谅解
Vue实例的el
第一种写法
<body>
<div id="box">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#box',
data: {
name: "这里是name的值",
}
})
// vm.$mount('#box')
</script>
</body>
第二种写法
<body>
<div id="box">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
// el: '#box',
data: {
name: "这里是name的值",
}
})
vm.$mount('#box')
</script>
</body>
vm代表的是Vue实例，后面加上’$mount’，'mount’带有绑定的意思，再加上id选择器字符串
小结
对于el来说，两种写法都行，但是第二种更常用。使用不变量记录Vue实例后，第二种写法可以更加自由地添加属性，将其塞入其他的函数中实现动态添加属性也行。
Vue实例中data
第一种写法，对象式
<body>
<div id="box">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#box',
data: {
name: "对象式，这里是name的值",
}
})
</script>
</body>
效果图片
data使用大括号就是对象式的写法
第二种写法，函数式
<body>
<div id="box">
<h1>你好，{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const vm = new Vue({
el: '#box',
// data: {
// name: "对象式，这里是name的值",
// }
data:function(){
return {
name:"函数式，这里是name的值",
}
}
})
</script>
</body>
效果图片
data后面不接大括号，而是接入一个函数，函数内的返回值中的数据就相当于之前对象式中写的数据，能够通过返回的name获取到它的数值。
小结
由Vue管理的函数不能写成箭头函数，也就是写成函数式的data的函数，一旦写成了箭头函数，函数中this指定的就不是Vue实例，而是全局的window。
之后学习Vue，学习到组件时候，data就必须使用函数式的写法。
至此，结束。
如果你觉得这篇文章写的不错，多多点赞~收藏吧！
