Dado que recientemente la empresa ha continuado realizando sesiones de aprendizaje para que los desarrolladores puedan aprender más conocimientos y habilidades, escribí un tutorial sobre vue.js. Aunque hay muchos tutoriales en línea, este tutorial es mi estudio personal y el resumen de la experiencia es solo para aquellos que están aprendiendo. La razón principal es que a menudo se solicitan entrevistas, así como algunos puntos de conocimiento y habilidades comunes en desarrollo. Espero que aquellos que están en la etapa de aprendizaje puedan evitar desvíos y ser más claros. Aprenda conocimientos útiles y habilidades:
Este tutorial se divide principalmente en tres etapas: capítulo introductorio, capítulo avanzado y capítulo avanzado. Cada contenido se publicará de vez en cuando. Por supuesto, algunos otros conocimientos de aprendizaje se actualizarán continuamente en el período posterior., Cualquier pregunta y las áreas que necesitan ser ampliadas son bienvenidas.
1.
Introducción a
vue.js 1.1 Introducción a vue.js 1.2 Instalación del
entorno de vue.js 1.3 Estructura de directorio de
vue.js 1.4 Sintaxis de la plantilla e instrucciones de
vue.js 1.5 Ciclo de vida de
vue.js 1.6 Enrutamiento de vue.js
2 , Vue.js capítulo avanzado
2.1 instrucciones y filtros personalizados de
vue.js 2.2 propiedades de cálculo de vue.js, oyentes y mixins mezclados en
2.3 vue.js animación de transición
2.4 accesorios de vue.js y componentes padre-hijo Comunicación
2.5 estrategia de actualización asincrónica de vue.js y el propósito y principio de
nextTick 2.6 usando axios en vue.js
Three, vue.js advanced capítulo
3.1 componente vue.js y ranura
3.2 modo de administración de estado vuex
3.3 routing guard
3.4 internacionalización
3.5 Expansión
A continuación, ingresaremos al aprendizaje de los artículos avanzados de vue.js:
2.1 Directivas personalizadas y filtros de 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 Las propiedades calculadas, los oyentes y las combinaciones de vue.js se mezclan
一、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.3 animación de transición de vue.js
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 Comunicación entre accesorios de vue.js y componentes padre-hijo
一、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 Estrategia de actualización asincrónica de Vue.js y el propósito y principio de nextTick
Vue异步执行DOM更新。只要观察到数据变化,Vue将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。
如果同一个watcher被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和
DOM操作上非常重要。然后,在下一个的事件循环“tick”中,Vue刷新队列并执行实际 (已去重的) 工作。
nextTick:主要用来异步操作,在下次 DOM 更新循环结束之后执行延迟回调,异步更新内部是最重要的就是nextTick
方法,它负责将异步任务加入队列和执行异步任务。vue也将它暴露出来提供给用户使用。在数据修改完成后,立即获
取相关DOM还没那么快更新,使用nextTick便可以解决这一问题。
nextTick(()=>{})
2.6 Usar axios en vue.js
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
安装:npm install axios;
引入:import axios from "axios";
axios的特点:
①支持浏览器和node.js
②支持promise
③能拦截请求和响应
④能转换请求和响应数据
⑤能取消请求
⑥自动转换JSON数据
⑦浏览器端支持防止CSRF(跨站请求伪造)