vue fácil olvidar propiedades comunes, métodos, y, a menudo encuentran problemas de procesamiento (suministro continuo)

En primer lugar, la propiedad es fácil olvidar
1, añadir dinámicamente estilos
: la unión de la clase clase clase, generalmente usado para modificar el estilo

• Usando operador ternario :: class = " 'Clase A' claseA:? 'Clase B'"
• Una pluralidad de fijaciones class = estilo de objeto de apoyo :: "{ 'clase-A': ISA, 'clase B':
  ISB es de}", ISA, ISB es de es cierto atributo puede utilizar la clase-A

2, usa ref

• Además de obtener los elementos DOM árbitro de la página, también se puede obtener datos de subconjuntos y para invocar métodos subconjunto;
• En general, el acceso a los elementos DOM, document.querySelector (". Input1" ) obtener el nodo DOM y, a continuación, obtener el valor de INPUT1.
• Después de la unión que el árbitro, que no es necesario para obtener un nodo DOM, la unión INPUT1 directamente en la entrada anterior, entonces $ árbitros en el interior de llamada en la línea.

//然后在javascript里面这样调用：this.$refs.input1  这样就可以减少获取dom节点的消耗了
<div id="app">
    <input type="text" ref="input1"/>
    <button @click="add">添加</button>
</div>
<script>
new Vue({
    el: "#app",
    methods:{
    add:function(){
        this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
        }
    }
})
</script>

3, los datos de seguimiento de uso de reloj

• monitor de reloj dos parámetros representa el nuevo valor y los valores antiguos
• objetos en el monitor de datos requiere cotizaciones

watch: {
//当reqData.keyword变化时候调用this.getVideoDetailFnc()
"reqData.keyword": function() {
	this.getVideoDetailFnc();
}
// 变量typeNum修改的时候输出val, oldval，val代表当前参数
typeNum: function(val, oldval) {
    console.log("typeNum:", val, "oldvalue:", oldval);
    },
},

4, modificadores usados ​​comúnmente

• @ Click.stop: burbujeante parada
• @ Click.prevent: para evitar que el evento predeterminado

En segundo lugar, el problema de procesamiento
1, introducción vue de fotos pero no puede mostrar correctamente.
problemas encontrados cuando ruta de la imagen vue como variables introdujo, la introducción de la trayectoria directa no puede visualizar la imagen, dos soluciones:

• Importa variables a
• la requieren ( "camino") se introduce

import FeiYongQingDan from "@/assets/baoxiao/123.png"
export default {
  name: "",
  data() {
    return {
      img_url: "",
    };
  },
  methods: {
    alert(type) {
      this.show_alert = true; //显示弹窗
      this.alert_type = type;
      this.show_img_lsit = false;
      if (type == 1) {
        this.alert_title = "title1";
        this.img_url = require("@/assets/baoxiao/123.png");
      } else if (type == 2) {
        this.alert_title = "title2";
        this.img_url = FeiYongQingDan;
      } 
    }
  },
  }

2, el evento no puede desencadenar conjunto

*** Desde los usos componente de tiempo @Haga clic definición hay que añadir .native! ! ! ! !

En tercer lugar, el resumen

• Vamos a seguir añadiendo suplementos son detectados y tratados después de los problemas en el proyecto