Vue.js基础教学
Vue.js 是一款轻量级、易学的前端框架,它是用于构建用户界面的渐进式框架。在这篇教程中,我们将介绍 Vue.js 的基础概念,并通过实际示例来帮助你了解 JavaScript 语法。
在该教程的最后会完整地介绍如何搭建一个Vue地计数器工程。
1. 安装 Vue CLI
为了更好地管理项目结构和依赖,我们可以使用 Vue CLI(命令行工具)来创建一个 Vue 工程。首先,你需要**安装 Node.js**,然后使用 npm
(Node.js 包管理器)全局安装 Vue CLI。在命令行中输入以下命令:
npm install -g @vue/cli
2. 创建 Vue 工程
安装完成后,你可以使用 vue create
命令来创建一个新的 Vue 工程:
vue create my-vue-app
在这个例子中,my-vue-app
是你的项目名称。命令执行后,你将看到一个交互式命令行界面,用于选择项目的预设配置。你可以选择默认的预设配置,也可以手动选择需要的特性。
3. 运行 Vue 工程
创建 Vue 工程后,进入项目文件夹:
cd my-vue-app
然后使用以下命令安装项目依赖:
npm install xxx
接下来,你可以运行以下命令启动开发服务器:
npm run serve
命令执行后,你将看到一个提示,告诉你在哪个地址和端口可以访问你的应用(通常是 http://localhost:8080/
)。现在你可以在浏览器中访问这个地址,看到你的 Vue 应用正在运行。
4. Vue 实例
在引入 Vue.js 之后,我们需要创建一个 Vue 实例。Vue 实例是一个 JavaScript 对象,它包含了应用的数据、方法等属性。以下是一个简单的 Vue 实例:
// JavaScript 对象字面量语法,用于创建一个对象
var app = new Vue({
el: '#app', // 指定 Vue 实例挂载的元素
data: { // 声明应用的数据
message: 'Hello, Vue.js!'
}
});
在这个例子中,我们用一个对象字面量来创建 Vue 实例。对象字面量是用花括号 {}
包围的键值对集合。每个键值对用冒号(:
)分隔,不同的键值对之间用逗号(,
)分隔。
5. 数据绑定
Vue.js 提供了非常简洁的模板语法,可以方便地将数据绑定到 DOM。例如:
<div id="app">
<h1>{{ message }}</h1>
</div>
在这个例子中,我们使用双大括号 {{ }}
作为插值表达式,将 Vue 实例的 message
属性值插入到 DOM 中。
6. 指令
Vue.js 提供了一些特殊的属性,称为指令(Directives)。指令用于在 DOM 元素上添加特殊的行为。以下是一个使用 v-bind
指令的例子:
<div id="app">
<h1 v-bind:title="message">{{ message }}</h1>
</div>
在这个例子中,我们使用 v-bind
指令将 Vue 实例的 message
属性值绑定到 h1
元素的 title
属性上。当鼠标悬停在这个元素上时,会显示 message
的内容。
7. 事件处理
在 Vue.js 中,我们可以使用 v-on
指令来监听 DOM 事件,例如点击事件。以下是一个简单的事件处理例子:
<div id="app">
<button v-on:click="reverseMessage">Reverse Message</button>
<h1>{{ message }}</h1>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
methods: { // 定义 Vue 实例的方法
reverseMessage: function () {
// 使用 JavaScript 的字符串方法反转 message
this.message = this.message.split('').reverse().join('');
}
}
});
在这个例子中,我们使用 v-on:click
指令监听按钮的点击事件,并在点击时调用 reverseMessage
方法。reverseMessage
方法将 message
字符串反转。
8. 计算属性
计算属性是一种依赖其他属性的值进行计算的属性。它们是 Vue.js 提供的一种优雅的处理方式,具有缓存功能,只有当依赖的值发生变化时,计算属性才会重新计算。以下是一个简单的计算属性示例:
<div id="app">
<h1>{{ reversedMessage }}</h1>
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js!'
},
computed: { // 定义计算属性
reversedMessage: function () {
// 使用 JavaScript 的字符串方法反转 message
return this.message.split('').reverse().join('');
}
}
});
在这个例子中,我们使用计算属性 reversedMessage
来实现 message
的反转。与上一个例子中的方法不同,计算属性具有缓存功能,只有当 message
值发生变化时,计算属性才会重新计算。
9. 构建 Vue 工程
在开发完成后,你需要构建项目,生成可供生产环境部署的静态文件。运行以下命令:
npm run build
构建完成后,项目文件夹下会生成一个 dist
文件夹,其中包含了构建后的静态文件。你可以将这些文件部署到任何支持静态文件托管的服务器上。
10.创建一个Vue工程完整流程
在这里演示一个创建Vue工程的完整流程,作者使用的是Vue3。
现在一个文件夹中创建Vue工程,例如在vue文件夹中创建**(记得开启管理员模式)**:
E:\vue>vue create my-vue-app
之后你会在该文件夹底下发现一个my-vue-app
的文件夹。
将文件夹中的一些文件进行修改,其中components/
文件夹只保留MyCounter.vue
文件。
文件结构
my-vue-app/
|-- public/
| |-- index.html
|-- src/
| |-- components/
| |-- MyCounter.vue
| |-- App.vue
| |-- main.js
修改文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Counter App</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
main.js
import { createApp } from "vue";
import App from "./App.vue";
const app = createApp(App);
app.mount("#app");
App.vue
<template>
<div id="app">
<h1>Vue Counter App</h1>
<MyCounter />
</div>
</template>
<script>
import MyCounter from "./components/MyCounter.vue";
export default {
name: "App",
components: {
MyCounter,
},
};
</script>
<style>
#app {
text-align: center;
}
</style>
MyCounter.vue
<template>
<div class="my-counter">
<h2>{{ count }}</h2>
<button @click="increment">+</button>
<button @click="decrement">-</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
};
</script>
<style scoped>
.my-counter {
display: inline-block;
}
button {
margin: 0 5px;
}
</style>
修改完后保存工程,在.\vue\my-vue-app
底下npm run serve,例如:
E:\vue\my-vue-app>npm run serve
出现以下内容说明搭建成功:
DONE Compiled successfully in 2671ms 17:39:34
App running at:
- Local: http://localhost:8080/
- Network: unavailable
Note that the development build is not optimized.
To create a production build, run npm run build.
接下来浏览http://localhost:8080/
网页即可。
效果如下: