一、什么是 Vue.js?
Vue.js(读作 /vjuː/ 像 view)是一个用于构建用户界面的渐进式 JavaScript 框架。它的核心是一个可以渐进使用的库,既可以应用在一个简单的小项目里,也可以用来开发复杂的单页面应用(SPA)。
二、开始前的准备
- 基础知识:最好先了解 HTML、CSS 和 JavaScript 的基础知识。
- 开发工具:使用官网推荐的就行。
- 浏览器:使用 Chrome 或 Firefox,并安装 Vue.js Devtools,方便调试。
三、Hello Vue.js!
让我们从一个最简单的示例开始,感受一下 Vue.js 的魔力。
1. 创建一个 HTML 文件
在你的电脑上创建一个名为 index.html
的文件,并写入以下内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Vue.js</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
// 创建一个 Vue 实例
new Vue({
el: '#app', // 绑定 Vue 实例到 id 为 app 的 DOM 元素
data: {
message: 'Hello, Vue.js!' // 定义一个数据
}
});
</script>
</body>
</html>
2. 打开文件
使用浏览器打开你刚刚创建的 index.html
文件,你会看到页面上显示了 Hello, Vue.js!
。恭喜你,这就是你的第一个 Vue.js 应用!
四、Vue.js 基础概念
1. Vue 实例
每个 Vue 应用程序都是通过创建一个 Vue 实例开始的。你可以把 Vue 实例想象成一个管理数据和界面逻辑的小管家。刚刚的示例中,我们通过 new Vue({ ... })
创建了一个 Vue 实例。
new Vue({
el: '#app', // Vue 管理这个 DOM 元素
data: {
message: 'Hello, Vue.js!' // 数据,Vue 会自动将数据与 DOM 绑定
}
});
2. 模板语法
Vue.js 使用一种简单的模板语法来将数据渲染到页面上。例如,{{ message }}
会将数据中的 message
显示在对应的位置。这种写法称为“插值”。
3. 绑定和指令
Vue.js 有很多强大的功能,可以让你轻松地绑定数据和处理用户交互。
-
属性绑定 (
v-bind
):用来动态绑定 HTML 属性。<a v-bind:href="url">点击这里</a>
也可以简写为:
<a :href="url">点击这里</a>
-
事件处理 (
v-on
):用来监听用户事件,比如点击按钮。<button v-on:click="sayHello">点击我</button>
也可以简写为:
<button @click="sayHello">点击我</button>
4. 双向数据绑定
Vue.js 的双向数据绑定功能通过 v-model
指令实现,这让我们可以轻松地处理表单输入。
<div id="app">
<input v-model="message" placeholder="输入一些内容">
<p>{{ message }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
});
</script>
现在,无论你在输入框里输入什么内容,都会同步显示在页面上。
五、Vue 组件
组件是 Vue.js 的一大亮点,它们可以把代码拆分成小块,使得开发和维护变得更加简单。
1. 什么是组件?
组件是独立的、可复用的 UI 单元。你可以把每个组件看作是一个小的 Vue 实例。组件可以包含 HTML、CSS 和 JavaScript,Vue 会帮你管理它们的组合和交互。
2. 创建一个简单的组件
首先,我们在 HTML 中定义一个自定义标签 <my-component></my-component>
:
<div id="app">
<my-component></my-component>
</div>
然后,用 Vue.js 创建一个全局组件:
Vue.component('my-component', {
template: '<p>这是一个自定义组件!</p>'
});
new Vue({
el: '#app'
});
现在,你的网页上会显示“这是一个自定义组件!”这就是组件的魅力所在!
六、Vue 生命周期钩子
Vue 实例在创建、挂载、更新和销毁的过程中,会触发一些特殊的函数,称为“生命周期钩子”。这些钩子函数可以让你在特定的时机执行一些代码。
- created:实例创建完成后调用。
- mounted:实例挂载到 DOM 后调用。
- updated:实例的数据发生变化时调用。
- destroyed:实例被销毁时调用。
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
created() {
console.log('Vue 实例已创建!');
},
mounted() {
console.log('Vue 实例已挂载到 DOM!');
}
});