Vue 学习笔记v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生

生命周期函数：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

插值语法：

v-once 指令的元素或组件（包括元素或组件内的所有子孙节点）只能被渲染一次。首次渲染后，即使数据发生变化，也不会被重新渲染。一般用于静态内容展示
v-html 解析 html 代码
v-text 效果同 mustache，但是不如 mustache 灵活，所以实际应用较少
v-pre 渲染源代码
v-cloak 配合 [v-cloak] { display: none } css 代码优化显示效果

computed 和 methods 的区别

computed 在 vue 内部会做一个缓存，一次刷新调用多次的情况下方法之执行一次，效率高于 methods，当方法内部用到的变量发生改变时才会重新进行计算

v-on 的修饰符

.stop 阻止事件冒泡
.prevent 组织默认事件
键盘事件 keyup.enter keydown.enter
.native 监听原生事件
.once 事件只触发一次

v-if v-show

v-if v-else-if v-else
v-if 和 v-show 的区别：前者销毁重建，后者通过 display: none 来控制显隐

v-for 循环数组、对象

遍历数组、可迭代对象 for 循环、for-in 循环、for-of 循环

数组中可以响应式的方法

push、pop、shift、unshift、splice、sort、reverse
通过索引值修改元素不会完成响应式 list[0] = ...，可以通过 $set 方法实现响应式

过滤器

message | filters 可以用来格式化数据，比如金额、日期等

骚操作：

this.$options.data().form 可以用作数据重置
样式穿透 css: >>> less、sass: ::v-deep .className，/deep/ .className

双向数据绑定 v-model

v-model === value + change 方法的实现，react 的双向数据绑定
涉及到 label 它的 for 属性绑定点击的 id 可以更加方便我们的操作
涉及到 radio 它的 name 属性绑定相同的值，可以让我们完成只选一个的效果，当然 v-model 属性绑定后 name 可以省略掉
涉及到 checkbox 多选 v-model 绑定一个数组的值，value 定义选中后数组中对应的值，切换选中效果程序内部会帮助我们进行添加删除操作
修饰符 v-model.lazy = "" 加上 lazy 之后输入值不会立即更新到 data 中，在 enter 或者失焦的时候才会进行绑定操作
修饰符 v-model.number 默认绑定为字符串类型，加上 number 可以绑定 number 类型的值
修饰符 v-model.trim 自动去除绑定到 data 中对应值的前后空格

组件的使用

创建组件构造器：Vue.extend()
注册组件：Vue.component()
使用组件
全局组件可以在多个 vue 实例中使用 Vue.component()
局部私有组件在 components 属性里面

组件进阶理解

组件中的 data 为什么不能是一个对象：怕重复创建组件实例造成多个实例共享一个数据对象

父子组件传值 - 父传子

props 定义，子组件可以直接接收也可以用 v-bind: 绑定接收，前者为字符串，后者可以接收变量
props 可以为数组形式：['message']，也可以为对象形式规定传入值的类型：props: { message: String}，还可以写默认值：props: {message: {type: String, default: 'defaultValue'}}

// 数组形式
props: ['message']
// 对象形式
props: {
	message: String
}
props: {
	message: {
    	type: String, // 可以自定义类型
        default: 'defaultValue',
        required: true // 代表属性必传
    },
    list: {
    	type: Array,
        default: _ => {
        	return []
        }
    }
}

props 中驼峰命名的处理，绑定传值形式为 :new-value=""，props 接收形式为 props: { newValue: { } }

父子组件传值 - 子传父

子组件的操作通过 $emit 发射给父组件监听调用，注意子组件内部驼峰命名带来的问题，子组件避免驼峰命名方法通过$ emit 来发射，可以转化成 child-click 的形式
父组件传递到子组件的属性值，子组件改变带动父组件也改变不可以用 v-model 直接绑定 props 里面的值，需要在子组件的 data 中定义值对应 props 里面接收的值，然后可以通过 v-model + watch 或者 value + input ，再然后通过 $emit 发射方法到父组件来实现

父子组件的访问方式

父组件访问子组件： $children 或者$ refs 即 reference 引用
子组件访问父组件：$parent
访问根组件：$root

slot 插槽的使用

组件的插槽是为了让我们封装的组件更具有扩展性，让使用者决定组件内部的一些内容到底展示什么
子组件中预留 slot 插槽位置，在使用的时候定义差异化内容，slot 中可以定义默认值

具名插槽的使用

组件中给定多个插槽，通过 name 属性进行区分，默认替换没有 name 属性的 slot 插槽，更改对应名字的插槽通过 slot 属性给定和 name 属性相同的值来实现

// 使用 slot="" --> v-slot:""
<cpn><span slot="center">content</span></cpn>
// 定义
<template>
	<div>
    <slot name="left"><span>left</span></slot>
    <slot name="center"><span>center</span></slot>
    <slot name="right"><span>right</span></slot>
    <slot></slot>
  </div>
</template>

作用域插槽

父组件替换插槽的标签，但是内容是由子组件来提供

// 定义
<slot :data="messageList"></slot>
// 使用 slot-scope="" v-slot:""=""
<template slot-scope="slot">
  <span v-for="item in slot.data">{{item}}</span>
</template>

路由钩子函数

全局钩子函数 beforeEach(to, from, next) afterEach(to, from)

某个路由的钩子函数

const router = new VueRouoter({
    routes: [{
        path: '/login',
        component: Login,
        beforeEnter: (to, from, next) => {
            // ...
        },
        beforeLeave: (to, from, next) => {
            // ...
        }
    }]
})

路由组件的钩子，在子组件中和 data methods 平级

const routes = [{
    path: '/home',
    component: Home,
    name: 'home'
}]
// Home
beforeRouteLeave(to, from, next) {
    // ...
    next()
},
beforeRouteEnter(to, from, next) {
    // ...
    next()
},
beforeRouteUpdate(to, form, next) {
    // ...
    next()
},
data() {
    return {
        // ...
    }
},
methods: {
    // ...
}

动态组件

<component> 元素是 vue 里面的一个内置组件，在里面使用 v-bind:is=""，可以实现动态组件的效果

表单验证、提交

.sync 修饰符的用法

简化子组件通过 $emit 向父组件传值，固定 update 函数修改对应变量