vue基础入门

1. vue介绍

1.1 什么是vue

官方给出的概念：Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。

构建用户界面
- 用vue往html页面中填充数据，非常的方便
框架
- 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
- 要学习vue，就是在学习vue框架中规定的用法
- vue的指令、组件（是对UI结构的复用）、路由、Vuex、vue组件库
- 只有把上面罗列的内容掌握以后，才有才发vue项目的能力

1.2 vue的特性

vue 框架的特性，主要体现在如下两方面：
① 数据驱动视图
② 双向数据绑定

1.2.1 数据驱动视图

在使用了 vue 的页面中，vue 会监听数据的变化，从而自动重新渲染页面的结构。示意图如下：

1.2.2 双向数据绑定

在填写表单时，双向数据绑定可以辅助开发者在不操作 DOM 的前提下，自动把用户填写的内容同步到数据源
中。示意图如下：

1.3 MVVM

MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，
它把每个 HTML 页面都拆分成了这三个部分，如图所示：

1.3.1 MVVM 的工作原理

ViewModel 作为 MVVM 的核心，是它把当前页面的数据源（Model）和页面的结构（View）连接在了一起。

当数据源发生变化时，会被 ViewModel 监听到，VM 会根据最新的数据源自动更新页面的结构
当表单元素的值发生变化时，也会被 VM 监听到，VM 会把变化过后最新的值自动同步到 Model 数据源中

1.4 vue的版本

当前，vue 共有 3 个大版本，其中：
2.x 版本的 vue 是目前企业级项目开发中的主流版本
3.x 版本的 vue 于 2020-09-19 发布，生态还不完善，尚未在企业级项目开发中普及和推广
1.x 版本的 vue 几乎被淘汰，不再建议学习与使用
总结：
3.x 版本的 vue 是未来企业级项目开发的趋势；
2.x 版本的 vue 在未来（1 ~ 2年内）会被逐渐淘汰；

2. vue的基本使用

2.1 基本使用步骤

导入vue.js的script脚本文件
在页面中声明一个将要被vue所控制的DOM区域
创建vm实例对象（vue实例对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        {{username}}
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            // 3.2 指定 Model 数据源
            data: {
                username: "zs"
            }
        })
        
    </script>
</body>
</html>

2.2 基本代码与MVVM的对应关系

3. vue的调试工具

3.1 安装 vue-devtools 调试工具

vue 官方提供的 vue-devtools 调试工具，能够方便开发者对 vue 项目进行调试与开发。
Chrome 浏览器在线安装 vue-devtools ：
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
FireFox 浏览器在线安装 vue-devtools ：
https://addons.mozilla.org/zh-CN/firefox/addon/vue-js-devtools/

3.2 配置 Chrome 浏览器中的 vue-devtools

点击 Chrome 浏览器右上角的按钮，选择更多工具 -> 扩展程序 -> Vue.js devtools 详细信息，并勾选如下
的两个选项：

3.3 使用 vue-devtools 调试 vue 页面

在浏览器中访问一个使用了 vue 的页面，打开浏览器的开发者工具，切换到 Vue 面板，即可使用 vue-devtools
调试当前的页面。

4. vue的指令

4.1 指令的概念

指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

vue 中的指令按照不同的用途可以分为如下 6 大类：
① 内容渲染指令
② 属性绑定指令
③ 事件绑定指令
④ 双向绑定指令
⑤ 条件渲染指令
⑥ 列表渲染指令

注意：指令是 vue 开发中最基础、最常用、最简单的知识点。

4.1.1 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

v-text
{{}}
v-html

4.1.1.1 v-text

用法示例：

<div id="app">
    <!-- 把 username 对应的值，渲染到第一个 P 标签中 -->
    <p v-text="username"></p>
    <!-- 把 gender 对应的值，渲染到第二个 P标签中 -->
    <!-- 注意：第二个 P 标签中，默认的文本 "性别" 会被 gener 的值覆盖掉 -->
    <p v-text="gen">性别</p>
</div>

注意：v-text 指令会覆盖元素内默认的值。

4.1.1.2 `{{ }}`语法

vue 提供的 {{ }} 语法，专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达
式（英文名为：Mustache）。

<!-- 使用 {{ }} 插值表达式,将对应的值渲染到元素的内容节点中 -->
<!-- 同时保留元素自身的默认值 -->
<p>姓名：{{ username }}</p>
<p>性别：{{ gender }}</p>

