vue常用易忘属性、方法及常遇问题处理（不断补充）

一、易忘记属性
1、 动态添加样式
:class 绑定class类，一般用于修改样式

• 可使用三目运算符：:class="classA ? ‘class-a’ : 'class-b’ "
• 支持对象多个样式绑定：:class="{ ‘class-a’: isA, ‘class-b’:
  isB}”，isA、isB为true即可使用class-a属性

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！！！！！

三、总结

• 都是在项目中发现及处理过的问题之后也会不断补充添加