前言
本教程适用于只掌握 HTML、CSS 以及 JS 的前端初学者,内容包括但不限 Vue 的基本知识、Vue 的生态系统、涉及使用到的业内通用工具等。
1、Vue简介
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,何为渐进式框架,即不需要你完全掌握它的全部功能特性后才能去使用,只需了解一部分基础的用法便可将其运用在我们的实际工程中,后续再逐步逐层的学习来掌握更佳的实践方案。所以它和其它大型框架不同的是,Vue 可以自底向上逐层应用。Vue 受到 M-V-VM 思想的启发,其核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
MVVM介绍
MVVM 是
Model-View-ViewModel
的缩写,它是一种基于前端开发的架构模式,其核心是提供对 View 和 ViewModel 的双向数据绑定,这使得 ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。
-
Model
:数据模型(vue对象的data属性里面的数据,这里的数据要显示到页面上)。 -
View
:就是用户看到的视图(vue中数据要显示的HTML页面,在vue中,也称之为“视图模板” )。 -
ViewModel
:数据和视图的中转站,业务逻辑的处理中心(vue中编写代码时的vm对象,它是vue.js的核心,负责连接 View 和 Model数据,保证视图和数据的一致性)。
2、初步实践
我们先通过script标签引入Vue来进行快速体验:
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
每个 Vue 应用都是通过用
Vue
函数创建一个新的 Vue 实例开始的:
var vm = new Vue({
// 选项
})
当创建一个 Vue 实例时,你可以传入一个选项对象。后续课程主要描述的就是如何使用这些选项来创建你想要的行为。作为参考,你也可以在官方API 文档中浏览完整的选项列表。
体验响应式
我们先准备如下代码:一个id为
root
的div
元素,创建带有el
选项和data
选项的Vue实例。我们需要将Vue中的数据对象绑定到我们的视图中,数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
// 视图部分,其中data对象中的property使用“Mustache”语法插入到我们需要展示的地方
<div id='root'>
<span>姓名</span>:
<span>{{name}}</span>
<br/>
<span>年龄</span>:
<span>{{age}}</span>
</div>
// 创建Vue实例
let vm = new Vue({
el: '#root', // Vue实例的挂载目标,可以是 CSS 选择器,也可以是一个HTMLElement实例。
data: {
name: '键盘侠',
age: 12
}
})
当一个 Vue 实例被创建时,它将
data
对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
注意: property 必须在
data
对象上存在才能让 Vue 将它转换为响应式的。
模板插值
v-text
当我们想通过通过一个变量去响应式的控制视图里展示的文本内容,除了上述“Mustache”语法的形式,也可以使用
v-text
指令。即在想要替换内容的元素上加上v-text
属性,并给定其绑定的 property。
// 视图部分,添加性别展示代码
<span>性别</span>:
<span v-text='gender'></span>
// 在`data` 对象中添加gender
let vm = new Vue({
el: '#root',
data: {
name: '键盘侠',
age: 12,
gender: '男'
}
})
需要注意的是,使用
v-text
指令会直接覆盖元素的textContent
,如需部分更新还是需要使用{{ Mustache }}
的方式。
v-html
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用
v-html
指令:
<p>使用 Mustaches: {{ rawHtml }}</p>
<p>使用 v-html 指令: <span v-html="rawHtml"></span></p>
v-bind
Mustache 语法不能作用在 HTML 属性上,遇到这种情况应该使用
v-bind
指令。对于布尔 attribute (它们只要存在就意味着值为true
),v-bind
工作起来略有不同,在这个例子中:
<div id="root">
<div v-bind:id="dynamicId">动态属性</div>
<button v-bind:disabled="isButtonDisabled">受控按钮</button>
</div>
// 被绑定元素的 attribute 将在4秒后改变
let vm = new Vue({
el: '#root',
data: {
dynamicId: 'id1',
isButtonDisabled: false
}
})
let count = 3
const timerId = setInterval(() => {
console.log(count)
if(!count--) {
vm.isButtonDisabled = true
vm.dynamicId = 'id-B'
clearInterval(timerId)
}
}, 1000)
如果
isButtonDisabled
的值是null
、undefined
或false
,则disabled
attribute 甚至不会被包含在渲染出来的<button>
元素中。
使用 JavaScript 表达式
迄今为止,在我们的模板中,我们一直都只绑定简单的 property 键值。但实际上,对于所有的数据绑定,Vue.js 都提供了完全的 JavaScript 表达式支持。
{{ number + 1 }}
{{ gender ? '男' : '女' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + dynamicId"></div>
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效。
<!-- 这是语句,不是表达式 -->
{{ var a = 1 }}
<!-- 流程控制也不会生效,请使用三元表达式 -->
{{ if (ok) { return message } }}
内容预告
本章我们对 Vue 进行了介绍以及初步的使用,快速的体验了Vue提供给我们的基础功能。但在真实的Vue开发中,我们往往会使用到
nvm
、npm
、vue-devtools
以及vue-cli
等业内工具来帮助我们进行项目工程的搭建、管理、调试、打包等。所以下一章节将以搭建一个 Vue 项目实操为例,介绍在 Vue 工程中用到的工具以及如何使用。后续 Vue 的知识点也将在更贴合真实开发的单文件组件方式下讲解。