注意：相对于 v-text 指令来说，插值表达式在开发中更常用一些！因为它不会覆盖元素中默认的文本内容。

4.1.1.3 v-html

v-text 指令和插值表达式只能渲染纯文本内容。如果要把包含 HTML 标签的字符串渲染为页面的 HTML 元素，则需要用到 v-html 这个指令

1
2
3

<!-- 假设 data 中定义了名为 discription 的数据，数据的值为包含 HTML 标签的字符串 -->
<!-- discription: "<h5 style='color: red;'>欢迎来学习vue！！</h5></h5>"-->
<p v-html="discription"></p>

4.2 属性绑定指令

如果需要为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。用法示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <!-- 使用 v-bind 指令，为 input 的 placeholder 动态绑定属性值 -->
        <input type="text" v-bind:placeholder="inputValue">
        <br/>
        <!-- 使用 v-bind 指令，为 img 的 src 动态绑定属性值  -->
        <img v-bind:src="imgSrc" style="width: 130px" alt="">
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                inputValue: "请输入内容",
                imgSrc: "https://cn.vuejs.org/images/logo.png"
            }
        })
    </script>
</body>
</html>

4.2.1 属性绑定指令的简写形式

由于 v-bind 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 : ）。

4.2.2 使用 Javascript 表达式

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持 Javascript 表达式的运算，例如：

4.3 事件绑定指令

vue 提供了 v-on 事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。语法格式如下：

<div id="app">
    <h3>count 的值为: {{ count }}</h3>
    <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
    <button v-on:click="addCount">+1</button>
</div>

注意：原生 DOM 对象有 onclick、oninput、onkeyup 等原生事件，替换为 vue 的事件绑定形式后，
分别为：v-on:click、v-on:input、v-on:keyup

通过 v-on 绑定的事件处理函数，需要在 methods 节点中进行声明：

methods: {  // v-on 绑定的事件处理函数，需要声明在 methods 节点中
    addCount: function() { // 事件处理函数的名称
        // this 表示当前 new 出来的 vm 实例对象
        // 通过 this 可以访问到 data 中的数据
        this.count +=1  
    }
}

4.3.1 事件绑定的简写形式

由于 v-on 指令在开发中使用频率非常高，因此，vue 官方为其提供了简写形式（简写为英文的 @ ）。

4.3.2 事件参数对象

在原生的 DOM 事件绑定中，可以在事件处理函数的形参处，接收事件参数对象 event。同理，在 v-on 指令
（简写为 @ ）所绑定的事件处理函数中，同样可以接收到事件参数对象 event，示例代码如下：

methods: { 
    addCount: function(e) { // 接收事件参数对象 event,简写为 e
        const nowBgColor = e.target.style.backgroundColor
        e.target.style.backgroundColor = nowBgColor === 'red' ? '' : 'green'
        this.count += 1
    }
}

4.3.3 绑定事件并传参

在使用 v-on 指令绑定事件时，可以使用 () 进行传参，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <h3>count 的值为: {{ count }}</h3>
        <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
        <button @click="addCount(2)">+1</button>

    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                count: 0
            },
            methods: { 
                addCount: function(step) { // 接收事件参数对象 event,简写为 e
                    this.count += step
                }
            }
        })
    </script>
</body>
</html>

4.3.4 $event

$event 是 vue 提供的特殊变量，用来表示原生的事件参数对象 event。$event 可以解决事件参数对象 event 被覆盖的问题。示例用法如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <h3>count 的值为: {{ count }}</h3>
        <!-- 语法格式为 v-on:事件名称="事件处理函数的名称" -->
        <button @click="addCount(2, $event)">+2</button>

    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                count: 0
            },
            methods: { 
                addCount: function(step, e) { // 接收事件参数对象 event,简写为 e
                    const nowBgColor = e.target.style.backgroundColor
                    e.target.style.backgroundColor = nowBgColor === 'cyan' ? '' : 'yellow'
                    this.count += step
                }
            }
        })
    </script>
</body>
</html>

4.3.5 事件修饰符

在事件处理函数中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。因此，vue 提供了事件修饰符的概念，来辅助程序员更方便的对事件的触发进行控制。常用的 5 个事件修饰符如下：

事件修饰符	说明
.prevent	阻止默认行为（例如：阻止 a 连接的跳转、阻止表单的提交等）
.stop	阻止事件冒泡
.capture	以捕获模式触发当前的事件处理函数
.once	绑定的事件只触发1次
self	只有在 event.target 是当前元素自身时触发事件处理函数

