一、vue 的简介
1.1 使用 JQuery 的复杂性问题
- 使用 JQuery 进行前后端分离开发，既可以实现前后端交互 (ajax) ，又可以完成数据渲染
- 存在的问题： JQuery 需要通过 HTML 标签拼接、DOM 节点操作完成数据的显示，开发效率低且容易出错，渲染效率较低
- vue 是继 JQuery 之后的又一优秀的前端框架：专注于前端数据的渲染 ———— 语法简单、渲染效率高
1.2 VUE 简介
1.2.1 前端框架
- 前端三框架：HTML、CSS、JavaScript
- HTML 决定网页结构
- CSS 决定显示效果
- JavaScript 决定网页功能 (交互、数据显示)
- UI 框架：(只提供样式、显示效果)
- Bootstrap
- amazeUI
- Layui
- JS 框架：
- JQuery (JQuery UI)
- React
- angular
- nodejs ---- 后端开发
- vue 集各种前端框架的优势发展而来
1.2.2 MVVM
项目结构经历的三个阶段：
后端 MVC ：可以理解为单体结构，流程控制是由后端控制器来完成
前端 MVC ：前后端分离开发，后端只负责接收响应请求
MVVM是MVC的增强版，实质上和MVC没有本质区别，只是代码的位置变动而已
MVVM 前端请求后端接口，后端返回数据，前端接收数据，并将接收到的数据设置为 “VM”，HTML 从 vm 取值
- M model 数据模型，指的是后端接口返回的数据
- V view 视图
- VM ViewModel 视图模型 数据模型与视图之间的桥梁，后端返回的 model 转换前端所需的 vm，视图层可以直接从 vm 中提取数据
Model-View-ViewModel —— 概念图
二、 vue 入门使用
Vue (读音 /vju/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
2.1 vue 的引入
- 离线引用：下载 vue 的 js 文件，添加到前端项目，在网页中通过 script 标签引用 vue.js 文件
- CDN 引用：
直接使用在线 CDN 的方式引入
2.2 入门案例 – Hello World
文本：数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
{{message}}
- 创建一个 HTML 文件
- 引入 vue.js 文件
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
示例：
从 0 开始： {{message}}
<script type="text/javascript"> var vm = new Vue({ el: '#app-1', data: { message: 'Hello World!' } }) </script>
Mustache 标签将会被替代为对应数据对象上 message property 的值。无论何时，绑定的数据对象上 message property 发生了改变，插值处的内容都会更新。
三、 vue 的语法
3.1 基本类型数据和字符串
<div id="app-2"> {{code}} 从 0 开始： {{message}} </div> <script type="text/javascript"> var vm = new Vue({ el: '#app-2', data: { code: 1_3_3, message: 'Hello World!' } }) </script>
3.2 对象类型数据
- 支持 ognl 语法
学号：{{stu.stuNum}}
姓名：{{stu.stuName}}
- 性别：{{stu.stuGender}}
年龄：{{stu.stuAge}}
3.3 条件 v-if
v-if : 用来控制切换一个元素是否显示 （底层控制是 DOM 元素，操作 DOM）
注：在浏览器中网页打开这个文件 F12，从标签上可以看到没有 stu.stuGender == 'F' 对应的元素。即条件不成立，网页不会渲染该 DOM，连标签都不会有。
<div id="app-4"> 学号：{{stu.stuNum}} <br /> 姓名：{{stu.stuName}} <br /> 性别： <label v-if="stu.stuGender == 'M'"> 男 </label> <label v-if="stu.stuGender == 'F'"> 女 </label> <br /> 年龄：{{stu.stuAge}} </div> <script type="text/javascript"> var vm = new Vue({ el: '#app-4', data: { stu: { stuNum: '10001', stuName: '张三', stuGender: 'M', stuAge: 20 } } }) </script>
3.4 循环 v-for
v-for指令基于一个数组来渲染一个列表。在
v-for块中，我们可以访问所有父作用域的 property。v-for还支持一个可选的第二个参数，即当前项的索引。
<div id="app-5"> <table border="1" cellspacing="0" width="400"> <tr> <th>序号</th> <th>学号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> <tr v-for="(stu, index) in stus"> <td>{{index + 1}}</td> <td>{{stu.stuNum}}</td> <td>{{stu.stuName}}</td> <td> <table v-if="stu.stuGender == 'M'"> 男 </table> <table v-if="stu.stuGender == 'F'"> 女 </table> </td> <td>{{stu.stuAge}}</td> </tr> </table> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app-5', data: { stus: [ { stuNum: '10001', stuName: '张三', stuGender: 'M', stuAge: 20 }, { stuNum: '10002', stuName: '李四', stuGender: 'M', stuAge: 23 }, { stuNum: '10003', stuName: '郑红', stuGender: 'F', stuAge: 19 } ] } }) </script>
3.5 绑定标签属性 v-bind
- v-bind:属性名 缩写：
:属性名
</tr> </table>
| 序号 | 学号 | 姓名 | 性别 | 年龄 | |
| {{index + 1}} | {{stu.stuNum}} | {{stu.stuName}} | 男
|
{{stu.stuAge}} |
3.6 表单标签的双向绑定 v-model
- 只能使用在表单输入标签
- v-model:value 可以简写为 v-model
- 双向绑定：{{message}}
四、vue 实例
每个使用 vue 进行数据渲染的网页文档都需要创建一个 vue 实例 — — ViewModel
4.1 vue 实例的生命周期
vue 实例生命周期 — — vue 实例从创建到销毁的过程
- 创建 vue 实例 （初始化 data，加载 el）
- 数据挂载 （将 vue 实例 data 中的数据渲染到网页 HTML 标签）
- 重新渲染 （当 vue 的 data 数据发生变化，会重新渲染到 HTML 标签）
- 销毁实例
创建对象 ---- 属性初始化 ---- 获取属性值 ----- GC 回收
4.2 钩子函数
为了便于开发者在 vue 实例生命周期的不同阶段进行特定的操作，vue 在生命周期四个阶段的前后分别提供了一个函数，这个函数无需开发者调用，当 vue 实例到达生命周期的指定阶段会自动调用对应的函数。
<div id="app-8"> <label v-once>{{message}}</label><br /> <label>{{message}}</label><br /> <input type="text" v-model="message"> </div> <script type="text/javascript"> var vm = new Vue({ el: '#app-8', data: { message: 'Hello World!!' }, beforeCreate: function () { // 1. data 初始化之前执行，不能操作 data }, create: function () { // 2. data 初始化之后执行，模板加载之前，可以修改 / 获取 data 中的值 console.log(this.message); // this.message = 'Hello World!! create(）'; }, beforeMount: function () { // 3. 模板加载之后，数据初始渲染（挂载）之前，可以修改 / 获取 data 中的值 // this.message = 'Hello World!! beforeMount'; }, mounted: function () { // 4. 数据初始渲染（挂载）之后，可以对 data 中的变量进行修改，但是不会影响 v-once 的渲染 // this.message = "Hello World!! mounted"; }, beforeUpdate: function () { // 5. 数据渲染之后，当 data 中的数据发生变化触发重新渲染，渲染之前执行此函数 console.log("---" + this.message); this.message = 'Hello World!! beforeUpdate'; }, update: function () { // 6. data 数据被修改之后，重新渲染到页面之后 // this.message = "Hello World!! update"; }, beforeDestroy: function () { // 7. 实例销毁之前 }, destroy: function () { // 8. 实例销毁之后 } }) </script>
