vue2入门

vue2入门

2025/9/20 6:56:08 来源：https://blog.csdn.net/le12345678934694/article/details/143699922 浏览: 次关键词：vue2入门

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。它易于上手，并且与现代前端工具链紧密集成。以下是一个 Vue 2 的入门基础总结，包括一些代码实例。

Vue 2 入门基础

1. 安装 Vue 2

Vue 2 可以通过多种方式安装，包括直接在 HTML 文件中引入 CDN，或者通过 npm 安装。

通过 CDN 引入：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 2入门</title><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app">{{ message }}</div><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'}});</script>
</body>
</html>

2. 创建 Vue 实例

一个 Vue 实例是 Vue 应用的起点。每个 Vue 实例都会管理一个 DOM 元素。

var app = new Vue({el: '#app',  // 绑定一个 DOM 元素data: {message: 'Hello Vue!'}
});

3. 模板语法

Vue 提供了两种模板语法：插值（interpolation）和指令（directives）。

插值：

<div id="app"><p>{{ message }}</p>
</div>

指令：

<div id="app"><p v-bind:title="message">鼠标悬停查看动态绑定的标题</p>
</div><script>
var app = new Vue({el: '#app',data: {message: '页面加载于 ' + new Date().toLocaleString()}
});
</script>

4. 计算属性（Computed Properties）

计算属性是基于它们的依赖进行缓存的响应式属性。

<div id="app"><p>原始消息: "{{ message }}"</p><p>反转消息: "{{ reversedMessage }}"</p>
</div><script>
var app = new Vue({el: '#app',data: {message: 'Hello'},computed: {reversedMessage: function () {return this.message.split('').reverse().join('');}}
});
</script>

5. 事件处理

你可以使用 v-on 指令来监听 DOM 事件，并在触发时运行一些 JavaScript 代码。

<div id="app"><p>{{ message }}</p><button v-on:click="reverseMessage">反转消息</button>
</div><script>
var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {reverseMessage: function () {this.message = this.message.split('').reverse().join('');}}
});
</script>

简写形式：

<button @click="reverseMessage">反转消息</button>

6. 条件渲染

Vue 提供了 v-if、v-else-if 和 v-else 指令来实现条件渲染。

<div id="app"><p v-if="seen">现在你看到我了</p><p v-else>你没看到我</p><button @click="toggle">切换</button>
</div><script>
var app = new Vue({el: '#app',data: {seen: true},methods: {toggle: function () {this.seen = !this.seen;}}
});
</script>

7. 循环渲染

你可以使用 v-for 指令基于一个数组来渲染一个元素列表。

<div id="app"><ul><li v-for="item in items" :key="item.id">{{ item.text }}</li></ul>
</div><script>
var app = new Vue({el: '#app',data: {items: [{ id: 1, text: 'Item 1' },{ id: 2, text: 'Item 2' },{ id: 3, text: 'Item 3' }]}
});
</script>