✅P36-44_前端基础-VUE

gong_yz大约 32 分钟

一、Node.js

前端开发，少不了 node.js；Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 http://nodejs.cn/api/open in new window

我们关注与 node.js 的 npm 功能就行； NPM 是随同 NodeJS 一起安装的包管理工具，JavaScript-NPM，Java-Maven；

官网下载安装 node.js，并使用 node -v 检查版本
配置 npm 使用淘宝镜像： npm config set registry http://registry.npm.taobao.org/
大家如果 npm install 安装依赖出现 chromedriver 之类问题，先在项目里运行下面命令
- npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
- 然后再运行 npm instal

二、Vue

1、MVVM 思想

M：即 Model，模型，包括数据和一些基本操作

V：即 View，视图，页面渲染结果

VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）

在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model 渲染到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到Model 中。

而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心Model 和 View 之间是如何互相影响的：

只要我们 Model 发生了改变，View 上自然就会表现出来。
当用户修改了 View，Model 中的数据也会跟着改变。

把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作Model 上。

2、Vue 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

官网：https://cn.vuejs.org/open in new window

参考：https://cn.vuejs.org/v2/guide/open in new window

Git 地址：https://github.com/vuejsopen in new window

尤雨溪，Vue.js 创作者，Vue Technology 创始人，致力于 Vue 的研究开发。

3、入门案例

3.1 安装

官网文档提供了 3 中安装方式：

直接 script 引入本地 vue 文件。需要通过官网下载 vue 文件。
通过 script 引入 CDN 代理。需要联网，生产环境可以使用这种方式
通过 npm 安装。这种方式也是官网推荐的方式，需要 nodejs 环境。

本课程就采用第三种方式

3.2 创建示例项目

1、新建文件夹 hello-vue，并使用 vscode 打开

2、使用 vscode 控制台，npm init -y；项目会生成 package-lock.json 文件，类似于 maven 项目的 pom.xml 文件。

3、使用 npm install vue，给项目安装 vue；项目下会多 node_modules 目录，并且在下面有一个 vue 目录。

3.3 vue 声明式渲染

在 index.html 中，我们编写一段简单的代码。 h2 中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。

页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <h2>
            {{name}}，非常帅！！！
        </h2>
    </div>

   

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "里斯"
            }
        });
    </script>
</body>

</html>

首先通过 new Vue()来创建 Vue 实例

然后构造函数接收一个对象，对象中有一些属性：

el：是 element 的缩写，通过 id 选中要渲染的页面元素，本例中是一个div
data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中

页面中的h2元素中，我们通过的方式，来渲染刚刚定义的name 属性。

打开页面查看效果：

更神奇的在于，当你修改 name 属性时，页面会跟着变化：

3.4 双向绑定

我们对刚才的案例进行简单修改：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <input type="text" v-model="num" />

        <h2>
            {{name}}，非常帅！！！有{{num}}个人为他点赞！！！
        </h2>
    </div>



    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "里斯",
                num: 1
            }
        });
    </script>
</body>

效果：

我们修改表单项，num 会发生变化。我们修改 num，表单项也会发生变化。为了实时观察到这个变化，我们将 num 输出到页面。

我们不需要关注他们为什么会建立起来关联，以及页面如何变化，我们只需要做好数据和视图的关联即可（MVVM）

3.5 事件处理

给页面添加一个按钮：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <input type="text" v-model="num" />
        <button v-on:click="num++">关注</button>
        <h2>
            {{name}}，非常帅！！！有{{num}}个人为他点赞！！！
        </h2>
    </div>



    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                name: "里斯",
                num: 1
            }
        });
    </script>
</body>

这里用v-on指令绑定点击事件，而不是普通的onclick，然后直接操作num

普通 click 是无法直接操作 num 的。

未来我们会见到更多 v-xxx，这些都是 vue 定义的不同功能的指令。

简单使用总结：

使用 Vue 实例管理 DOM
DOM 与数据/事件等进行相关绑定
我们只需要关注数据，事件等处理，无需关心视图如何进行修改

4、概念

4.1 创建 Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

let app = new Vue({
});

在构造函数中传入一个对象，并且在对象中声明各种 Vue 需要的数据和方法，包括：

el
data
methods

等等接下来我们一一介绍。

