快速入手Vue框架

1.Vue的介绍

（1）Vue是一套构建用户界面的渐进式前端框架。

（2）只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。

（3）通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。

（4）特点

? ? ? ? ? ? ? * 易用：在有HTMLCSSJavaScript的基础上，快速上手。

? ? ? ? ? ? ? * 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

? ? ? ? ? ? ? * 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。

2.Vue的快速入门

2.1.编写步骤：

（1）下载和引入vue.js文件。

（2）编写入门程序。

? ? ? ? ? ? ? ? 视图：负责页面渲染，主要由HTML+CSS构成。

? ? ? ? ? ? ? ? 脚本：负责业务数据模型（Model）以及数据的处理逻辑。

2.2.代码：

2.3小结：

（1）Vue是一套构建用户界面的渐进式前端框架。

（2）Vue的程序包含视图和脚本两个核心部分。

（3）脚本部分

? ? ? ? ?* Vue核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

? ? ? ? ?* 选项列表

? ? ? ? ? ? ? ?* el：接收获取的元素。

? ? ? ? ? ? ? ?* data：保存数据。

? ? ? ? ? ? ? ?* methods：定义方法。

? ? ? ? ?* 视图部分

? ? ? ? ? ? ? ?* 数据绑定：{{变量名}}

3.Vue 常用指令

3.1.指令介绍

（1）指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。

（2）使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式

（3）常用指令：

指令	作用
v-html	把文本解析为 HTML 代码
v-bind	为 HTML 标签绑定属性值
v-if	条件性的渲染某元素，判定为真时渲染,否则不渲染
v-else	条件性的渲染
v-else-if	条件性的渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-for	列表渲染，遍历容器的元素或者对象的属性
v-on	为 HTML 标签绑定事件
v-model	在表单元素上创建双向数据绑定

3.2.代码形式介绍

（1）文本插值：v-html：把文本解析为 HTML 代码。

（2）绑定属性：v-bind：为 HTML 标签绑定属性值。

（3）条件渲染：

• v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
• v-else：条件性的渲染。
• v-else-if：条件性的渲染。
• v-show：根据条件展示某元素，区别在于切换的是display属性的值。

（4）列表渲染：v-for：列表渲染，遍历容器的元素或者对象的属性。

（5）事件绑定：v-on：为 HTML 标签绑定事件。

（6）表单绑定：v-model：在表单元素上创建双向数据绑定。

双向数据绑定：

? ? ? ?当原始数据产生更改，页面数据也会随之改变。

? ? ? ?页面数据更改时，原始数据也随之而变。

MVVM模型(ModelViewViewModel)：是MVC模式的改进版：

? ? ? 在前端页面中，JS对象表示Model，页面表示View，两者做到了最大限度的分离。 将Model和View关联起来的就是ViewModel，它是桥梁。ViewModel负责把Model的数据同步到View显示出来，还负责把View修改的数据同步回Model。

4.Vue 自定义组件

（1）概念：本质上，组件是带有一个名字且可复用的 Vue 实例。

（2）定义格式：

? ? ? ? ?Vue.component(组件名称, {

? ? ? ? ?props:组件的属性,

? ? ? ? ?data: 组件的数据函数,

? ? ? ? template: 组件解析的标签模板

? ? ? ? })

（3）代码形式介绍：

5.Vue的生命周期

（1）生命周期：一个vue实列，在beforeCreate（创建前）阶段，会进行事件及生命周期的初始化，在created（创建后）阶段，进行注入以及校验；在beforeMount（载入前）阶段，进行判断是否指定了“el”选项，否，则查看当前是否调用vm.$mount(el)函数，当前函数与“el”功能一致，都是用来去解析元素的，如果没有调用，则当前元素无法解析，导致程序无法继续执行；而当前有调用vm.$mount(el)函数或者指定了“el”选项，则接着进行判断是否指定template模板选项，是，会将template进行编译到render函数中，否将el外部的HTML作为template进行编译；在mounted（载入后）阶段，进行vm.$el的创建，并用其替换掉“el”，当前整个vue已经挂载完毕，如果在没有数据修改的状态下，紧接着是进入到销毁阶段，在有数据修改的状态下，会进入beforeUpdate（更新前）阶段，进行虚拟DOM重新渲染并应用更新；接着进入updated（更新后）阶段；当调用vm.$destroy()函数时，进入beforeDestroy（销毁前）阶段；进行绑定解除以及销毁子组件和事件监听器，最后销毁完毕destroyed（销毁后）阶段。

（2）生命周期演示效果