class绑定与style绑定；自定义指令

style绑定

举例：

:style="{color:,fontSize:fontSize+'px'}"
:style="[style1,style2]"
​
data(){
    return{
        style1:{},  //作为参数
        style2:{},  //作为参数
    }
}
//其中 activeColor/fontSize 是 data 属性

class绑定

1. :class="xxx"

2. 表达式是字符串：“classA”

3. 表达式是对象：{classA:isA,classB:isB}

4. 表达式是数组：['classA','classB']

---

自定义指令

首先在标签中自定义出自己的指令比如v-cui然后在script中directives中对自定义标签cui做出操作

举例：

 <div id="cui">
      <div v-cui></div>
    </div>
    
    
    <script>
  let vm = new Vue({
    el: "#cui",
    directives: {
      cui(a) {
        a.style.border = "1px solid red";
        a.style.height = "250px";
        a.style.width = "250px";
​
        var input = document.createElement("input");
        input.style.background = "pink";
        input.autofocus = true;
        a.appendChild(input);
      },
    },
  });
</script>

cui（a）参数是指当前的标签

---

过滤器filter

举例：

 <div>{{message | myCut | myAdd}}</div>
 <script>
    Vue.config.productionTip = false
    let vm = new Vue({
      el: '#root',
      data: {
        message: "欢迎大家的到来"
      },
      methods: {
      },
      filters: {
        myCut(val) {
          // console.log(val)
          return val.slice(0, 4)
        },
        myAdd(val) {
          // console.log(val,"###")
          return val + "来到北京工作"
​
        }
      }
    })
  </script>

---

组件通信

父子传值props

子父传值$emit

父组件获取子组件属性this.$refs

子组件获取父组件的属性和方法

获取父组件的方法 this.parent.methods

获取父组件属性 this.$parents.options