Vue.js基础
站长
· 阅读数 6
简介
Vue.js 是一个渐进式 JavaScript 框架，用于构建用户界面。Vue 的核心库只关注视图层，易于上手，同时也能够配合其他库或现有项目使用。Vue.js 的设计目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
安装
Vue.js 可以通过多种方式安装，包括直接在 HTML 文件中使用 <script> 标签引入，使用包管理工具如 npm 或 Yarn，或者通过 Vue CLI 脚手架项目。
直接在 HTML 中使用
在你的 HTML 文件中，通过 <script> 标签直接引入 Vue.js 的 CDN 链接。
<!DOCTYPE html>
<html>
<head>
<title>Vue.js Example</title>
<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
// 在 Vue.js 中，一个应用实例是通过 `new Vue()` 创建的
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
使用 npm 或 Yarn
如果你正在使用模块打包工具，可以通过 npm 或 Yarn 安装 Vue.js。
npm install vue
# 或者
yarn add vue
然后，在你的 JavaScript 文件中引入并使用 Vue.js：
import Vue from 'vue';
new Vue({
el: '#app',
data: {
message: 'Hello Vue with npm/Yarn!'
}
});
使用 Vue CLI
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：
- 通过
@vue/cli实现的项目脚手架。 - 通过
@vue/cli和@vue/cli-service-global实现的零配置原型开发。
安装 Vue CLI：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
创建一个新的 Vue.js 项目：
vue create my-project
进入项目目录并运行开发服务器：
cd my-project
npm run serve
# OR
yarn serve
核心概念
模板语法
Vue.js 使用基于 HTML 的模板语法，允许你声明式地将 DOM 绑定到底层 Vue 实例的数据。模板语法主要有以下几种：
- 文本插值：
{{ message }}用于在 HTML 中输出 Vue 实例的数据。 - 属性绑定：
<img :src="image">使用冒号表示属性值是一个 JavaScript 表达式。 - 事件绑定：
<button @click="doSomething">监听 DOM 事件并在触发时执行 JavaScript 代码。
响应式数据
Vue 实例的 data 选项是一个对象，Vue 会递归将 data 的属性转换为 getter/setter，从而使数据对象的属性能够响应数据变化。
var data = {
message: 'Hello Vue!'
};
var vm = new Vue({
data: data
});
指令（Directives）
Vue.js 提供了一些内置的指令，如 v-model、v-if、v-for 等，用于执行常见的任务。
- v-model：在表单元素上创建双向数据绑定。
- v-if/v-else：条件性地渲染元素。
- v-for：基于源数据多次渲染一个元素或模板。
组件
Vue 应用是由组件树组成的，每个组件实例都有自己的作用域。一个组件可以包含 HTML、CSS 和 JavaScript。
Vue.component('todo-item', {
props: ['todo'],
template: '<li>这是个待办项</li>'
});
new Vue({
el: '#app',
data: {
groceryList: [
{ id: 1, task: '学习 Vue.js' },
{ id: 2, task: '阅读文档' }
]
}
});
结语
Vue.js 是一个灵活且强大的框架，适合构建各种规模的应用。通过理解其核心概念和使用方式，你可以快速上手并构建出高效、可维护的前端应用。