4.2 模板或元素

每个 Vue 实例都需要关联一段 Html 模板，Vue 会基于此模板进行视图渲染。

我们可以通过 el 属性来指定。

例如一段 html 模板：

<div id="app">

</div>

然后创建 Vue 实例，关联这个 div

let vm = new Vue({
	el: "#app"
})

这样，Vue 就可以基于 id 为app的 div 元素作为模板进行渲染了。在这个div 范围以外的部分是无法使用 vue 特性的。

4.3 数据

当 Vue 实例被创建时，它会尝试获取在 data 中定义的所有属性，用于视图的渲染，并且监视 data 中的属性变化，当 data 发生改变，所有相关的视图都将重新渲染，这就是响应式系统。

html：

<div id="app">
	<input type="text" v-model="name" />
</div>

JS:

        let vm = new Vue({
            el: "#app",
            data: {
                name: "刘德华"
            }
        })

name 的变化会影响到input的值
input 中输入的值，也会导致 vm 中的 name 发生改变

4.4 方法

Vue 实例中除了可以定义 data 属性，也可以定义方法，并且在 Vue 实例的作用范围内使用。

Html：

<div id="app">
	{{num}}
	<button v-on:click="add">加</button>
</div>

JS：

let vm = new Vue({
    el: "#app",
    data: {
        num: 0
    },
    methods: {
        add: function () {
            // this 代表的当前 vue 实例
            this.num++;
        }
    }
})

4.5 安装 vue-devtools 方便调试

将软件包中的 vue-devtools 解压。打开 chrome 设置->扩展程序

开启开发者模式，并加载插件

打开浏览器控制台，选择 vue

4.6 安装 vscode的vue插件

安装这个插件就可以有语法提示。

5、指令

什么是指令？
指令 (Directives) 是带有 v- 前缀的特殊特性。
指令特性的预期值是：单个 JavaScript 表达式。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。

例如我们在入门案例中的 v-on，代表绑定事件。

5.1 插值表达式

5.1.1 花括号

格式：

说明：

该表达式支持 JS 语法，可以调用 js 内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：let a = 1 + 1;
可以直接获取 Vue 实例中定义的数据或函数

5.1.2 插值闪烁

使用方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后刷新页面，试试看刚才的案例：

5.1.3 v-text 和 v-html

可以使用 v-text 和 v-html 指令来替代{

说明：

v-text：将数据输出到元素内部，如果输出的数据有 HTML 代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有 HTML 代码，会被渲染

示例：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        v-text:<span v-text="hello"></span> 

        v-html:<span v-html="hello"></span>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                hello: "<h1>大家好</h1>"
            }
        })
    </script>
</body>

效果：

并且不会出现插值闪烁，当没有数据时，会显示空白或者默认数据。

5.2 v-bind

html 属性不能使用双大括号形式绑定，我们使用 v-bind 指令给 HTML 标签属性绑定值；而且在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。

5.2.1 绑定class和style

v-bind:style 的对象语法十分直观，看着非常像 CSS，但其实是一个JavaScript 对象。style属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，这种方式记得用单引号括起来) 来命名。

例如：font-size-->fontSize

示例1：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                activeColor: 'red',
                fontSize: 30
            }
        })
    </script>

</body>

结果：<div style="color:red;font-size:30px;"></div>

示例2：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <span v-bind:class="{isActive: true,'text-danger':hasError}" v-bind:style="{color:color}">你好</span>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                isActive: true,
                hasError: false,
                color: "red"
            }
        })
    </script>

</body>

5.2.2 绑定其他任意属性

示例：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }" v-bind:user="userName">
    </div>
    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                activeColor: 'red',
                fontSize: 30,
                userName: 'zhangsan'
            }
        })
    </script>

</body>

效果：<div id="app" user="zhangsan" style:"color:red; font-size: 30px;"></div>

5.2.3 v-bind 缩写

<div id="app" :style="{ color: activeColor, fontSize: fontSize +'px' }" :user="userName">
</div>

5.3 v-model

刚才的 v-text、v-html、v-bind 可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的 v-model 是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model 的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue 中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

