Este artículo se reproduce: JS Daily Question
Cuenta pública de WeChat: JS Daily Question
Los diversos comandos y formatos de sintaxis de Vue son fáciles de recordar
1.modificador vue directiva-v-modelo
Sintaxis: v-model.modifier="variable de datos vue"
.number se convierte a tipo numérico usando parseFloat.trim
elimina los caracteres en blanco iniciales y finales.
Los activadores diferidos cambian cuando se pierde el foco en lugar de inupt
2. Propiedades calculadas
Las propiedades calculadas se almacenan en caché para mejorar el rendimiento de la representación.
Si necesita procesar datos existentes para obtener nuevos datos en la página, debe utilizar atributos calculados.
escritura ordinaria
computed: {
//属性名字（计算属性名称）
//属性的值（计算属性处理函数）
计算属性名1 () {
// 对依赖的数据进行处理，且进行return
return
}，
Método de escritura completo
computed: {
"属性名": {
set(值){
},
get() {
return "值"
}
}
}
3.vue oyente
Puede monitorear los cambios en el valor de los datos (datos/calculados, etc.). El valor de los datos tiene tipos: tipo de datos básico, tipo de datos de referencia.Monitoreo
profundo
watch: {
"要监听的属性名": {
immediate: true, // 立即执行
deep: true, // 深度监听复杂类型内变化
handler (newVal, oldVal) {
}
}
}
4.scoped implementa el estilo privado del componente.
<stype scoped>
h2 {
} // 样式只会在当前组件内生效
</style>
5. De padre a hijo
6. Padre del niño
7.ciclo de vida del componente vue
cuatro etapas:
Inicialización => Crear componente => beforeCreate
montaje creado => Representar componente de visualización => beforeMount
actualización en modo => Modificar variables => Activar actualización de vista => beforeUpdate actualizado
Destrucción => Cambiar páginas => El objeto componente se eliminará de la memoria = > antes de la historia destruida
8. Verificación de componentes avanzados
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 带有默认值的对象
propE: {
type: Object,
// 对象或数组默认值必须从一个工厂函数获取
default: function () {
return {
message: 'hello' }
}
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
9. Avance de componentes: componentes dinámicos
<component :is="comName"></component> //comName是变量,值为需要切换的几个组件名
10. Componente de avance-mantenimiento activo
Utilice el componente Vue integrado keep-alive para permitir que los componentes dinámicos se almacenen en caché en lugar de destruirse
<keep-alive>
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
Caché especificada por componente para mantener activo el avance de componentes
Sintaxis:
1.
include="组件名1,组件名2..."
:include="['组件名1'， '组件名2']"
<keep-alive include="name1,name2">
<!-- vue内置的组件component, 可以动态显示组件 -->
<component :is="comName"></component>
</keep-alive>
11. Ranura con nombre de avance de componente
Definición de formato
:
<slot name="xxx">
usar:
<template #xxx></template>;
<template v-slot:xxx></template>
12. Instrucciones personalizadas: uso básico
{
data(){
},
methods: {
},
directives: {
focus: {
// 自定义指令名
inserted(el){
// 固定配置项 - 当指令插入到标签自动触发此函数
el.focus()
}
},
},
}
13. Transferencia y actualización de valores de instrucciones personalizadas
Objetivo: usar instrucciones personalizadas, pasar un valor
Requisitos: definir la instrucción de color: pasar un color, establecer el color del texto para la etiqueta,
modificar la definición de main.js
directives: {
"color":{
inserted(el, binding){
// 插入时触发此函数
el.style.color = binding.value;
},
update(el, binding){
// 更新绑定的变量时触发此函数=》手动更新
el.style.color = binding.value;
}
}
}
Cámbielo en Direct.vue
<p v-color="theColor" @click="changeColor">使用v-color指令控制颜色, 点击变蓝</p>
<script>
data() {
return {
theColor: "red",
};
},
methods: {
changeColor() {
this.theColor = 'blue';
},
},
</script>
Resumen: v-xxx, instrucción personalizada, obtención de DOM nativo, operación personalizada
14.solicitud de axios
async loadData(){
const res= await axios.get("http://.......")
// console.log(data);
}
},
created(){
this.loadData()
}
Este artículo se reproduce: JS Daily Question
Cuenta pública de WeChat: JS Daily Question