1218 字

6 分钟

Vue 2.0 快速上手教程

2025-03-25

2025-04-07

System-Dev

Frontend

/

Vue

/

TypeScript

NOTE
本教程假设你已经具备基本的 HTML、CSS 和 JavaScript 知识。如果你对这些知识不熟悉，可以先学习相关的教程。
本笔记基于Bilibili课程30分钟学会Vue之核心语法

环境准备#

在开始之前，确保你的开发环境已经安装了 Node.js 和 npm。你可以通过以下命令安装 Vue CLI：

1
npm install -g @vue/cli

安装完成后，可以通过以下命令创建一个新的 Vue 项目：

1
vue create my-vue-project
2
cd my-vue-project
3
npm run serve

Vue 2.0 基础语法#

2.1 响应式数据与插值表达式#

Vue 的核心特性之一是响应式数据绑定。通过在模板中使用插值表达式（{{ }}），可以将数据动态绑定到 DOM 中。

1
<div id="app">
2
    <p>{{ title }}</p>
3
    <p>{{ content }}</p>
4
</div>

在 JavaScript 中，通过 Vue 实例的 data 属性定义响应式数据：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        title: 'Hello Vue!',
5
        content: 'This is a Vue.js project.'
6
    }
7
});

当 data 中的数据发生变化时，页面上绑定的内容会自动更新。

2.2 方法与插值表达式#

Vue 允许在模板中调用方法。通过在 methods 中定义函数，可以在插值表达式中使用。

1
<div id="app">
2
    <p>{{ output() }}</p>
3
</div>

在 Vue 实例中定义方法：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        title: 'Hello Vue!',
5
        content: 'This is a Vue.js project.'
6
    },
7
    methods: {
8
        output() {
9
            return `Title: ${this.title}, Content: ${this.content}`;
10
        }
11
    }
12
});

2.3 计算属性#

计算属性是基于依赖的缓存属性。当依赖的响应式数据发生变化时，计算属性会自动重新计算。

1
<div id="app">
2
    <p>{{ outputContent }}</p>
3
</div>

在 Vue 实例中定义计算属性：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        title: 'Hello Vue!',
5
        content: 'This is a Vue.js project.'
6
    },
7
    computed: {
8
        outputContent() {
9
            return `Title: ${this.title}, Content: ${this.content}`;
10
        }
11
    }
12
});

2.4 侦听器（Watchers）#

侦听器用于监听数据的变化，并执行特定的操作。通过在 watch 中定义侦听器，可以实现更复杂的逻辑。

1
new Vue({
2
    el: '#app',
3
    data: {
4
        title: 'Hello Vue!'
5
    },
6
    watch: {
7
        title(newVal, oldVal) {
8
            console.log(`Title changed from ${oldVal} to ${newVal}`);
9
        }
10
    }
11
});

指令#

Vue 提供了一系列指令，用于操作 DOM 和绑定数据。

3.1 条件渲染#

v-if 和 v-show 用于根据条件渲染元素。v-if 是真正的条件渲染，而 v-show 只是切换元素的 CSS 属性。

1
<div id="app">
2
    <p v-if="bool">This is visible when bool is true.</p>
3
    <p v-show="bool">This is visible when bool is true.</p>
4
</div>

在 Vue 实例中定义布尔值：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        bool: true
5
    }
6
});

3.2 列表渲染#

v-for 用于渲染列表数据。可以通过数组或对象进行循环。

1
<div id="app">
2
    <p v-for="item in arr">{{ item }}</p>
3
    <p v-for="(item, key, index) in obj">{{ item }} - {{ key }} - {{ index }}</p>
4
</div>

在 Vue 实例中定义数组和对象：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        arr: ['a', 'b', 'c'],
5
        obj: { a: 10, b: 20, c: 30 }
6
    }
7
});

3.3 属性绑定#

v-bind 用于动态绑定 DOM 属性。

1
<div id="app">
2
    <p v-bind:title="title">Hover over me to see the title.</p>
3
</div>

在 Vue 实例中定义属性值：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        title: 'Dynamic Title'
5
    }
6
});

3.4 事件绑定#

v-on 或简写为 @ 用于绑定事件处理器。

1
<div id="app">
2
    <button @click="output">Click me</button>
3
</div>

在 Vue 实例中定义事件处理方法：

1
new Vue({
2
    el: '#app',
3
    methods: {
4
        output() {
5
            alert('Button clicked!');
6
        }
7
    }
8
});

3.5 表单绑定#

v-model 用于实现双向数据绑定，将表单输入与数据绑定在一起。

1
<div id="app">
2
    <input type="text" v-model="inputValue">
3
    <p>{{ inputValue }}</p>
4
</div>

在 Vue 实例中定义绑定的数据：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        inputValue: 'Default Value'
5
    }
6
});

修饰符#

Vue 提供了一些修饰符，用于增强指令的功能。

4.1 事件修饰符#

.trim 修饰符用于去除输入值的首尾空格。

1
<div id="app">
2
    <input type="text" v-model.trim="inputValue">
3
</div>

在 Vue 实例中定义绑定的数据：

1
new Vue({
2
    el: '#app',
3
    data: {
4
        inputValue: ''
5
    }
6
});

示例代码#

以下是完整的示例代码，展示了上述功能的综合应用。

1
<!DOCTYPE html>
2
<html lang="en">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>Vue 2.0 Quick Start</title>
7
</head>
8
<body>
9
    <div id="app">
10
        <h1>{{ title }}</h1>
11
        <p>{{ content }}</p>
12
        <p>{{ outputContent }}</p>
13
        <p v-if="bool">This is visible when bool is true.</p>
14
        <p v-show="bool">This is visible when bool is true.</p>
15
        <p v-for="item in arr">{{ item }}</p>
16
        <p v-for="(item, key, index) in obj">{{ item }} - {{ key }} - {{ index }}</p>
17
        <p v-bind:title="title">Hover over me to see the title.</p>
18
        <button @click="output">Click me</button>
19
        <input type="text" v-model.trim="inputValue">
20
        <p>{{ inputValue }}</p>
21
    </div>
22
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
23
    <script>
24
        new Vue({
25
            el: '#app',
26
            data: {
27
                title: 'Hello Vue!',
28
                content: 'This is a Vue.js project.',
29
                bool: true,
30
                arr: ['a', 'b', 'c'],
31
                obj: { a: 10, b: 20, c: 30 },
32
                inputValue: 'Default Value'
33
            },
34
            methods: {
35
                output() {
36
                    alert('Button clicked!');
37
                }
38
            },
39
            computed: {
40
                outputContent() {
41
                    return `Title: ${this.title}, Content: ${this.content}`;
42
                }
43
            },
44
            watch: {
45
                title(newVal, oldVal) {
46
                    console.log(`Title changed from ${oldVal} to ${newVal}`);
47
                }
48
            }
49
        });
50
    </script>
51
</body>
52
</html>