语法格式如下：

1 2	<!-- 触发 click 点击事件时，阻止 a 链接的默认跳转行为 --> <a href="https://www.baidu.com" @click.prevent="onLinkClick">百度首页</a>

4.3.6 按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符，例如：

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input type="text" @keyup.enter="submit">

<!-- 只有在 `key` 是 `Esc` 时调用 `vm.clerInput()` -->
<input type="text" @keyup.esc="clearInput">

5. 双向绑定指令

vue 提供了v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <p>用户名：{{ username }}</p>
        <input type="text" v-model="username">

        <p>选中的省份是：{{ province }}</p>
        <select v-model="province">
            <option value="">请选择</option>
            <option value="1">北京</option>
            <option value="2">河北</option>
            <option value="3">黑龙江</option>
        </select>

    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                username: "",
                province: ""
            },
            methods: { 
            }
        })
    </script>
</body>
</html>

5.1 v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number=“age” />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim=“msg” />
.lazy	在“change”时而非“input”时更新	<input v-model.lazy=“msg” />

6. 条件渲染指令

条件渲染指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个，分别是：

v-if
v-show

示例用法如下：

1 2	<p v-if="networkState === 200">请求成功 --- 被 v-if 控制</p> <p v-show="networkState === 200">请求成功 --- 被 v-show 控制</p>

6.1 v-if和v-show的区别

实现原理不同：

v-if 指令会动态地创建或移除 DOM 元素，从而控制元素在页面上的显示与隐藏；
v-show 指令会动态为元素添加或移除 style=“display: none;” 样式，从而控制元素的显示与隐藏；

性能消耗不同：
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此：

如果需要非常频繁地切换，则使用 v-show 较好
如果在运行时条件很少改变，则使用 v-if 较好

6.2 v-else

v-if 可以单独使用，或配合 v-else 指令一起使用：

<div id="app">
    <div v-if="Math.random() > 0.5">
        随机数大于 0.5
    </div>
    <div v-else>
        随机数小于或等于 0.5
    </div>
</div>

注意：v-else 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

6.3 v-else-if

v-else-if 指令，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

<div id="app">
    <div v-if="type === 'A'">优秀</div>
    <div v-else-if="type === 'B'">良好</div>
    <div v-else-if="type === 'C'">一般</div>
    <div v-else>差</div>
</div>

注意：v-else-if 指令必须配合 v-if 指令一起使用，否则它将不会被识别！

7. 列表渲染指令

vue 提供了 v-for 列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。v-for 指令需要使用 item in items 形式的特殊语法，其中：

items 是待循环的数组
item 是被循环的每一项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <ul>
            <li v-for="item in list">姓名是：{{ item.name }}</li>
        </ul> 
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                list: [
                    {id:1, name:'zs'},
                    {id:2,name:'ls'}
                ]
            },
            methods: { 
            }
        })
    </script>
</body>
</html>

7.1 v-for中的索引

v-for 指令还支持一个可选的第二个参数，即当前项的索引。语法格式为 (item, index) in items，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in list">索引是：{{index}}，姓名是：{{ item.name }}</li>
        </ul> 
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                list: [
                    {id:1, name:'zs'},
                    {id:2,name:'ls'}
                ]
            },
            methods: { 
            }
        })
    </script>
</body>
</html>

注意：v-for 指令中的 item 项和 index 索引都是形参，可以根据需要进行重命名。例如 (user, i) in userlist

7.2 使用key维护列表的状态

当列表的数据变化时，默认情况下，vue 会尽可能的复用已存在的 DOM 元素，从而提升渲染的性能。但这种默认的性能优化策略，会导致有状态的列表无法被正确更新。为了给 vue 一个提示，以便它能跟踪每个节点的身份，从而在保证有状态的列表被正确更新的前提下，提升渲染的性能。此时，需要为每项提供一个唯一的 key 属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <ul>
            <!-- 加 key 属性的好处 -->
            <!-- 1. 正确维护列表的状态 -->
            <!-- 2. 复用现有的 DOM 元素，提升渲染的性能 -->
            <li v-for="(item,index) in list" :key="item.id">
                索引是：{{index}}，姓名是：{{ item.name }}
            </li>
        </ul> 
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                list: [
                    {id:1, name:'zs'},
                    {id:2,name:'ls'}
                ]
            },
            methods: { 
            }
        })
    </script>
