Since the company has recently continued to carry out learning sessions, so that developers can learn more knowledge and skills, so I wrote a tutorial on vue.js, although there are many online tutorials, but this tutorial is my personal study and The summary of experience is only for those who are learning. The main reason is that interviews are often asked, as well as some sorting of common knowledge points and skills in development. I hope that those who are in the learning stage can avoid detours and be more clear Learn useful knowledge and skills:
This tutorial is mainly divided into three stages: introductory chapter, advanced chapter and advanced chapter. Every content will be released from time to time. Of course, some other learning knowledge will be continuously updated in the later period. , Any questions and areas that need to be expanded are welcome.
1.
Introduction to
vue.js 1.1 Introduction to vue.js 1.2 Environment installation of
vue.js 1.3 Directory structure of
vue.js 1.4 Template syntax and instructions of
vue.js 1.5 Life cycle of
vue.js 1.6 Routing of vue.js
2 , Vue.js advanced chapter
2.1 vue.js custom instructions and filters
2.2 vue.js calculation properties, listeners and mixins mixed into
2.3 vue.js transition animation
2.4 vue.js props and parent-child components Communication
2.5 vue.js asynchronous update strategy and the purpose and principle of
nextTick 2.6 the use of axios in vue.js
Three, vue.js advanced chapter
3.1 vue.js component and slot
3.2 vuex state management mode
3.3 routing guard
3.4 internationalization
3.5 Expansion
Next, we will enter the learning of vue.js advanced articles:
2.1 Custom directives and filters of vue.js
一、vue.js的自定义指令(directive)
vue.js除了默认设置的核心指令（v-model,v-show等）外，也可以注册自定义指令；在vue.js中代码复用的主要形式和抽象是组件，然而在有的情况下要对纯DOM元素进行底层操作，这个时候就需要用到自定义指令了。指令函数可接受所有合法的 JavaScript 表达式。
①全局指令：// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
②局部指令：// 注册一个局部的自定义指令 v-focus
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
二、vue.js的过滤器(filter)
vue.js 允许自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由管道符 | 指示。
Vue.filter('dateFormat', function (dateStr) {
})
2.2 Calculated properties, listeners and mixins of vue.js are mixed
一、vue.js的计算属性（computed）：计算属性一般用在处理比较复杂的逻辑
1.支持缓存，只有依赖数据发生改变，才会重新进行计算；
2.不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化；
3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的。也就是基于 data 中声明过或者
父组件传递的 props 中的数据通过计算得到的值；
4.如果一个属性是由其他属性计算而来的，这个属性依赖其他属性 是一个多对一或者一对一，一般用computed；
5.如果 computed 属性值是函数，那么默认会走 get 方法，函数的返回值就是属性的属性值；在computed中的，
属性都默认有一个get，set方法可以自己定义，当数据变化时，调用 set 方法；
二、vue.js的监听器（watch）：
1.不支持缓存，数据变化，直接会触发相应的操作；
2.watch 支持异步操作；
3.监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；
4.当一个属性发生变化时，需要执行对应的操作，一对多；
5.监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据。
注：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的，这是和 computed 最大的区别。
在 computed 和 watch 方面，一个是计算，一个是观察，在语义上是有区别的。计算是通过变量计算来得出数据，而观察 是观察一个特定的值，根据被观察者的变动进行相应的变化，在特定的场景下不能相互混用，所以还是需要注意 api 运 用的合理性和语义性
三、vue.js的mixins混入：
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件
使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
我们一般在什么时候使用mixins呢？在页面的风格不用，但是执行的方法和需要的数据类似时。
一般组件引用：父组件+子组件 === 父组件+子组件
mixins：父组件+子组件 === new父组件
有点像注册了一个 vue 的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用
2.3vue.js transition animation
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式过渡效果。Vue 提供了内置的过渡封装组件，该组件用于
包裹要实现过渡效果的组件。所有动画的具体实现主要是通过组件 <transition> 和 <transition-group> 来实现的。
<transition> 针对单个元素进行动画渲染（多个元素需要使用一个父元素包裹）；
<transition-group> 针对列表元素进行动画渲染。
vue.js中触发动画的条件主要有4个：
①条件渲染（使用v-if）；②条件展示（使用v-show）；③动态组件；④组件跟节点
在进入/离开的过渡中，会有 6 个 class 切换。
1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，并在过渡/动画完成之后
移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3.v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，
在过渡/动画完成之后移除。
4.v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成
之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6.v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画
完成之后移除。
vue第三方css动画库(Animate.css)：https://animate.style/
vue第三方js动画库(animejs) :https://animejs.com/
2.4 Communication between props of vue.js and parent-child components
一、vue.js中的props
vue的props属性一般用于父组件向子组件传递值，是一个高频使用的特性。
props的使用需要父子组件的配合，在父组件中使用v-bind绑定要传递的值，在子组件中的props属性中
声明接受属性的类型和默认值。
父组件传递：<TestChildren :isColor="isColor"></TestChildren>
子组件props接收：props:{isColor:String}
二、父子组件之间的通信：
父传子：props
父组件监听子组件的值：$emit（子传父）
子传父：.sync是 $emit的一种简写语法，俗称语法糖。
子组件获取父组件的值：$attrs
子组件获取父组件的事件：$listeners
组件间数据共享：EventBus
$parent和$children可以获取到父组件或子组件的dom，一般不推荐
2.5 Vue.js asynchronous update strategy and the purpose and principle of nextTick
Vue异步执行DOM更新。只要观察到数据变化，Vue将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。
如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和
DOM操作上非常重要。然后，在下一个的事件循环“tick”中，Vue刷新队列并执行实际 (已去重的) 工作。
nextTick：主要用来异步操作，在下次 DOM 更新循环结束之后执行延迟回调，异步更新内部是最重要的就是nextTick
方法，它负责将异步任务加入队列和执行异步任务。vue也将它暴露出来提供给用户使用。在数据修改完成后，立即获
取相关DOM还没那么快更新，使用nextTick便可以解决这一问题。
nextTick(()=>{})
2.6 Use axios in vue.js
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
安装：npm install axios；
引入：import axios from "axios"；
axios的特点：
①支持浏览器和node.js
②支持promise
③能拦截请求和响应
④能转换请求和响应数据
⑤能取消请求
⑥自动转换JSON数据
⑦浏览器端支持防止CSRF(跨站请求伪造)
