?data與el的2種寫(xiě)法? ? ? ? ??

? ? ?1.el有2種寫(xiě)法? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?(1).new Vue時(shí)候配置el屬性。? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ?(2).先創(chuàng)建Vue實(shí)例，隨后再通過(guò)vm.$mount('#root')指定el的值。? ? ? ? ??

? ? ? 2.data有2種寫(xiě)法? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ?(1).對(duì)象式? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ?(2).函數(shù)式? ? ? ? ? ? ? ??

? 如何選擇：目前哪種寫(xiě)法都可以，以后學(xué)習(xí)到組件時(shí)，data必須使用函數(shù)式，否則會(huì)報(bào)錯(cuò)。? ? ? ? ??

? ? ? ? ? 3.一個(gè)重要的原則：? ? ? ? ? ? ? ? ?

? ? ? ? ? ? ? ? ? ? ? 由Vue管理的函數(shù)，一定不要寫(xiě)箭頭函數(shù)，一旦寫(xiě)了箭頭函數(shù)，this就不再是Vue實(shí)例了。

<div id="root">? ? ?

<h1>你好，{{name}}</h1>?

? </div>? </body>?

<script type="text/javascript">?

? Vue.config.productionTip = false //阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。?

? //el的兩種寫(xiě)法? ? /*

const v = new Vue({? ?

? //el:'#root', //第一種寫(xiě)法? ? ?

data:{? ? ? ?

name:'尚硅谷'?

? ? }? ? })? ?

console.log(v)? ?

v.$mount('#root') //第二種寫(xiě)法 */?

//data的兩種寫(xiě)法? ? new Vue({? ? ?

el:'#root',? ?

? //data的第一種寫(xiě)法：對(duì)象式? ?

? /* data:{? ? ? ?

name:'尚硅谷'? ? ?

} */? ?

? //data的第二種寫(xiě)法：函數(shù)式? ? ?

data(){? ? ? ?

console.log('@@@',this) //此處的this是Vue實(shí)例對(duì)象? ? ? ?

return{? ? ? ? ? name:'尚硅谷'? ? ? ? }? ? ? }? ? })? </script> ? ??