</body>
</html>

key 的注意事项

key 的值只能是字符串或数字类型
key 的值必须具有唯一性（即：key 的值不能重复）
建议把数据项 id 属性的值作为 key 的值（因为 id 属性的值具有唯一性）
使用 index 的值当作 key 的值没有任何意义（因为 index 的值不具有唯一性）
建议使用 v-for 指令时一定要指定 key 的值（既提升性能、又防止列表状态紊乱）

5. 过滤器

过滤器（Filters）是 vue 为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道符”进行调用，示例代码如下：

<div id="app">
    <!-- 在双花括号中通过"管道符"调用 capitalize 过滤器，对message的值进行格式化 -->
    <p>{{ message | capitalize }}</p>

    <!-- 在v-bind中通过"管道符"嗲用formatId过滤器，对rawId的值进行格式化 -->
    <div :id="rawId | formatId"></div>
</div>

5.1 定义过滤器

在创建 vue 实例期间，可以在 filters 节点中定义过滤器，示例代码如下：

<script>
    // 3. 创建vm 实例对象 （vue 实例对象）
    const vm = new Vue({
        // 3.1 指定当前vm实例要控制页面的哪个区域
        el: "#app",
        data: {
            message: "this is a test message",
            rawId: "测试信息"
        },
        filters: {  // 在 filters 节点下定义过滤器
            capitalize(str) { // 把首字母转为大写的过滤器
                return str.charAt(0).toUpperCase() + str.slice(1)
            }
        },
        methods: { 
        }
    })
</script>

5.2 私有过滤器和全局过滤器

在 filters 节点下定义的过滤器，称为“私有过滤器”，因为它只能在当前 vm 实例所控制的 el 区域内使用。如果希望在多个 vue 实例之间共享过滤器，则可以按照如下的格式定义全局过滤器：

// 全局过滤器 - 独立于每个 vm 实例之外
// Vue.filter() 方法接收两个参数
//      第1个参数，是全局过滤器的名字
//      第2个参数，是全局过滤器的处理函数
Vue.filters('capitalize', (str) => {
    return str.charAt(0).toUpperCase() + str.slice(1) + '~~'
})

5.3 连续调用多个过滤器

过滤器可以串联地进行调用，例如:

<!-- 把 message 的值，交给filterA进行处理 -->
<!-- 把filterA处理的结果，再交给filterB进行处理 -->
<!-- 最终把filterB处理的结果，作为最终的值渲染到页面上 -->
{{ message | filterA | filterB }}

5.4 过滤器传参

过滤器的本质是 JavaScript 函数，因此可以接收参数，格式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <!-- arg1 和 arg2 是传递给 filterA 的参数 -->
        <p>{{ message | capitalize | maxLength1(5) }}</p>
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                message: "this is a test message"
            },
            filters: {  
                // 第一个参数：永远都是"管道符"前面待处理的值
                // 从第二个参数开始，才是调用过滤器时传递过来的arg1和arg2参数
                capitalize(str) { 
                    return str.charAt(0).toUpperCase() + str.slice(1)
                }
            },
            methods: {
            }
        })
        // 全局过滤器
        // 控制文本的最大长度
        Vue.filter('maxLength',(str, len=10) => {
            if (str.length <= len) return str
            return str.slice(0, len) + '...'
        })
    </script>
</body>
</html>

5.5 过滤器的兼容性

过滤器仅在 vue 2.x 和 1.x 中受支持，在 vue 3.x 的版本中剔除了过滤器相关的功能。

在企业级项目开发中：

如果使用的是 2.x 版本的 vue，则依然可以使用过滤器相关的功能
如果项目已经升级到了 3.x 版本的 vue，官方建议使用计算属性或方法代替被剔除的过滤器功能

具体的迁移指南，请参考 vue 3.x 的官方文档给出的说明：
https://v3.vuejs.org/guide/migration/filters.html#migration-strategy

6. watch侦听器

watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

语法格式如下：

<script>
    // 3. 创建vm 实例对象 （vue 实例对象）
    const vm = new Vue({
        // 3.1 指定当前vm实例要控制页面的哪个区域
        el: "#app",
        data: {
            message: "this is a test message"
        },
        filters: {  
        },
        watch: {
            // 监听 message 值的变化
            // newVal 是"变化后的新值", oldVal是"变化之前的旧值"
            message(newVal, oldVal) {
                console.log(newVal, oldVal)
            }
        },
        methods: {
        }
    })
