vue.js
`vue.js` 是一套用于构建用户界面的渐进式框架
渐进式
Vue 核心
- 声明式渲染
- 组件
引入
我们还是先通过 \<script\> 的方式来引入 <u>vue</u>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
组件
`vue` 的核心功能之一就是组件
组件基本分类
- 根组件
- 可复用的功能组件
根组件的创建
通过 `vue` 提供的构造函数可以实例化出来一个跟组件实例对象
let app = new Vue
可复用的功能组件
通过 `Vue` 提供的静态方法 `component` 窗口可复用的功能组件
let component1 = Vue.component
组件配置选项：https://cn.vuejs.org/v2/api/
组件内容渲染
渲染一个组件的内容可以通过两种方式来进行
- template 选项（模板）
- render 选项（函数）
template（模板）
type : string
组件的模板结构（HTML），模板内容会被 `vue` 进行渲染，生成最终的 `HTML` 内容，并替换占位（挂载）元素
el
type : string | Element
提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例，
- 该选择只对 `new` 创建的实例有效
- 如果提供 `el` ，但是没有提供 `template` ，则 `el` 的内容讲作为 `template`
render函数
type : (createElement: () => VNode) => VNode
发挥 `JavaScript` 最大的编程能力，直接创建 `VNode` （虚拟dom对象），优先级高于 `el` 和 `template`
- 有更强大的编程能力
- 有更高的性能
https://cn.vuejs.org/v2/guide/render-function.html
HTML模板解析成虚拟DOM再解析成DOM元素
使用 $mount 方法延迟 `Vue` 实例的挂载
当 `Vue` 实例没有 `el` 选项的时候，它会处于一种 未挂载 的状态，我们可以通过组件 `Vue` 实例对象的 `$mount` 方法来手动挂载，
通过该方式，我们也可以达到延迟 `Vue` 实例的挂载的目的
组件中的数据（状态）
data
组件内部使用的数据，`data` 是一个对象，`data` 中的值可以中模板中直接访问
- `Vue` 实例组件（根组件）的 `data` 是一个对象
- 可复用功能组件的 `data` 必须是一个函数，且该函数必须返回一个对象（因为复用性，避免多个组件实例引用同一个对象。
换句话说，组件中使用的数据必须是一个对象，但是可复用组件的这个数据对象必须通过函数返回
data 的访问
`data` 数据可以直接通过组件实例对象访问，也可以通过实例对象下的 `$data` 属性进行访问
组件实例对象下有很多的以 `$` 开头的属性，这些都是实例对象内置的一些属性和方法，`vue` 为了区分数据与内置属性方法，
内置的属性和方法默认都是以 `$` 开始的，所以我们中数据中应该避免使用 `$` 开头的数据
模板语法
vue 使用了基于 html 的模板语法，使用声明式的方式把实例中的数据（`data`）与 DOM 进行绑定，`data` 中的数据在模板中可以
直接使用
Mustache（双大括号，大胡子） 语法
在 vue 中，我们是通过一对双大括号把实例中的数据渲染到模板内容中
插值表达式
在 {{ }} 中，我们可以放置表达式值
数据到视图的更新
vue 会把 `data` 中的数据挂载到实例属性下，同时对它们进行主动的监听拦截，当数据发生变化的时候，重新渲染模板。我们可以
通过实例对象对数据进行修改
检测变化的注意事项
在 vue3 之前，数据的监听是通过 `Object.defineProperty` 方法来实现的，但是该方法只能监听拦截单个数据，对于对象新增属性无法
监听拦截。所以，对于数据对象中新增的属性，我们需要调用 vue 提供的方法来进行处理
扩展
通过 `Object.defineProperty` 监听拦截中存在一些问题
- 属性新增属性
- 数组方法：push、pop、shift、unshift、splice、sort、reverse
- 数组新增值：[ ]
- 数组 length 属性
以上的操作中并不会触发监听拦截
`vue` 对数组中的 `push`、`pop` 等方法进行重新包装，所以在 `vue` 中调用这些方法，可以对数组的修改进行监听拦截
[https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method]
(https://cn.vuejs.org/v2/guide/list.html#变异方法-mutation-method)
使用 Vue.set 方法添加新数据
在模板中，我们使用了一个不存在的数据 `user.gender`
如果我们通过 `app.user.gender = '男' `的方式来新增，是不会被 vue 拦截监听处理的，我们需要使用
这样的方式，`set` 方法给 `app.user` 添加 `gender` 属性的同时，对它进行了 `defineProperty`
指令
表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 `{{ }}` 语法，而是需要 `指令`
在 `vue` 中，指令是一个带有 `v-` 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 `表达式`，不同的指令有不同
的作用，`vue` 内置了一些常用的指令，后期我们还可以自定义属于自己的指令
- 内容输出
- 循环
- 逻辑
- 属性绑定
- 事件
- 其它
内容输出
通过 `{{ }}` 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会
出现 `{{ }}` ，`vue` 提供了几个指令来解决这个问题
指令中的表达式不需要使用 `{{ }}`
v-text
弊端：`v-text` 会填充整个 `innerHTML`，会把整个title填充掉，p再写数据也没用
v-cloak（这种写法用的比较多，结合{{}}和v-text的优点）
这样写可以避免html加载完前出现{{ }}
需要配合 css 进行处理
v-html
为了防止 `xss` 攻击，默认情况下输出是不会作为 `html` 解析的，通过 `v-html` 可以让内容作为 `html` 进行解析
v-once
只渲染元素和组件一次，后期的更新不再渲染
v-pre
忽略这个元素和它子元素内容的编译
逻辑处理
v-show
根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）
适用于状态切换比较频繁的情况
v-if
根据表达式的值（布尔值），创建或销毁元素
适用于状态切换不频繁的情况
v-else / v-else-if
与 `v-else` 配合
循环与列表
v-for
根据数据循环渲染 `v-for` 指令所在的元素及其子元素
可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)
v-for 中也可以使用 of 语法，在 vue 中两者没有什么区别
:key
默认情况下，在渲染 `DOM` 过程中使用 原地复用 ，这样一般情况下会比较高效，但是对于循环列表，特别是依赖某种状态的列表，
会有一些问题，我们可以通过 `:key` 属性，来给每个循环节点添加一个标识
属性绑定
v-bind
绑定数据（表达式）到指定的属性上，`<div v-bind:参数="值/表达式"></div>`，这里的参数就是指定的属性名称
缩写
有的一些常用指令会有对应的缩写，`v-bind` 对应的缩写为 `:`
样式
针对样式属性，`v-bind` 值有一些特殊的写法
style
原生普通写法
v-bind 写法
对象写法
数组写法
class
原生普通写法
v-bind 写法
数组写法
对象写法
使用对象写法，可以根据值（boolean）动态添加对应的 class
单向数据流
通过上面的知识点和案例，我们可以看到，当数据更新的时候，页面视图就会更新，但是页面视图中绑定的元素更新的时候，
对应的数据是不会更新的
我们称为：单向数据流 数据 -> 视图
在 vue 中，还有一种双向数据流绑定的方式
v-model
数据 `title` 更新，视图中 `input` 的 `value` 就会更新。同时，当 input 中的 `value` 更新的时候，数据 `title` 也会更新，这就是我们说的
数据双向绑定 [与 React 中的受控组件类似]
表单
针对一般元素，比如 div、span、p、img 等，采用的是单向绑定：v-bind，只需要把数据绑定到视图中就可以，但是对于表单这种交互
性比较强的元素或组件，我们一般可能需求双向绑定，即：用户对视图元素的操作同时更新数据
v-model 在内部为不同的输入元素使用不同的属性和事件来处理数据
`text` 和 `textarea`
`checkbox` 和 `radio`
单选框绑定一个值
绑定的v3不是value，是单选框的check值
多选框绑定到一个布尔值或数组
`select`
单选绑定到值，多选绑定到数组
指令修饰符
一个指令可以包含的内容包括：
- 指令名称
- 指令值
- 指令参数
- 指令修饰符
.lazy（懒）
取代 `input` 监听 `change` 事件，焦点失去后触发
.number
输入字符串转为有效的数字
.trim
输入首尾空格过滤