1. el 与 data 的两种写法

1.1 el有2种写法

  • 创建Vue实例对象的时候配置el属性

  • 先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值

    1.1 data有2种写法

  • 对象式：data： { }

  • 函数式：data() { return { } }
    注意：
    如何选择：目前哪种写法都可以，以后到组件时，data必须使用函数，否则会报错
    一个重要的原则
    由Vue管理的函数，一定不要写箭头函数，否则 this 就不再是Vue实例了

代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8" />
  <title>el与data的两种写法</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
 </head>
 <body>
  <!-- 准备好一个容器-->
  <div id="root">
   <h1>你好，{{name}}</h1>
  </div>
 </body>

 <script type="text/javascript">
  Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

  //el的两种写法
  /* const v = new Vue({
   //el:'#root', //第一种写法
   data:{
    name:'taoying'
   }
  })
  console.log(v)
  v.$mount('#root') //第二种写法 */

  //data的两种写法
  new Vue({
   el:'#root',
   //data的第一种写法：对象式
   /* data:{
    name:'taoting'
   } */

   //data的第二种写法：函数式
   data(){
    console.log('@@@',this) //此处的this是Vue实例对象
    return{
     name:'taoying'
    }
   }
  })
 </script>
</html>