vue.js

Un marco progresivo para crear interfaces de usuario.

Tutorial oficial: https://cn.vuejs.org/v2/guide/
Edición online: https://codepen.io/pen

El núcleo de Vue.js es un sistema que permite el uso de sintaxis de plantilla concisa para representar datos de forma declarativa en el DOM.

Sintaxis de la plantilla de Vue

Interpolación

Texto: { {msg}}
Realice la interpolación solo una vez y no cambie con el objeto en el siguiente: { {msg}}
Inserte la etiqueta html:
Características (atributos en etiquetas html):
Expresión de JavaScript (no se puede acceder a las variables globales creadas por el usuario): { {msg? 'YES': 'NO'}}

instrucción

v-if permite que Vue determine si cargar esta etiqueta:
Ahora me ves
v-bind puede pasar parámetros a la URL:
v-on se usa para monitorear eventos DOM:
Escriba expresiones JavaScript entre corchetes para los parámetros dinámicos, sin nulos, comillas o espacios:
<a v-bind:[attributeName]= 0000-url”>
<a v-on:[eventName]=”doSomething”>
El modificador de instrucción ".":
.Prevent le dice a la instrucción v-on que llame a event.preventDefault () para el evento activado,
como por ejemplo:

abreviatura

Vue proporciona abreviaturas para v-bind y v-on de uso común, y el sitio web oficial afirma que los navegadores que admiten Vue admitirán esta escritura:

v-bind =: Tales como: abreviatura de
sintaxis completa
v-on = @ como:
sintaxis completa
<a @click="doSomething"> abreviatura

Atributo calculado

De hecho, las expresiones javascript se pueden escribir en la sintaxis de la plantilla de Vue:
{ { message.split('').reverse().join('') }}
pero para mejorar la legibilidad y el mantenimiento posterior, las instancias de Vue tienen un atributo "calculado" más poderoso: calculado.

var vm = new Vue({
  el: '#example',
  data: {message: 'Hello'},
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

Luego, directamente { {reversedMessage}}puede obtener un valor, y este mensaje se usa en el cálculo como respuesta, por lo que cuando el valor de modificación del mensaje de la consola, seguirán las modificaciones del mensaje inverso.
** PD: los atributos calculados se almacenan en caché. ** Es decir, si el valor de la dependencia de respuesta (mensaje en el ejemplo anterior) no cambia, entonces múltiples llamadas al atributo de cálculo unificado obtendrán el resultado del primer cálculo. La explicación oficial es aumentar la velocidad de cálculo cuando se realiza una gran cantidad de cálculos sobre el mismo valor. Por tanto, este atributo calculado tiene una determinada función de seguimiento.
Además, los anteriores son todos métodos getter en propiedades calculadas, el sitio web oficial señala que también existen métodos setter:

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

Aquí es cuando se ejecuta activamente: vm.fullName = 'willson H'se llamará al método setter.
Siento que es innecesario. Si necesita modificar el nombre completo, la mayoría de las veces necesita modificar el nombre y apellido. En este momento, el cálculo se activará automáticamente. Agregar un establecedor manualmente hace que Vue parezca más complicado.

Métodos de atributo de método

Se puede llamar directamente entre llaves.

<p>Reversed message: "{
   
   { reversedMessage() }}"</p>
// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

Los resultados de los cálculos de los dos ejemplos anteriores son exactamente los mismos y los atributos calculados se almacenan en caché en función de sus dependencias de respuesta. Sin embargo, la diferencia es que los atributos calculados se almacenan en caché en función de sus dependencias de respuesta. Se volverán a evaluar solo cuando cambien las dependencias reactivas relacionadas. El atributo del método se recalcula cada vez que se llama.

Reloj de atributo de escucha

Vue proporciona una forma más general de observar y responder a los cambios de datos en instancias de Vue: escuchar propiedades. Esto significa que cuando cambia la fuente de datos, se llamará al método correspondiente en la propiedad de escucha.

<div id="div1">
  城市：<input v-model="city">
  整理：<p>{
   
   {cityStr}}</p>
</div>

var vm = new Vue({
  el: '#div1',
  data: {
    city: '',
    cityStr: ''
  },
  watch: {
    city: function (val) {
      if(val.indexOf('市')<0){
        this.cityStr = val + '市'
      }else{
        this.cityStr = val 
      }
    }
  }
})

El ejemplo que di es relativamente simple. Los ejemplos que se dan en el sitio web oficial involucran la biblioteca de herramientas lodash y la biblioteca http axios. Si está interesado, puede echar un vistazo a los ejemplos en el sitio web oficial. El
oyente se utiliza principalmente cuando necesita personalizar el oyente. De hecho, puede usarlo la mayor parte del tiempo. Se pueden resolver los atributos de cálculo.

Declaración de derechos de autor: el contenido del artículo se resume en Internet. Si viola los derechos del autor original, comuníquese conmigo para su eliminación o autorización.

Aprendizaje y aplicación de Vue.js (dos)