文章目錄
- 前文提要
- Vue實例的el
- 第一種寫法
- 第二種寫法
- 小結
- Vue實例中data
- 第一種寫法，對象式
- 效果圖片
- 第二種寫法，函數式
- 效果圖片
- 小結
前文提要
本文僅做自己的學習記錄，如有錯誤，請多諒解
Vue實例的el
第一種寫法
<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',data: {name: "這里是name的值",}})// vm.$mount('#box')</script>
</body>
第二種寫法
<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({// el: '#box',data: {name: "這里是name的值",}})vm.$mount('#box')</script>
</body>
vm代表的是Vue實例，后面加上’$mount’，'mount’帶有綁定的意思，再加上id選擇器字符串
小結
對于el來說，兩種寫法都行，但是第二種更常用。使用不變量記錄Vue實例后，第二種寫法可以更加自由地添加屬性，將其塞入其他的函數中實現動態添加屬性也行。
Vue實例中data
第一種寫法，對象式
<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.config.productionTip = falseconst vm = new Vue({el: '#box',data: {name: "對象式，這里是name的值",}})</script>
</body>
效果圖片
data使用大括號就是對象式的寫法
第二種寫法，函數式
<body><div id="box"><h1>你好，{{name}}</h1></div><script type="text/javascript">Vue.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就必須使用函數式的寫法。
至此，結束。
如果你覺得這篇文章寫的不錯，多多點贊~收藏吧！
![數據安全第一：應對[[MyFile@waifu.club]].wis勒索病毒的實用建議與技巧](http://pic.xiahunao.cn/數據安全第一：應對[[MyFile@waifu.club]].wis勒索病毒的實用建議與技巧)
