04_el和data的两种写法
总结：
data与el的两种写法
1.el的两种写法
（1）new Vue时需要配置el属性；
（2）先创建Vue实例，然后再通过vm.$mount('#root')指定el的值
2.data的两种写法
(1)对象式
(2)函数式
注意：在运用组件时，data必须使用函数式，否则会报错。
3.一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。
实例：
1.el的两种写法
（1）new Vue时需要配置el属性
1 new Vue({ 2 el:"#root", //第一种写法 3 data:{ 4 name:'尚硅谷' 5 } 6 })
（2）先创建Vue实例，然后再通过vm.$mount('#root')指定el的值
1 const vm =new Vue({ 2 data:{ 3 name:'尚硅谷' 4 } 5 }) 6 console.log(v) 7 vm.$mount('#root') //第二种写法
2.data的两种写法
（1）对象式
1 new Vue({ 2 el:"#root", 3 //data的第一种写法：对象式 4 data:{ 5 name:'尚硅谷' 6 }
（2）函数式
1 new Vue({ 2 el:"#root", 3 //data的第二种写法：函数式 4 data(){ 5 console.log(this) //此处的this是Vue的实例对象 6 return{ 7 name:'尚硅谷' 8 } 9 } 10 })
整个过程的实例代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>el和data的两种写法</title> 8 <script type="text/javascript" src="../js/vue.js"></script> 9 </head> 10 <body> 11 <!-- 准备好一个容器 --> 12 <div id="root"> 13 <h1>你好, {{name}}</h1> 14 </div> 15 </body> 16 <script type="text/javascript"> 17 Vue.config.productionTip = false //阻止vue在启动时生成生产提示。 18 //el的两种写法 19 /* const vm =new Vue({ 20 //el:"#root", //第一种写法 21 data:{ 22 name:'尚硅谷' 23 } 24 }) 25 console.log(v) 26 vm.$mount('#root') //第二种写法 */ 27 //data的两种写法 28 new Vue({ 29 el:"#root", 30 //data的第一种写法：对象式 31 /* data:{ 32 name:'尚硅谷' 33 } */ 34 //data的第二种写法：函数式 35 data(){ 36 console.log(this) //此处的this是Vue的实例对象 37 return{ 38 name:'尚硅谷' 39 } 40 } 41 }) 42 </script> 43 </html>
