文章目录
- 前文提要
- Vue实例的el
- 第一种写法
- 第二种写法
- 小结
- Vue实例中data
- 第一种写法,对象式
- 效果图片
- 第二种写法,函数式
- 效果图片
- 小结
前文提要
本文仅做自己的学习记录,如有错误,请多谅解
Vue实例的el
第一种写法
<body><div id="box"><h1>你好,{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst 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 = falseconst 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 = falseconst 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 = falseconst vm = new Vue({el: '#box',// data: {// name: "对象式,这里是name的值",// }data:function(){return {name:"函数式,这里是name的值",}}})</script>
</body>
效果图片
data后面不接大括号,而是接入一个函数,函数内的返回值中的数据就相当于之前对象式中写的数据,能够通过返回的name获取到它的数值。
小结
由Vue管理的函数不能写成箭头函数,也就是写成函数式的data的函数,一旦写成了箭头函数,函数中this指定的就不是Vue实例,而是全局的window。
之后学习Vue,学习到组件时候,data就必须使用函数式的写法。
至此,结束。
如果你觉得这篇文章写的不错,多多点赞~收藏吧!