🥦 Vue el与data
2025-01-22 08:19:30    389 字    #前端 #🥦 Vue
This post is also available in English and alternative languages.

1. el（element）

在 Vue 中，el 是 element 的缩写，它用于指定 Vue 实例要挂载的元素。在创建 Vue 实例后需要将其挂载到 DOM 上才能生效，而 el 就是用来指定挂载元素的选择器。


2. data

在 Vue 中，data 是一个对象，用于存储组件中的数据。它是 Vue 实例的一个属性，通过在组件中定义 data 对象，可以将数据绑定到模板中。当 data 中的数据发生改变时，模板会自动更新。


3. 两种写法

Vue 中 data 与 el 分别有两种写法：

  • el 的两种写法
    1. new Vue 时候直接配置 el 属性。
    2. 先创建 Vue 实例，随后再通过 vm.$mount('#root') 指定 el 属性的值。
  • data的两种写法
    1. 对象式
    2. 函数式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<head>
    <!-- ... -->
</head>
<body>

<div id="root">
    <h1>你好,{{name}}</h1>
</div>

<script type="text/javascript">
    const v = new Vue({
        el: '#root',  // el的第一种写法,直接配置
        data: {       // data的第一种写法,对象式
            name: 'hello world'
        }
    });
</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
<html>
<head>
    <!-- ... -->
</head>
<body>

<div id="root">
    <h1>你好,{{name}}</h1>
</div>

<script type="text/javascript">
    const v = new Vue({
        data() {  // data的第二种写法,函数式
            return {
                name: 'ha1 ha1 ha1'
            }
        },
    });
    v.$mount('#root');  // el的第二种写法
</script>
</body>
</html>