el与data的两种写法
data与el的两种写法
el有两种写法:
1.new Vue时候配置el属性
2.先创建vue实例,随后再通过vm.$mount('root')指定el的值
data有两种写法:
1.对象式
2.函数式
目前哪种写法都可以,学习到组件时,data必须用函数式
注意:由vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是vue实例了
<body> <div id="root"> <h1>你好,{{name}}</h1> </div> </body> <script type="text/javascript"> Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。 //el的两种写法 /* const v = new Vue({ //el:'#root', //第一种写法 data:{ name:'尚硅谷' } }) console.log(v) v.$mount('#root') //第二种写法 */ //data的两种写法 new Vue({ el: '#root', //data的第一种写法:对象式 /* data:{ name:'尚硅谷' } */ //data的第二种写法:函数式 data() { console.log('@@@', this) //此处的this是Vue实例对象 return { name: '尚硅谷' } } }) </script>