Vue核心 el与data的两种写法
Vue核心 el与data的两种写法
1.5. el 与 data 的两种写法
el有2种写法
- 创建Vue实例对象的时候配置el属性
- 先创建Vue实例，随后再通过vm.**$mount(‘#root’)**指定el的值
data有2种写法
-
对象式：data： { }
-
函数式：data() { return { } }
如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了
<!DOCTYPE html>
<head><meta charset="UTF-8"><title>el与data的两种写法</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><!-- el与data的两种写法1.el有2种写法(1).new Vue的时候配置el属性(2).先创建Vue实例，随后再通过vm.$mount('#root')指定el的值2.data有2种写法(1).对象式：data{}(2).函数式：data(){return{}}如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错3.一个重要的原则由Vue管理的函数，一定不要写箭头函数，否则this就不再是Vue实例了--><!-- 准备好一个容器 --><div id="root"><h1>你好，{{name}}</h1></div><script type="text/javascript">// 阻止vue在启动时生成生产提示Vue.config.productionTip = false// el的两种写法 // const v = new Vue({ // // el:'#root', // 第一种写法// data: { // name:'cess' // } // }) // console.log(v) // v.$mount('#root') // 第二种写法// data的两种写法 new Vue({ el: '#root', // data的第一种写法：对象式 // data:{ // name:'cess'// }// data的第二种写法：函数式data() { console.log('@@@', this) // 此处的this是Vue实例对象 return { name: 'cess' } }})</script>
</body>
</html>