一、Vue.js 简介
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。与其他大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
二、环境搭建
1. 使用ES模块构建版本
这是最简单的方式，适合初学者快速体验 Vue 的功能。
html
<!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 安装（适合大型项目）
bash
npm install vue三、Vue 常用指令详解与案例
Vue 提供了丰富的指令，用于在模板中绑定数据、事件、属性等。以下是常用的指令及其使用案例。
1. v-bind：绑定属性
用于绑定 HTML 属性到 Vue 实例的属性或表达式上。简写为 :。
案例：绑定图片地址
html
<!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：双向数据绑定
用于在表单元素上创建双向数据绑定。
案例：输入框双向绑定
html
<!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：条件渲染
根据表达式的真假条件性地渲染元素。
案例：条件显示内容
html
<!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：列表渲染
用于基于数组渲染列表。
案例：遍历数组
html
<!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 事件，简写为 @。
案例：点击按钮增加计数
html
<!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 属性控制元素的显示和隐藏。
案例：切换元素显示
html
<!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>四、综合案例：待办事项列表
结合以上指令，我们创建一个简单的待办事项列表应用。
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>
五、总结
通过本教程，我们学习了：
- Vue.js 的基本概念和环境搭建
- 常用指令（
v-bind、v-model、v-if、v-for、v-on、v-show）的使用 - 通过一个综合案例，将所学知识应用到实际开发中
Vue.js 的学习曲线平缓，但功能强大。掌握这些基础知识后，你可以进一步探索 Vue 的组件化开发、路由管理（Vue Router）、状态管理（Vuex）等高级特性，构建更加复杂和高效的应用。