一、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>

序号

学号

姓名

性别

年龄

男

女

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>

千锋 Vue 详细笔记整理 1