04_el和data的兩種寫法
阿新 • • 發佈：2021-10-26
總結：
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", //第一種寫法 3data:{ 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>