前言
本教程适用于只掌握 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/[email protected]/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，则disabledattribute 甚至不会被包含在渲染出来的<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 的知识点也将在更贴合真实开发的单文件组件方式下讲解。