vue easy to forget common properties, methods, and often encounter problems processing (continuous supply)

First, the property is easy to forget
1, dynamically add styles
: class class class binding, generally used to modify the style

• Using ternary operator :: class = "? ClassA 'class-a': 'class-b'"
• A plurality of support object class = style bindings :: "{ 'class-a': isA, 'class-B':
  isB Is}", isA, isB Is is true attribute can use class-a

2, ref use

• In addition to obtaining ref dom elements of the page, you can also get subassembly data and to invoke methods subassembly;
• In general, access to DOM elements, document.querySelector ( ". Input1") get the dom node, and then get the value of input1.
• After the ref binding, we do not need to obtain a dom node, input1 directly binding on the above input, then $ refs inside to call on the line.

//然后在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, data monitor use of watch

• watch monitor two parameters represents the new value and the old values
• Monitor objects in the data requires quotes

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, commonly used modifiers

• @ Click.stop: stop bubbling
• @ Click.prevent: to prevent the default event

Second, the problem of processing
1, vue introduction of pictures but can not display correctly.
problems encountered when vue image path as variables introduced, the introduction of the direct path can not display the picture, two solutions:

• import variables into
• the require ( "path") is introduced

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, the event can not trigger assembly

*** Since the time component uses @click definition must be added .native! ! ! ! !

Third, the summary

• We will continue to add supplements are found and treated after the problems in the project