示例：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <input type="checkbox" v-model="language" value="JAVA" /> JAVA 

        <input type="checkbox" v-model="language" value="PHP" /> PHP 

        <input type="checkbox" v-model="language" value="GO" /> GO 

        <h2>您选择了：{{language.join(',')}}</h2>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                language: []
            }
        });
    </script>

</body>

多个CheckBox对应一个 model 时，model 的类型是一个数组，单个checkbox 值默认是boolean 类型

radio 对应的值是 input 的 value 值

text和textarea 默认对应的 model 是字符串

select单选对应字符串，多选对应也是数组

效果

5.4 v-on

5.4.1 基本用法

v-on 指令用于给页面元素绑定事件。

语法： v-on:事件名="js 片段或函数名"

示例：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="decrement">取消</button>
        <h2>有{{num}}个点赞</h2>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                num: 100
            },
            methods: {
                decrement() {
                    this.num--;
                }
            },
        });
    </script>

</body>

另外，事件绑定可以简写，例如**v-on:click='add'**可以简写为**@click='add'**

5.4.2 事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡到父元素

.prevent：阻止默认事件发生

.capture：使用事件捕获模式

.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

.once：只执行一次

示例：

<body>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <!--右击事件，并阻止默认事件发生-->
        <button v-on:click.prevent="num++">点赞</button>
        

        <!--右击事件，不阻止默认事件发生-->
        <button v-on:contextmenu="decrement($event)">取消</button>
        

        <h1>有{{num}}个赞</h1>
    </div>

    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                num: 100
            },
            methods: {
                decrement(ev) {
                    // ev.preventDefault();
                    this.num--;
                }
            }
        })
    </script>

</body>

效果：右键“点赞”，不会触发默认的浏览器右击事件；右键“取消”，会触发默认的浏览器右击事件

5.4.3 按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

5.4.4 组合按钮

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift

<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

5.5 v-for

遍历数据渲染页面是非常常用的需求，Vue 中通过 v-for 指令来实现。

5.5.1 遍历数组

语法：v-for="item in items"

items：要遍历的数组，需要在 vue 的 data 中定义好。
item：迭代得到的当前正在遍历的元素

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <ul>
            <li v-for="user in users">
                {{user.name}}---{{user.gender}}---{{user.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                users: [
                    { name: '柳岩', gender: '女', age: 21 },
                    { name: '张三', gender: '男', age: 18 },
                    { name: '范冰冰', gender: '女', age: 24 },
                    { name: '刘亦菲', gender: '女', age: 18 },
                    { name: '古力娜扎', gender: '女', age: 25 }
                ]
            },
        })
    </script>
</body>

效果：

5.5.2 数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法：v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从 0 开始。

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <ul>
            <li v-for="(user, index) in users" :key="index">
                {{index+1}}.{{user.name}}---{{user.gender}}---{{user.age}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                users: [
                    { name: '柳岩', gender: '女', age: 21 },
                    { name: '张三', gender: '男', age: 18 },
                    { name: '范冰冰', gender: '女', age: 24 },
                    { name: '刘亦菲', gender: '女', age: 18 },
                    { name: '古力娜扎', gender: '女', age: 25 }
                ]
            },
        })
    </script>
</body>

效果：

5.5.3 遍历对象

v-for 除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1 个参数时，得到的是对象的属性值

2 个参数时，第一个是属性值，第二个是属性名

3 个参数时，第三个是索引，从 0 开始

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <ul>
            <li v-for="(value, key,index) in user">
                {{index+1}}.{{key}}---{{value}}
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        let vm = new Vue({
            el: "#app",
            data: {
                user: { name: '柳岩', gender: '女', age: 21 }
            },
        })
    </script>
</body>

效果：

5.5.4 Key

用来标识每一个元素的唯一特征，这样 Vue 可以使用“就地复用”策略有效的提高渲染的效率。

示例：

<ul>
	<li v-for="(item,index) in items" :key=”index”></li>
</ul>
<ul>
	<li v-for="item in items" :key=”item.id”></li>
</ul>

最佳实践：

如果 items 是数组，可以使用 index 作为每个元素的唯一标识
如果 items 是对象数组，可以使用 item.idopen in new window 作为每个元素的唯一标识

5.6 v-if 和 v-show

5.6.1 基本用法

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。v-show，当得到结果为 true 时，所在的元素才会被显示。

