Propiedades y métodos en el objeto de instancia de Vue---kalrry
01、el
- es un atributo único de la instancia raíz, que representa el elemento raíz
- Proporciona un objeto DOM en la página como destino de montaje de la instancia de Vue. Puede ser un selector o una instancia de elemento DOM.
02, datos
- Las propiedades en el objeto de datos responden, y la configuración de propiedades directamente en la instancia de vm no responde
- La capacidad de respuesta de los datos puede ser interrumpida por Object.freeze()
- El uso del atributo de datos:
En la función de la instancia de Vue: use this.prop para llamar (métodos, calculados, esto se vincula automáticamente a la instancia de vue)
Dentro de la etiqueta: acceda a través de la expresión { {porp}}
En la etiqueta : llamada a través de enlace: [prop] = "prop"
03, métodos
- Generalmente se usa para configurar la función de devolución de llamada de eventos
- En la expresión, puede llamar al método para lograr el mismo efecto de visualización que llamar a la propiedad calculada.
- A diferencia de los métodos calculados, no tienen caché y el código de la función se compila y ejecuta cada vez que se llama.
04, calculado
- Las propiedades calculadas no deben llamarse con () cuando se hace referencia a ellas, solo utilícelas como propiedades ordinarias.
- Cuando los datos en datos cambien, el cálculo se volverá a calcular y el resultado del cálculo se guardará en un nuevo atributo
- El resultado de la propiedad computada se almacenará en caché para su uso directo la próxima vez, siempre que los datos en el método de propiedad computada no hayan cambiado, no se volverán a calcular
4. Debe haber un
ejemplo de valor de retorno en el método de propiedad computada
<div id="app">
firstname：<input type="text" v-model="firstname" />
lastname：<input type="text" v-model="lastname" />
fullname：<input type="text" v-model="FullName" />
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstname: '',
lastname: ''
},
computed: {
FullName() {
//FullName就是新生成的属性
return this.firstname + '-' + this.lastname
}
}
})
</script>
05, plantilla
1. Una plantilla de cadena, que puede ser un selector o una cadena con contenido html
06, reloj
- Se utiliza principalmente para monitorear los cambios de las propiedades existentes de la instancia de vue y no puede monitorear las propiedades que no existen.
- el reloj puede obtener el objeto anterior del cambio y el nuevo objeto después del cambio en la lista de parámetros
- el reloj puede detectar cambios en las propiedades profundas del objeto y establecer si la función de devolución de llamada se activa inmediatamente
ejemplo
<div id="app">
firstname：<input type="text" v-model="firstname" />
lastname：<input type="text" v-model="lastname" />
fullname：<input type="text" v-model="FullName" />
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstname: '',
lastname: '',
FullName: ''
},
watch: {
firstname(newVal, oldVal) {
this.FullName = newVal + '-' + this.lastname
},
lastname(newVal, oldVal) {
this.FullName = this.firstname + '-' + newVal
}
}
})
</script>
07. Objeto de atributo de la instancia de vue
La instancia de Vue proporciona algunas propiedades y métodos de instancia útiles para el mundo exterior, que se representan con el prefijo $+ nombre de propiedad/nombre de método para distinguirlo de las propiedades definidas por el usuario.
Atributos:
vm.$el:根实例的挂载DOM结点
vm.$parent:当前实例的父实例
vm.$children:当前实例的子实例
vm.$root:组件树的根实例,如果没有父实例,vm.$root指向自己
vm.$refs:注册过 ref 特性 的所有 DOM 元素和组件实例
vm.$data:指向实例的data属性
vm.$props:指向当前组件的props对象属性
vm.$watch:指向实例的watch方法
vm.$set:这个方法给实例设置的属性是响应式的.直接设置vm.prop不是响应式的
vm.$mount:这个方法等同于el属性,都是给vue实例挂载DOM结点，底层实现一样
vm.$nextTick:DOM完成更新后，自动执行，调用nextTick中的回调函数
Ejemplo: Obtener elemento DOM
<div id="app">
<h1 @click="showMessage" ref="h1">哈哈哈</h1>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
showMessage() {
console.log(this.$refs.h1.innerHTML)
}
}
})
</script>
08, antes de crear
Disparador: ejecutar antes de la creación de la instancia
Función: lo principal que se debe hacer en esta etapa es inicializar los eventos y el ciclo de vida
Alcance: no se pueden obtener datos, no se puede obtener el nodo DOM
09, creado
Disparador: después de crear y ejecutar la instancia, a menudo se usa para operar la
función vue: lo principal que se debe hacer es la observación de datos, puede obtener los datos a través de esto, la solicitud Ajax más temprana se puede enviar aquí y la representación
El rango se puede hacer modificando los atributos: puede obtener los datos, no se puede obtener el nodo dom montado, la modificación de los datos aquí no activará las funciones beforeUpdate y gancho actualizado
10, antes del montaje
Desencadenador: se activa antes de la representación de datos, cuando se ha montado el nodo dom, pero los datos no se han representado en la plantilla html
Función: finaliza la compilación de la plantilla, prepara el
rango de representación de datos: en este momento, la plantilla de compilación ha finalizado, el nodo dom se puede obtener, y el atributo de datos se puede modificar, pero los datos no se han representado finalmente en la página, y no se puede obtener el resultado de representación final de html
11, montado
Disparador: el nodo dom está montado y los datos se han procesado en la plantilla html, que es para el método que necesita operar el dom, como al cargar el complemento jQuery, cargar la función correspondiente en él
Función: Renderizar los datos al
rango de nodos DOM: puede acceder y modificar el atributo de datos, los datos se han procesado en el nodo DOM, el DOM representado se puede manipular y las funciones beforeUpdate y gancho actualizado se pueden activar
new Vue({
el: '#app',
data: {
name: 'onion'
},
created() {
console.log(this.name)
}
})
12, componentes
Significa introducir componentes, los componentes pueden estar escritos en otros archivos o en este archivo, necesitan ser asignados a variables.