vue常用易忘屬性、方法及常遇問題處理（不斷補充）

一、易忘記屬性

1、 動態添加樣式
:class 綁定class類，一般用於修改樣式

• 可使用三目運算符：:class="classA ? ‘class-a’ : 'class-b’ "

• 支持對象多個樣式綁定：:class="{ ‘class-a’: isA, ‘class-b’:
  isB}”，isA、isB爲true即可使用class-a屬性

• 多個樣式綁定一個變量：[‘a’,‘b’:isB]
  2、ref的使用

• ref除了可以獲取本頁面的dom元素，還可以拿到子組件中的data和去調用子組件中的方法；

• 一般來講，獲取DOM元素，document.querySelector（".input1"）獲取這個dom節點，然後在獲取input1的值。

• ref綁定之後，我們就不需要在獲取dom節點了，直接在上面的input上綁定input1，然後$refs裏面調用就行。

//然後在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、數據監聽watch的使用

• watch監聽兩個參數分別表示新值和舊值
• 監聽對象裏的數據需要加引號

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、常用修飾符

• @click.stop:阻止冒泡
• @click.prevent:阻止默認事件

二、問題處理

1、vue引入圖片正確卻顯示不了。
vue圖片路徑作爲變量引入的時候遇到的問題，直接路徑引入圖片顯示不了,兩個解決方法：

• import變量引入
• require(“路徑”)引入

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、組件的事件無法觸發

***自定義的組件使用@click的時候必須加上 .native！！！！！

三、總結

• 都是在項目中發現及處理過的問題之後也會不斷補充添加