前言
系列文章目录：
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. el 的写法
1.1 写法1
在实例化Vue对象的时候，传入配置对象，使用el属性绑定vue实例需要控制的容器。
<body> <div id="app"> </div> <script> new Vue( { el: '#app' } ) </script> </body>
1.2 写法2
使用Vue上的
$mount方法将vue实例对象挂载到容器上。
<body> <div id="app"> </div> <script> const app = new Vue( { } ) app.$mount( '#app' ) </script> </body>
el 的写法，二者可以任选其一(两种写法没什么区别)
第二中写法更加灵活，比如，可以用于实现异步操作。
<body> <div id="app"> </div> <script> const app = new Vue( { } ) // app.$mount( '#app' ) // 一秒之后才将vue实例与容器关联 setTimeout( ()=>{ app.$mount( '#app' ) }, 1000 ) </script> </body>
2. data 的写法
2.1 写法1
对象式(在组件化写法中，不适用，组件化中只适用第二中写法)
<body> <div id="app"> </div> <script> const app = new Vue( { data: { } } ) app.$mount( '#app' ) </script> </body>
2.2 写法2
函数式
必须有一个返回值，返回值为对象
<body> <div id="app"> </div> <script> const app = new Vue( { data: function() { return { } } } ) app.$mount( '#app' ) </script> </body>
data函数中的this指向vue实例
data 函数由vue实例调用
data函数不能写成箭头函数，箭头函数没有自己的this，this会指向window，this不再执行Vue实例
简写：
<body> <div id="app"> </div> <script> const app = new Vue( { data() { return { } } } ) app.$mount( '#app' ) </script> </body>