语法：v-if="布尔表达式", v-show="布尔表达式"

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <button v-on:click="show = !show">点我呀</button>
        <br>
        <h1 v-if="show">
            看到我啦？！
        </h1>
        <h1 v-show="show">
            看到我啦？！show
        </h1>
    </div>

    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                show: true
            }
        })
    </script>
</body>

5.6.2 与 v-for 结合

当 v-if 和 v-for 出现在一起时，v-for 优先级更高。也就是说，会先遍历，再判断条件。

修改 v-for 中的案例，添加 v-if：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <ul>
            <li v-for="(user, index) in users" v-if="user.gender=='女'">
                {{index+1}}.{{user.name}}---{{user.gender}}---{{user.age}}
            </li>
        </ul>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                users: [
                    { name: '柳岩', gender: '女', age: 21 },
                    { name: '张三', gender: '男', age: 18 },
                    { name: '范冰冰', gender: '女', age: 24 },
                    { name: '刘亦菲', gender: '女', age: 18 },
                    { name: '古力娜扎', gender: '女', age: 25 }
                ]
            },
        })
    </script>
</body>

效果：只显示女性

5.7 v-else 和 v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <button v-on:click="random=Math.random()">点我呀</button><span>{{random}}</span>
        <h1 v-if="random >= 0.75">
            看到我啦？！v-if >= 0.75
        </h1>
        <h1 v-else-if="random > 0.5">
            看到我啦？！v-else-if > 0.5
        </h1>
        <h1 v-else-if="random > 0.25">
            看到我啦？！v-else-if > 0.25
        </h1>
        <h1 v-else>
            看到我啦？！v-else
        </h1>
    </div>
   
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                random: 1
            }
        })
    </script>
</body>

6、计算属性和侦听器

6.1 计算属性（computed）

某些结果是基于之前数据实时计算出来的，我们可以利用计算属性。来完成

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="app">
        <ul>
            <li>西游记：价格{{xyjPrice}}，数量：
                <input type="number" v-model="xyjNum">
            </li>
            <li>水浒传：价格{{shzPrice}}，数量：
                <input type="number" v-model="shzNum">
            </li>
            <li>总价：{{totalPrice}}</li>
        </ul>
    </div>
   
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                xyjPrice: 56.73,
                shzPrice: 47.98,
                xyjNum: 1,
                shzNum: 1
            },
            computed: {
                totalPrice() {
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum;
                }
            },
        })
    </script>
</body>

效果：

6.2 侦听（watch）

watch 可以让我们监控一个值的变化。从而做出相应的反应。

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    <div id="app">
        <ul>
            <li>西游记：价格{{xyjPrice}}，数量：
                <input type="number" v-model="xyjNum">
            </li>
            <li>水浒传：价格{{shzPrice}}，数量：
                <input type="number" v-model="shzNum">
            </li>
            <li>总价：{{totalPrice}}</li>
            {{msg}}
        </ul>
    </div>
    
    <script type="text/javascript">
        let app = new Vue({
            el: "#app",
            data: {
                xyjPrice: 56.73,
                shzPrice: 47.98,
                xyjNum: 1,
                shzNum: 1,
                msg: ""
            },
            computed: {
                totalPrice() {
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum;
                }
            },
            watch: {
                xyjNum(newVal, oldVal) {
                    if (newVal >= 3) {
                        this.msg = "西游记没有更多库存了";
                        this.xyjNum = 3;
                    } else {
                        this.msg = "";
                    }
                }
            }
        })
    </script>
</body>

效果：

6.3 过滤器（filters）

过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本。在很多不同的情况下，过滤器都是有用的，比如尽可能保持 API 响应的干净，并在前端处理数据的格式。

示例：展示用户列表性别显示男女

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <table>
            <tr v-for="user in userList">
                <td>{{user.id}}</td>
                <td>{{user.name}}</td>
                <!-- 使用代码块实现，有代码侵入 -->
                <td>{{user.gender===1? "男":"女"}}</td>
            </tr>
        </table>
    </div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            userList: [
                { id: 1, name: 'jacky', gender: 1 },
                { id: 2, name: 'peter', gender: 0 }
            ]
        }
    });
</script>
</body>

效果：

6.3.1 局部过滤器

注册在当前 vue 实例中，只有当前实例能用

