当前位置：首页 > news >正文

Vue.js 基础教程：从入门到实践

news 2025/11/6 8:15:30

一、Vue.js 简介

Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

二、环境搭建

1. 使用ES模块构建版本

这是最简单的方式，适合初学者快速体验 Vue 的功能。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 入门案例</title>
</head>
<body><div id="app">{{ message }}</div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';const app = createApp({data() {return {message: 'Hello Vue!'}}});app.mount('#app');
</script>
</body>
</html>

2. 通过 NPM 安装（适合大型项目）

npm install vue

三、Vue 常用指令详解与案例

Vue 提供了丰富的指令，用于在模板中绑定数据、事件、属性等。以下是常用的指令及其使用案例。

1. `v-bind`：绑定属性

用于绑定 HTML 属性到 Vue 实例的属性或表达式上。简写为 :。

案例：绑定图片地址

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 入门案例</title>
</head>
<body><div id="app"><img :src="imageUrl" alt="Vue Logo"></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';const app = createApp({data() {return {imageUrl: 'https://vuejs.org/images/logo.png'};}});app.mount('#app');
</script>
</body>
</html>

2. `v-model`：双向数据绑定

用于在表单元素上创建双向数据绑定。

案例：输入框双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 入门案例</title>
</head>
<body><div id="app"><input type="text" v-model="message"><p>你输入的内容是: {{ message }}</p></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';const app = createApp({data() {return {message:''};}});app.mount('#app');
</script>
</body>
</html>

3. `v-if / v-else-if / v-else`：条件渲染

根据表达式的真假条件性地渲染元素。

案例：条件显示内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 入门案例</title>
</head>
<body><div id="app"><p v-if="score>=90">优秀</p><p v-else-if="score>=75">良好</p><p v-else-if="score>=60">及格</p><p v-else>不及格</p></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';const app = createApp({data() {return {score:85};}});app.mount('#app');
</script>
</body>
</html>

4. `v-for`：列表渲染

用于基于数组渲染列表。

案例：遍历数组

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 入门案例</title>
</head>
<body><div id="app"><ul ><li v-for="item in list" :key="item.id">{{ item.id }} - {{ item.name }} - {{ item.age }}</li></ul></div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';const app = createApp({data() {return {list: [{ id: 1, name: '张三', age: 18 },{ id: 2, name: '李四', age: 28 },{ id: 3, name: '王五', age: 38 }]};}});app.mount('#app');
</script>
</body>
</html>

5. `v-on`：事件监听

用于监听 DOM 事件，简写为 @。

案例：点击按钮增加计数

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-on 示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body><div id="app"><p>当前计数：{{ count }}</p><button v-on:click="count++">增加</button><!-- 简写形式 --><button @click="count--">减少</button></div><script>new Vue({el: '#app',data: {count: 0}});</script>
</body>
</html>

6. `v-show`：根据条件显示或隐藏元素

与 v-if 不同，v-show 通过 CSS 的 display 属性控制元素的显示和隐藏。

案例：切换元素显示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>v-show 示例</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body><div id="app"><p v-show="isVisible">这个段落是可见的</p><button @click="isVisible = !isVisible">切换显示</button></div><script>new Vue({el: '#app',data: {isVisible: true}});</script>
</body>
</html>

四、综合案例：待办事项列表

结合以上指令，我们创建一个简单的待办事项列表应用。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue 待办事项列表</title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script><style>body {font-family: Arial, sans-serif;padding: 20px;}ul {list-style-type: none;padding: 0;}li {margin: 5px 0;}.completed {text-decoration: line-through;color: gray;}</style>
</head>
<body><div id="app"><h1>待办事项列表</h1><input v-model="newTodo" @keyup.enter="addTodo" placeholder="添加新任务"><button @click="addTodo">添加</button><ul><li v-for="todo in todos" :key="todo.id"><input type="checkbox" v-model="todo.completed"><span :class="{ completed: todo.completed }">{{ todo.text }}</span><button @click="removeTodo(todo.id)">删除</button></li></ul></div><script>new Vue({el: '#app',data: {newTodo: '',todos: []},methods: {addTodo() {if (this.newTodo.trim() === '') return;this.todos.push({id: Date.now(),text: this.newTodo,completed: false});this.newTodo = '';},removeTodo(id) {this.todos = this.todos.filter(todo => todo.id !== id);}}});</script>
</body>
</html>