-
第一章
入门
在学习
Vue
前，您应该有
< br>HTML
，
CSS
和
JavaScript
的基本知识。本教材使
用<
/p>
WebStrom
工具开发并调试，案例源码基于
Vue 2.6.1
版本测试，样式表使
用
LayUI
样式实现。
本章要点
?
了解什么是
?
了解
Vu
e
中的
MVVM
模式
< br>
?
Vue
开发环境的准备与配置
?
了解
Vu
e
项目目录结构
?
实例化
V
ue
对象、数据与方法
?
通过综合实例学习
Vue
原理与开发过程
1.1 Vue
简述
1.1.1
什么是
的作者为
Evan
You
（尤雨溪），曾任职于
Google Creative
Lab
，虽然是
Vue
是一个个人项目
，但在发展前景上个人认为绝不输于
Google
的
和
Facebook
的<
/p>
。
（读音
/vju
?
/,
类似于
view
）是一套构建用户界
面的渐进式框架
,
是当下很
火的一套响
应式系统的
JavaScript MVVM
库，它是以数据驱
动和组件化的思想构建的。类
似其他前端开发库也有很多，比如
，
等。
是前端主流框架中
的集大成者，它吸取了
，
的经验，支持各种模式写法，入门非常简
单，相比于
和
，
提供了更加简洁、更易于理解的
API
，使得
我们能够快速地上手并使用<
/p>
。
1
/
23
<
/p>
自身不是一个全能框架，它只聚焦于视图层，
采用自底向上增量开
发的设
计
，因此它非常容易学习，非常容易与其它库或已有项目
整合。另一方面，在与相关工具
和支持库一起使用时，
也能完美地驱动复杂的单页应用。
Vue
的目标是通过尽可能简单的
API
实现响应的数据绑定和组合的视图组
件。
如果你之前已经习惯了用
jQuery
操作
DOM
，学习
时请先抛开手动操作
DOM
的
思维，因为
是数据驱动的，你无需手动操作
DOM
。它通过一些特殊的
HTML
语法，
将
DOM
和数据绑定
起来，一旦你创建了绑定，
DOM
将和数据保持同步，每当变更
了数据，
DOM
也会相应地更新。
1.1.2
的特性
1.
遵循
MVVM
模式（
< br>m->model(
数据对象
)
v->view(
视图
)
vm->view
model
）；
2.
编码简洁，体积小，运行效率高，适合移动端
/PC<
/p>
端；
3.
它本
身只关注
UI
，可以轻松引入
Vue<
/p>
插件或其他第三方库开发项目；
Vue
扩展插件：
vue-cli:Vue
脚手架
vue-
resource(axios):ajax
请求
vue-router:
路由
vuex:
状态管理
vue-
lazyload:
图片懒加载
vue-
scroller:
页面滑动相关
mint-ui:
基于
Vue
的
UI
组件库（移动端）
2
/
23
1.1.3 Vue
优势
1.
可进行组件化开发，使代码量减少；
2.
可对数据进行双向绑定；
3.
编写出来界面效果本身是响应式的，使网页能显示好看效果；
4.
实现网络页面之间跳转，与
Vue
路由相比，超链接不会页面刷新；
1.1.4
为什么使用
Vue
由于近两年前端技术变革速度太快，
vue
不论针对
web
项目开发，网站制
作，
还是
app
，小程序开发，都越来越流行，其便捷性及易用程度
都让你不得
不考虑去学习。如果仅仅还是采用传统的各种开源代码建站仿站，显然你的技
术已经跟不上了，如果你开发的项目数据交互较多，并且前后端分离明显，那
么
vue
将会是你未来技术增长的不二选择。
简单来说，在传统
web
开发中，我们搭建项目都以
html
结构为基础，然后
通过
jquery
或者
js
来添加各种特效功能，需要去选中每一个元素进行命令。
< br>这些内容在简单的项目中或者不变的项目中还能应付得来，一旦项目改动或者
项目
工程较大，代码的修改将是复杂繁琐的，而这时候如果用了
，这
些
问题都不复存在。比如一些单网页制作成的应用程序，一般涉及到数据交互的
内容都很多，而应用了
Vue
之后也将大大缩减
工作量。
再简单来说，当前端页面和后端数据做一些操作的时
候，可以通过
AJAX
请
求对后端做数
据持久化，不需要刷新整个页面，只需要改动
DOM
里需要改动
的
那部分数据即可。
1.2
MVVM
模式
MVVM
是
Model-View-
ViewModel
的简写。它本质上就是
MVC
的改进版。
MVVM
就是将其
中的
View
的状态和行为抽象化，让我们将视图
UI
和业务逻辑分开。
3
/
23
下图
1-1
不仅概括了
MVVM
模式（
Model-View-ViewModel
），还描述了在
中
ViewMode
l
是如何和
View
以及
Model
进行交互的。
图
1-1
MVVM
模式交互图
ViewMod
el
是
的核心，它是一个
Vue
实例。
Vue
实例是
作用于某一
个
HTML
元素上的，这个
元素可以是
HTML
的
body
元素，也可以是指定了
id
的
某个元素。
当创建了
Vie
wModel
后，双向绑定是如何达成的呢？
首先，我们将上图
1-1
中的
DOM Listeners
和
Data Bindings<
/p>
看作两个工
具，它们是实现双向绑定的关键。
从
View
层看，
ViewModel
中的
DOM Listener
s
工具会帮我们监测页面上
DOM
元素
的变化，如果有变化，则更改
Model
中的数据；
从
Model
层看，当
我们更新
Model
中的数据时，
Da
ta Bindings
工具会帮
我们更新页面中的
DOM
元素。
专家提示
Vue
必须在
ES5
版本以上的环境下使用，
一些不支持
ES5
的旧浏览器无法运行
Vue
。
4
/
23
1.3
的下载及使用
安装步骤：
1.
查看
npm
的版本号并安装
Vue
2.
安装脚手架
vue-cli
3.
创建一个基于
webpack
模板的新项目
4.
使用
cd
命令进入项目
my-project
中，并安装项目依赖项
5.
使用
cnpm run dev
运行项目
6.
成功执行以上命令后访问
第一步：首先安装
，搭建
Vue
环境
访问
< br>
官网（
/en/download/
）进行安装包下载。
下载成功
之后运行安装程序，进行安装。建议不要安装在系统盘（如
C
：
）。
如果是用安装程序进行安装，在安装过程中会自动进行<
/p>
Nodejs
环境变量的
配置，如果是通
过其他方式进行安装，可能需要手动配置环境变量。
5
/
23
完成
安装后，可以打开命令行，直接使用
node
命令，进入
交互模
式。然后可以输入
(
！
测试安装。
< br>
第二步：使用
Npm
安装
Vue
第三
步：安装
Webpack
模板：
npm
install webpack -g
第四步：安装
Vue
脚手架：
npm install
vue-cli -g
6
/
23
vue-cli
脚手架是
提供的一个官方命令行工具，用于快速搭建大型
单页应用。
< br>
第五步：创建一个基于
We
bpack
模板的新项目，新项目名称
myproject
。
第六步：进
入
myproject
项目中，并安装项目依赖项
第七步：使用
npm
run dev
运行项目
7
/
23
第八
步：打开浏览器，输入
http://localhost:8080/#/
进行测试
如果看到下图
1-2
结果，说明项目环境已经创建完成。
图
1-2
Vue
测试成功页面
1.4
使用
Webstorm
创建并且运行
vue
项目
1
、打开
WebStorm
工具
8
/
23
新建
工程
然后一路
Next
< br>，看到下图工程目录结构
9
/
23
<
/p>
使用
webstorm
，调出控制台
输入
npm
run dev
10
/
23
通过测试正常显示
但是每次都打开命令窗口比较麻烦，
可以在
webstorm
内进行配置，
从
webstorm
内启动
这
样更加的方便，那么怎样在
Webstorm
中快速启动
Vue
项目配置，请看下面
启动配置。
Webstorm
快速启
动
Vue
项目配置：
1
、点击右上角，添加
npm
配置。
11
/
23
-
-
-
-
-
-
-
-
-
上一篇：45套语文答案
下一篇：初中三年语文词语总汇