let app = new Vue({
    el: "#app",
    data: {
        userList: [
            { id: 1, name: 'jacky', gender: 1 },
            { id: 2, name: 'peter', gender: 0 }
        ]
    },
    // filters 定义局部过滤器，只可以在当前 vue 实例中使用filters: {
    genderFilter(gender) {
        return gender === 1 ? '男~' : '女~'
    }
});

<td>{{user.gender | genderFilter}}</td>

6.3.2 全局过滤器

// 在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
	return value.charAt(0).toUpperCase() + value.slice(1)
})

任何 vue 实例都可以使用： <td>{{user.name | capitalize}}</td>

过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和v-bind表达式

7、组件化

7.1 全局组件

我们通过 Vue 的 component 方法来定义一个全局组件。

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <!--使用定义好的全局组件-->
        <counter></counter>
    </div>

    <script type="text/javascript">
        Vue.component(
            "counter", {
            template: '<button @click="count++">你点击了我{{count}}次，我记住了！</button>',
            data() {
                return {
                    count: 0
                }
            }
        });

        let app = new Vue({
            el: "#app"
        })
    </script>
</body>

组件其实也是一个 Vue 实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el 属性。
但是组件渲染需要 html 模板，所以增加了 template 属性，值就是HTML 模板
全局组件定义完毕，任何 vue 实例都可以直接在 HTML 中通过组件名称来使用组件了
data 必须是一个函数，不再是一个对象。

效果：

7.2 组件的复用

定义好的组件，可以任意复用多次：

<div id="app">
    <!--使用定义好的全局组件-->
    <counter></counter>
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

效果：

组件的 data 属性必须是函数！

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝；

7.3 局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue 的加载而加载。因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建组件时传递的第二个参数一致：

const counter = {
    template: '<button v-on:click="count++">你点击了我{{count}}次</button>',
    data() {
        return {
            count: 0
        }
    }
};

然后在 Vue 中使用它：

let vm = new Vue({
    el: "#app",
    components: {
        'button-counter': counter
    }
});

components 就是当前 vue 对象子组件集合。

其 key 就是子组件名称
其值就是组件对象名

效果与刚才的全局注册是类似的，不同的是，这个 counter 组件只能在当前的Vue 实例中使用

完整示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <!--使用定义好的全局组件-->
        <button-counter></button-counter>
    </div>

    <script type="text/javascript">

        const counter = {
            template: '<button v-on:click="count++">你点击了我{{count}}次</button>',
            data() {
                return {
                    count: 0
                }
            }
        };
        let vm = new Vue({
            el: "#app",
            components: {
                'button-counter': counter
            }
        });

    </script>
</body>

简写：

let vm = new Vue({
    el: "#app",
    components: {
        counter
    }
});

8、生命周期钩子函数

8.1 生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue 为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue 实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：你不需要立马弄明白所有的东西。

8.2 钩子函数

beforeCreated：我们在用 Vue 时都要进行实例化，因此，该函数就是在Vue 实例化时调用，也可以将他理解为初始化函数比较方便一点，在 Vue1.0 时，这个函数的名字就是init。

created：在创建实例之后进行调用。

beforeMount：页面加载完成，没有渲染。如：此时页面还是

mounted：我们可以将他理解为原生 js 中的 window.onload=function({.,.})，或许大家也在用 jquery，所以也可以理解为 jquery 中的$(document).ready(function(){….})，他的功能就是：在 dom 文档渲染完毕之后将要执行的函数，该函数在Vue1.0 版本中名字为compiled。此时页面中的已被渲染成张三

beforeDestroy：该函数将在销毁实例前进行调用。

destroyed：改函数将在销毁实例时进行调用。

beforeUpdate：组件更新之前。

updated：组件更新之后。

示例：

<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <div id="app">
        <span id="num">{{num}}</span>
        <button v-on:click="num++">赞！</button>
        <h2>
            {{name}}，非常帅！！！有{{num}}个人点赞。
        </h2>
    </div>