</script>

6.1 检测用户名是否可用

监听 username 值的变化，并使用 axios 发起 Ajax 请求，检测当前输入的用户名是否可用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <input type="text" v-model="username">
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://unpkg.com/axios@1.3.4/dist/axios.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                username: ""
            },
            filters: {  
            },
            watch: {
                // 监听 username 值的变化
                async username(newVal) {
                    if (newVal == '') return
                    // 使用axios 发起请求， 判断用户名是否可用
                    const { data: res } = await axios.get("https://www.escook.cn/api/finduser/" + newVal)
                }
            },
            methods: {
            }
        })
    </script>
</body>
</html>

6.2 immediate选项

默认情况下，组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用，则需要使用 immediate 选项。示例代码如下：

watch: {
    username: {
        // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
        handler: async  function(newVal) {
            if (newVal == '') return
            // 使用axios 发起请求， 判断用户名是否可用
            const { data: res } = await axios.get("https://www.escook.cn/api/finduser/" + newVal)
            console.log(res)
        },
        // 表示页面初次渲染好之后，就立即触发当前的watch侦听器
        immediate: true
    }
},

6.3 deep选项

如果 watch 侦听的是一个对象，如果对象中的属性值发生了变化，则无法被监听到。此时需要使用 deep 选项，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 2. 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
    <div id="app">
        <input type="text" v-model="info.username">
    </div>
    <!-- 1. 导入vue.js 的 script 脚本文件 -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://unpkg.com/axios@1.3.4/dist/axios.min.js"></script>

    <script>
        // 3. 创建vm 实例对象 （vue 实例对象）
        const vm = new Vue({
            // 3.1 指定当前vm实例要控制页面的哪个区域
            el: "#app",
            data: {
                info: {username: 'admin'}
            },
            filters: {  
            },
            watch: {
                info: {
                    // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
                    handler: async  function(newVal) {
                        console.log(newVal.username)
                    },
                    deep: true
                }
            },
            methods: {
            }
        })
    </script>
</body>
</html>

6.4 监听对象单个属性的变化

如果只想监听对象中单个属性的变化，则可以按照如下的方式定义 watch 侦听器：

watch: {
    'info.username': {
        // handler 是固定写法，表示当 username 的值变化时，自动调用 handler 处理函数
        handler: async  function(newVal) {
            console.log(newVal)
        },
        deep: true
    }
},

7. 计算属性

计算属性指的是通过一系列运算之后，最终得到一个属性值。
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="show">点击</button>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                r: 0, g: 0, b: 0
            },
            computed: {
                rgb() { return `rgb(${this.r}, ${this.g}, ${this.b})` }
            },
            filters: {  
            },
            watch: {
            },
            methods: {
                show() { console.log(this.rgb)}
            }
        })
    </script>
</body>
</html>

7.1 计算属性的特点

① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性
② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算

8. vue-cli

8.1 什么是单页面应用程序

单页面应用程序（英文名：Single Page Application）简称 SPA，顾名思义，指的是一个 Web 网站中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。

8.2 什么是 vue-cli

vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。

引用自 vue-cli 官网上的一句话：
程序员可以专注在撰写应用上，而不必花好几天去纠结 webpack 配置的问题。

中文官网：https://cli.vuejs.org/zh/

8.2 安装和使用

vue-cli 是 npm 上的一个全局包，使用 npm install 命令，即可方便的把它安装到自己的电脑上：

1	npm install -g @vue/cli

基于 vue-cli 快速生成工程化的 Vue 项目：

1	vue create 项目的名称

8.3 vue项目的运行流程

在工程化的项目中，vue 要做的事情很单纯：通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。

其中：

App.vue 用来编写待渲染的模板结构
index.html 中需要预留一个 el 区域
main.js 把 App.vue 渲染到了 index.html 所预留的区域中

9. vue组件

组件化开发指的是：根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护

9.1 vue中的组件化开发

vue 是一个支持组件化开发的前端框架。
vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件

9.2 vue组件的三个组成部分

每个 .vue 组件都由 3 部分构成，分别是：

template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分

9.2.1 template

vue 规定：每个组件对应的模板结构，需要定义到 <template> 节点中

1
2
3

<template>
    <!-- 当前组件的 DOM 结构，需要定义到 template 标签的内部 -->
</template>

注意：
 template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
 template 中只能包含唯一的根节点

9.2.2 script

vue 规定：开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。
<script > 节点的基本结构如下：

