网站分享链接怎么做,网站一般建什么,网站设计欣赏导航,网站关键词排名怎么提升文章目录 前文提要Vue实例的el第一种写法第二种写法小结 Vue实例中data第一种写法#xff0c;对象式效果图片第二种写法#xff0c;函数式效果图片小结 前文提要
本文仅做自己的学习记录#xff0c;如有错误#xff0c;请多谅解 Vue实例的el
第一种写法
body对象式效果图片第二种写法函数式效果图片小结 前文提要
本文仅做自己的学习记录如有错误请多谅解 Vue实例的el
第一种写法
bodydiv idboxh1你好{{name}}/h1/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {name: 这里是name的值,}})// vm.$mount(#box)/script
/body第二种写法
bodydiv idboxh1你好{{name}}/h1/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({// el: #box,data: {name: 这里是name的值,}})vm.$mount(#box)/script
/bodyvm代表的是Vue实例后面加上’$mount’mount’带有绑定的意思再加上id选择器字符串
小结
对于el来说两种写法都行但是第二种更常用。使用不变量记录Vue实例后第二种写法可以更加自由地添加属性将其塞入其他的函数中实现动态添加属性也行。
Vue实例中data
第一种写法对象式
bodydiv idboxh1你好{{name}}/h1/divscript typetext/javascriptVue.config.productionTip falseconst vm new Vue({el: #box,data: {name: 对象式这里是name的值,}})/script
/body效果图片 data使用大括号就是对象式的写法
第二种写法函数式
bodydiv idboxh1你好{{name}}/h1/divscript typetext/javascriptVue.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就必须使用函数式的写法。 至此结束。
如果你觉得这篇文章写的不错多多点赞~收藏吧