</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            name: "张三",
            num: 100
        },
        methods: {
            show() {
                return this.name;
            },
            add() {
                this.num++;
            }
        },

        beforeCreate() {
            console.log("=========beforeCreate=============");
            console.log("数据模型未加载：" + this.name, this.num);
            console.log("方法未加载：" + this.show());
            console.log("html 模板未加载：" + document.getElementById("num"));
        },

        created: function () {
            console.log("=========created=============");
            console.log("数据模型已加载：" + this.name, this.num);
            console.log("方法已加载：" + this.show());
            console.log("html 模板已加载：" + document.getElementById("num"));
            console.log("html 模板未渲染：" + document.getElementById("num").innerText);
        },

        beforeMount() {
            console.log("=========beforeMount=============");
            console.log("html 模板未渲染：" + document.getElementById("num").innerText);
        },

        mounted() {
            console.log("=========mounted=============");
            console.log("html 模板已渲染：" + document.getElementById("num").innerText);
        },

        beforeUpdate() {
            console.log("=========beforeUpdate=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html 模板未更新：" + document.getElementById("num").innerText);
        },

        updated() {
            console.log("=========updated=============");
            console.log("数据模型已更新：" + this.num);
            console.log("html 模板已更新：" + document.getElementById("num").innerText);
        }

    });
</script>

9、vue 模块化开发

9.1 命令

npm install webpack -g：全局安装 webpack

npm install -g @vue/cli-init：全局安装 vue 脚手架

vue init webpack appname：

vue 脚手架使用 webpack 模板初始化一个appname 项目（初始化 vue 项目）
此操作需要在windows命令窗口下执行

项目的 package.json 中有 scripts，代表我们能运行的命令（启动 vue 项目）

npm start = npm run dev：启动项目
npm run build：将项目打包

9.2 模块化开发

9.2.1 项目结构

运行流程：

进入页面首先加载 index.html 和 main.js 文件。
main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联index.html 页面的元素。使用了 router，导入了 App 组件。并且使用标签引用了这个组件
第一次默认显示 App 组件。App 组件有个图片和，所以显示了图片。但是由于代表路由的视图，默认是访问/#/路径（router 路径默认使用HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。
所以第一次访问，显示图片和 HelloWorld 组件。
我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用<router-linkto="/foo">Go to Foo</router-link>标签

9.2.2 Vue 单文件组件

Vue 单文件组件模板有三个部分；

<template>
    <div class="hello">
        <h1>{{ msg }}</h1>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        data() {
            return {
                msg: 'Welcome to Your Vue.js App'
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    h1,
    h2 {
        font-weight: normal;
    }
</style>

Template：编写模板

Script：vue 实例配置

Style：样式

9.3.3 ***vscode 添加用户代码片段（快速生成vue 模板）

文件-->首选项-->用户代码片段-->点击新建代码片段--取名 vue.json 确定使用：新建vue文件后，在页面开头输入vue回车即可生成代码片段

{
	"生成vue模板": {
		"prefix": "vue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"<div></div>",
			"</template>",
			"",
			"<script>",
			"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
			"//例如：import 《组件名称》 from '《组件路径》';",
			"",
			"export default {",
			"//import引入的组件需要注入到对象中才能使用",
			"components: {},",
			"props: {},",
			"data() {",
			"//这里存放数据",
			"return {",
			"",
			"};",
			"},",
			"//监听属性 类似于data概念",
			"computed: {},",
			"//监控data中的数据变化",
			"watch: {},",
			"//方法集合",
			"methods: {",
			"",
			"},",
			"//生命周期 - 创建完成（可以访问当前this实例）",
			"created() {",
			"",
			"},",
			"//生命周期 - 挂载完成（可以访问DOM元素）",
			"mounted() {",
			"",
			"},",
			"beforeCreate() {}, //生命周期 - 创建之前",
			"beforeMount() {}, //生命周期 - 挂载之前",
			"beforeUpdate() {}, //生命周期 - 更新之前",
			"updated() {}, //生命周期 - 更新之后",
			"beforeDestroy() {}, //生命周期 - 销毁之前",
			"destroyed() {}, //生命周期 - 销毁完成",
			"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
			"}",
			"</script>",
			"<style  scoped>",
			"$4",
			"</style>"
		],
		"description": "生成vue模板"
	},
	"http-get请求": {
		"prefix": "httpget",
		"body": [
			"this.\\$http({",
			"url: this.\\$http. adornUrl(''),",
			"method: 'get',",
			"params: this.\\$http.adornParams({})",
			"}).then(({data})=>{",
			"})"
		],
		"description": "httpGet请求"
	},
	"http-post请求": {
		"prefix": "httppost",
		"body": [
			"this.\\$http({",
			"url: this.\\$http. adornUrl(''),",
			"method: 'post',",
			"data: this.\\$http.adornData(data, false)",
			"}).then(({ data })=>{ });"
		],
		"description": "httpPost请求"
	}
}

9.3.4 导入 element-ui 快速开发

官网open in new window

1、安装 element-ui：**npm i element-ui -S**

2、在main.js中导入element-ui组件和样式3、 Demo1演示 hello.vue：appname\src\components\hello.vue

<template>
   <div>
     <h1>你好，{{ name }}</h1>
     <el-radio v-model="radio" label="1">备选项</el-radio>
     <el-radio v-model="radio" label="2">备选项</el-radio>
   </div>
 </template>
 
 <script>
 export default {
   data: function () {
     return {
       name: '张三',
       radio: '1'
     }
   }
 }
 </script>

添加路由：test-app\test-app\src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hello from '@/components/hello'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    },
  ]
})

