el与data的两种写法

文章发布较早，内容可能过时，阅读注意甄别。

# `代码`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>el与data的两种写法</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器 -->
    <div id="root">
      <h1>你好 {{name}}</h1>
    </div>

    <script type="text/javascript">
      Vue.config.productionTip = false; // 禁用提示
      // el 的两种写法
      // new Vue({
      // const v = new Vue({
      //     // el: '#root', // 第一种写法
      //     data: {
      //         name: "eryajf"
      //     }
      // });
      // console.log('v');
      // v.$mount('#root') // 第二种写法

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

        // 第二种，函数式
        data() {
          console.log("@@@", this);

          return {
            name: "eryajf",
          };
        },
      });
    </script>
  </body>
</html>

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
47
48

# `笔记`

data 与 el 的两种写法：

el 的两种写法

new Vue 时配置 el 属性。
先创建 Vue 实例，然后再通过 vm.$mount(#root) 的方式进行挂载 2. data 的两种写法 - 对象式 - 函数式
如何选择：目前学习阶段都可以，后边学习到组件时，data 必须使用函数式，否则会出问题。 3. 一个重要原则 由 Vue 管理的函数，一定不要写箭头函数，一旦写了箭头函数，this 就不再是 Vue 实例了。

上次更新: 2024/06/13, 22:13:45

← 数据绑定 MVVM模型→

el与data的两种写法

# 代码

# 笔记

# `代码`

# `笔记`