<script>
    // 今后，组件相关的 data 数据、methods 方法等
    // 都需要定义到 export default 所导出的对象中
    export default {}
</script>

9.2.2.1 组件中的data必须是函数

vue 规定：.vue 组件中的 data 必须是一个函数，不能直接指向一个数据对象。
因此在组件中定义 data 数据节点时，下面的方式是错误的：

1
2
3

data: { // 组件中，不能直接让 data 指向一个数据对象（会报错）
    count: 0
}

会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：
https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数

9.2.3 style

vue 规定：组件内的 <style> 节点是可选的，开发者可以在 <style> 节点中编写样式美化当前组件的 UI 结构。
<script > 节点的基本结构如下：

<style>
    h1 {
        font-weight: normal;
    }
</style>

9.2.3.1 让style中支持less语法

在 <style> 标签上添加 lang=“less” 属性，即可使用 less 语法编写组件的样式：

<style lang="less">
    h1 {
        font-weight: normal;
    }
</style>

9.3 组件之间的父子关系

9.3.1 使用组件的三个步骤

9.3.2 通过components注册的是私有子组件

例如：
在组件 A 的 components 节点下，注册了组件 F。
则组件 F 只能用在组件 A 中；不能被用在组件 C 中。
请大家思考两个问题：
① 为什么 F 不能用在组件 C 中？
② 怎样才能在组件 C 中使用 F？

9.3.3 注册全局组件

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下：

// 导入需要全局注册的组件
import Count from '@/components/Count.vue'

// 参数1: 字符串格式, 表示组件的"注册名称"
// 参数2: 需要被全局注册的那个组件
Vue.component("MyCount", Count)

9.4 组件的props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
它的语法格式如下：

export default {
    // 组件的自定义属性
    props: ['自定义属性A','自定义属性B','....'],
    // 组件私有数据
    data() {
        return {}
    }
}

9.4.1 props是只读的

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错：

要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

export default {
    // 组件的自定义属性
    props: ['init'],
    // 组件私有数据
    data() {
        return {
            count: this.init // 把 this.init 的值转存到 count
        }
    }
}

9.4.2 props的default默认值

在声明自定义属性时，可以通过 default 来定义属性的默认值。示例代码如下：

props: {
    init: {
        // 用 default 属性定义属性的默认值
        default: 0
    }
},

9.4.3 props的type值类型

在声明自定义属性时，可以通过 type 来定义属性的值类型。示例代码如下：

props: {
    init: {
        // 用 default 属性定义属性的默认值
        default: 0,
        // 用 type 属性定义属性的值类型
        // 如果传递过来的值不符合此类型，则会在终端报错
        type: Number
    }
},

9.4.4 props的required必填项

在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值。示例代
码如下：

props: {
    init: {
        // 用 default 属性定义属性的默认值
        default: 0,
        // 用 type 属性定义属性的值类型
        // 如果传递过来的值不符合此类型，则会在终端报错
        type: Number,
        // 必填项校验
        required: true
    }
},

9.5 组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是：
① 单页面应用程序中，所有组件的 DOM 结构，都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式，都会影响整个 index.html 页面中的 DOM 元素

9.5.1 解决组件样式冲突的问题

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域，示例代码如下：

        <template>
            <div class="container" data-v-001>
                <h3 data-v-001>轮播图</h3>
            </div>
        </template>

<style>
    /* 通过中括号"属性选择器",来防止组件之间的样式冲突问题，
       因此每个组件分配的自定义属性是"唯一的"
    */
    .container[data-v-0001] {
        border: 1px solid red;
    }
</style>

9.5.2 style节点的scoped属性

为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题：

        <template>
            <div class="container">
                <h3>轮播图</h3>
            </div>
        </template>

<style scoped>
    /* style 节点的 scoped 属性，用来自动为每个组件分配唯一的"自定义属性"
       并自动为当前组件的DOM标签和style样式应用这个自定义属性，防止组件的样式冲突问题
    */
    .container {
        border: 1px solid red;
    }
</style>

9.5.3 /deep/ 样式穿透

如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样
式对子组件生效，可以使用 /deep/ 深度选择器

<style scoped>
.title {
    color: blue; /* 不加 /deep/ 时，生成的选择器格式为 .title[data-v-052242de] */
}

/deep/ .title {
    color: blue; /* 加上 /deep/ 时，生成的选择器格式为[data-v-052242de] .title */
}
</style>