路由跳转：

    <router-link to="/hello">去hello</router-link>
    <router-link to="/">去首页</router-link>

启动项目即可看到首页备选项效果。 4、 demo2演示 效果：点击用户列表就显示用户数据，点击hello就显示hello.vue 抽取Table组件 MyTable.vue：appname\src\components\MyTable.vue

<template>
  <div>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="140"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>

<script>
  //这里可以导入其他文件（比如： 组件， 工具 js， 第三方插件 js， json文件， 图片文件等等）
  //例如： import 《组件名称》 from '《组件路径》 ';

  export default {
    //import 引入的组件需要注入到对象中才能使用
    components: {},
    props: {},
    data() {
      const item = {
        date: "2016-05-02",
        name: "王小虎",
        address: "上海市普陀区金沙江路 1518 弄",
      }
      return {
        tableData: Array(20).fill(item),
      }
    },
    //计算属性 类似于 data 概念
    computed: {},
    //监控 data 中的数据变化
    watch: {},
    //方法集合
    methods: {},
    //生命周期 - 创建完成（可以访问当前 this 实例）
    created() {},
    //生命周期 - 挂载完成（可以访问 DOM 元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有 keep-alive 缓存功能， 这个函数会触发
  };
</script>
<style  scoped>
</style>

appname\src\App.vue

<template>
  <el-container style="height: 500px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <!-- router="true" ：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 -->
      <el-menu :default-openeds="['1', '3']" router="true">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>导航一</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="/table">用户列表</el-menu-item>
            <el-menu-item index="/hello">hello</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="1-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="1-4">
            <template slot="title">选项4</template>
            <el-menu-item index="1-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>导航二</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="2-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>导航三</template>
          <el-menu-item-group>
            <template slot="title">分组一</template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group title="分组2">
            <el-menu-item index="3-3">选项3</el-menu-item>
          </el-menu-item-group>
          <el-submenu index="3-4">
            <template slot="title">选项4</template>
            <el-menu-item index="3-4-1">选项4-1</el-menu-item>
          </el-submenu>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item>新增</el-dropdown-item>
            <el-dropdown-item>删除</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>王小虎</span>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
</style>

<script>
export default {
  data() {
    const item = {
      date: '2016-05-02',
      name: '王小虎',
      address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item)
    }
  }
};
</script>

appname\src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hello from '@/components/hello'
import MyTable from '@/components/MyTable'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/hello',
      name: 'hello',
      component: hello
    },
    {
      path: '/table',
      name: 'MyTable',
      component: MyTable
    }
  ]
})

效果：

三、Babel

Babel 是一个 JavaScript 编译器，我们可以使用 es 的最新语法编程，而不用担心浏览器兼容问题。他会自动转化为浏览器兼容的代码。

四、Webpack

自动化项目构建工具。gulp 也是同类产品。

五、VSCode快捷语法

