- Vue.js 快速上手指南
- 1. Vue.js 简介
- 1.1 Vue.js 的特点
- 2. 学习 Vue 2 还是 Vue 3？
- 2.1 Vue.js 下载
- 2.2 在页面引入 Vue.js
- 3. Vue.js 入门
- 3.1 入门程序 - Hello World
- 3.2 Class 与 Style 绑定
- 3.2.1 Class 绑定
- 3.2.2 Style 绑定
- 3.3 v-text 和 v-html
- 3.4 v-if 和 v-for
- 3.5 v-model
- 3.6 组件
- 3.7 生命周期钩子
- 4. 结论
Vue.js 快速上手指南
Vue.js 是一个轻量级、易于上手的前端框架，它提供了一套简洁的模板语法和响应式数据绑定机制，使得开发复杂的用户界面变得简单而高效。本文将带你快速了解 Vue.js 的基本概念、特性，并提供一些实用的代码示例。
1. Vue.js 简介
Vue.js（读音 /vjuː/，类似于 “view”）是一个用于构建用户界面的渐进式框架。它的核心库只关注视图层，易于上手，并且可以与第三方库或现有项目整合。Vue.js 的设计哲学是自底向上逐层应用，使得开发者可以根据项目需求灵活地选择使用它的哪一部分。
1.1 Vue.js 的特点
- 简洁：HTML 模板 + JSON 数据，再创建一个 Vue 实例，就这么简单。
- 数据驱动：自动追踪依赖的模板表达式和计算属性。
- 组件化：用解耦、可复用的组件来构造界面。
- 轻量：压缩后大约 33.46KB，无依赖。
- 快速：精确有效的异步批量 DOM 更新。
- 模块友好：通过 NPM 或 Yarn 安装，无缝融入你的工作流。
2. 学习 Vue 2 还是 Vue 3？
Vue 3 于 2020 年 9 月 19 日发布正式版，命名为“One Piece”。Vue 3 带来了更好的性能、更小的包体积、更好的 TypeScript 集成以及更优秀的 API 设计。从 2022 年 2 月 7 日起，Vue 3 成为默认安装版本。因此，现在学习 Vue 3 是非常合适的。
2.1 Vue.js 下载
你可以通过访问 Vue.js 的官方网站 Vue.js 来下载 Vue.js。下载后，你可以在页面中引入 Vue.js 文件。
2.2 在页面引入 Vue.js
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 示例</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>
3. Vue.js 入门
3.1 入门程序 - Hello World
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Hello World</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 World!'
}
});
</script>
</body>
</html>
3.2 Class 与 Style 绑定
Vue.js 提供了 v-bind:class 和 v-bind:style 指令来动态绑定 class 和 style。
3.2.1 Class 绑定
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Class 绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :class="{ active: isActive, 'text-danger': hasError }"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true,
hasError: false
}
});
</script>
</body>
</html>
3.2.2 Style 绑定
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Style 绑定</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div :style="styleObject"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
fontSize: '20px'
}
}
});
</script>
</body>
</html>
3.3 v-text 和 v-html
v-text用于更新元素的textContent。v-html用于输出真正的 HTML。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js v-text 和 v-html</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="text"></p>
<p v-html="html"></p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
text: 'This is a text.',
html: '<strong>This is HTML.</strong>'
}
});
</script>
</body>
</html>
3.4 v-if 和 v-for
v-if用于条件渲染。v-for用于列表渲染。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js v-if 和 v-for</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="seen">Now you see me.</p>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.text }}
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
seen: true,
items: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' }
]
}
});
</script>
</body>
</html>
3.5 v-model
v-model 用于在表单 input、textarea 及 select 元素上创建双向数据绑定。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js v-model</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="Edit me">
<p>Message is: {{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
</body>
</html>
3.6 组件
Vue.js 支持组件化开发，可以创建可复用的组件。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 组件</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<person-component></person-component>
</div>
<script>
Vue.component('person-component', {
template: '<div>Person Component</div>'
});
var app = new Vue({
el: '#app'
});
</script>
</body>
</html>
3.7 生命周期钩子
Vue 实例在创建过程中会经历多个阶段：创建、编译、挂载、更新和销毁。每个阶段都有相应的生命周期钩子。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js 生命周期钩子</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
beforeCreate: function () {
console.log('Before create');
},
created: function () {
console.log('Created');
},
beforeMount: function () {
console.log('Before mount');
},
mounted: function () {
console.log('Mounted');
},
beforeUpdate: function () {
console.log('Before update');
},
updated: function () {
console.log('Updated');
},
beforeDestroy: function () {
console.log('Before destroy');
},
destroyed: function () {
console.log('Destroyed');
}
});
</script>
</body>
</html>
4. 结论
提供了简洁的语法和高效的数据绑定机制，使得开发复杂的用户界面变得简单而高效。Vue.js 是一个现代化的前端框架，它通过简洁的设计和强大的功能，极大地简化了用户界面的开发过程。Vue.js 的核心优势在于其渐进式架构，使得开发者可以轻松地将其集成到现有的项目中，或者用于构建全新的单页应用。
