文章目录
- data与el的2种写法
data与el的2种写法
<!DOCTYPE html>
<html lang="en"><head><!-- data与el的2种写法1. el有2种写法：1)new Vue时直接传递el属性----常用2)通过vm.$mount('#root')指定容器 ----不常用2.data有2种写法：1)对象是：非组件编码时可以写对象，也可以不写函数2)函数式：组件化编码必须使用函数式的dataVue中的一个最最重要的原则：由Vue所调用的函数，都不要写成箭头函数，一旦写了箭头函数，this就不对了(或许是undefined,或许是Window)--><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>data与el的2种写法</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h2>Hello,{{msg}}</h2><h2>地址是：{{address}}</h2></div><script>// 第一种写法(常用)// const vm = new Vue({// el: "#root",// data: {// msg: "atguigu",// address: "北京",// },// });// 第二种写法(不常用)// const vm = new Vue({// data: {// msg: "atguigu",// address: "北京",// },// });// vm.$mount("#root");// data的第一种写法，data是一个对象// const vm = new Vue({// el: "#root",// data: {// msg: "atguigu",// address: "北京",// },// });// data的第二种写法，data是一个函数 （组件中使用的多）const vm = new Vue({el: "#root",/*特别注意： 1.若使用函数式data，Vue会帮我们调用data函数，Vue就会得到返回的数据对象，从而使用，this是Vue的实例对象2.data不要写成箭头函数，要写成普通函数，否则this的指向就是Window了*/data() {// 特别注意：1.data不要写成箭头函数，要写成普通函数，否则this的指向就是Window了，而不是Vue的实例对象console.log(this);return {msg: "atguigu",address: "北京",};},});console.log(vm);</script></body>
</html>
的用法)