Prefix	HTML Snippet Content
`template`	`<template></template>`
`script`	`<script></script>`
`style`	`<style></style>`
`vText`	`v-text=msg`
`vHtml`	`v-html=html`
`vShow`	`v-show`
`vIf`	`v-if`
`vElse`	`v-else`
`vElseIf`	`v-else-if`
`vForWithoutKey`	`v-for`
`vFor`	`v-for="" :key=""`
`vOn`	`v-on`
`vBind`	`v-bind`
`vModel`	`v-model`
`vPre`	`v-pre`
`vCloak`	`v-cloak`
`vOnce`	`v-once`
`key`	`:key`
`ref`	`ref`
`slotA`	`slot=""`
`slotE`	`<slot></slot>`
`slotScope`	`slot-scope=""`
`component`	`<component :is=''></component>`
`keepAlive`	`<keep-alive></keep-alive>`
`transition`	`<transition></transition>`
`transitionGroup`	`<transition-group></transition-group>`
`enterClass`	`enter-class=''`
`leaveClass`	`leave-class=''`
`appearClass`	`appear-class=''`
`enterToClass`	`enter-to-class=''`
`leaveToClass`	`leave-to-class=''`
`appearToClass`	`appear-to-class=''`
`enterActiveClass`	`enter-active-class=''`
`leaveActiveClass`	`leave-active-class=''`
`appearActiveClass`	`appear-active-class=''`
`beforeEnterEvent`	`@before-enter=''`
`beforeLeaveEvent`	`@before-leave=''`
`beforeAppearEvent`	`@before-appear=''`
`enterEvent`	`@enter=''`
`leaveEvent`	`@leave=''`
`appearEvent`	`@appear=''`
`afterEnterEvent`	`@after-enter=''`
`afterLeaveEvent`	`@after-leave=''`
`afterAppearEvent`	`@after-appear=''`
`enterCancelledEvent`	`@enter-cancelled=''`
`leaveCancelledEvent`	`@leave-cancelled=''`
`appearCancelledEvent`	`@appear-cancelled=''`

六、语法补充

this.$nextTick的用法

定义：在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，回调函数获取更新后的dom再渲染出来；$nextTick 类似于一个非常高级的定时器，自动追踪DOM更新，更新好了就触发！

参考：https://blog.51cto.com/u_15723831/6836067open in new window

✅P36-44_前端基础-VUE

# 一、Node.js

# 二、Vue

# 1、MVVM 思想

# 2、Vue 简介

# 3、入门案例

# 3.1 安装

# 3.2 创建示例项目

# 3.3 vue 声明式渲染

# 3.4 双向绑定

# 3.5 事件处理

# 4、概念

# 4.1 创建 Vue 实例

# 4.2 模板或元素

# 4.3 数据

# 4.4 方法

# 4.5 安装 vue-devtools 方便调试

# 4.6 安装 vscode的vue插件

# 5、指令

# 5.1 插值表达式

# 5.1.1 花括号

# 5.1.2 插值闪烁

# 5.1.3 v-text 和 v-html

# 5.2 v-bind

# 5.2.1 绑定class和style

# 5.2.2 绑定其他任意属性

# 5.2.3 v-bind 缩写

# 5.3 v-model

# 5.4 v-on

# 5.4.1 基本用法

# 5.4.2 事件修饰符

# 5.4.3 按键修饰符

# 5.4.4 组合按钮

# 5.5 v-for

# 5.5.1 遍历数组

# 5.5.2 数组角标

# 5.5.3 遍历对象

# 5.5.4 Key

# 5.6 v-if 和 v-show

# 5.6.1 基本用法

# 5.6.2 与 v-for 结合

# 5.7 v-else 和 v-else-if

# 6、计算属性和侦听器

# 6.1 计算属性（computed）

# 6.2 侦听（watch）

# 6.3 过滤器（filters）

# 6.3.1 局部过滤器

# 6.3.2 全局过滤器

# 7、组件化

# 7.1 全局组件

# 7.2 组件的复用

# 7.3 局部组件

# 8、生命周期钩子函数

# 8.1 生命周期

# 8.2 钩子函数

# 9、vue 模块化开发

# 9.1 命令

# 9.2 模块化开发

# 9.2.1 项目结构

# 9.2.2 Vue 单文件组件

# 9.3.3 ***vscode 添加用户代码片段（快速生成vue 模板）

# 9.3.4 导入 element-ui 快速开发

# 三、Babel

# 四、Webpack

# 五、VSCode快捷语法

# 六、语法补充

# this.$nextTick的用法