VUE指令（一）

vue会根据不同的指令，针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

        1、v-text：设置元素的文本内容，不会解析div标签、样式等；

        2、v-html ：设置元素的innerHTML（v-html=“表达式”），会解析div标签、样式等；

  

    
{{content}}
    
{{content}}
    
{{content}}
  

  data: {
        content: 'vue使用步骤'
  }

        3、v-show：通过切换 display:none来控制元素显示还是隐藏，v-show = "表达式（值 true 显示， false 隐藏）"，适合于频繁切换显示隐藏的场景；

        4、v-if：基于条件判断，通过创建或移除元素节点来控制元素的显示和隐藏，v-if = "表达式（值 true 显示， false 隐藏）"，适合于显示隐藏切换不频繁的场景；

        5、v-else/v-else-if：配合v-if使用，进行链式调用，v-else-if="表达式"，v-else。需紧跟v-if使用

 

    
性别：♂ 男
    
性别：♀ 女
    

    
成绩评定A
    
成绩评定B
    
成绩评定C
    
成绩评定D
 

        6、v-on：给元素添加事件监听及处理逻辑；v-on:事件名="内联语句/methods中的函数名"；v-on还可简写为@；如果再模板（页面）中使用事件对象，可以使用$event，如果再js中使用事件对象，则使用事件处理函数的形参e；

    -
    {{ count }}
    +

  

    v-on函数名
  
  methods: {
    fn () {
      console.log('v-on函数名')
    }
  }

        修饰符：.stop - 调用 event.stopPropagation()；

        .prevent - 调用 event.preventDefault()；

      .capture - 在捕获模式添加事件监听器；

      .self - 只有事件从元素本身发出才触发处理函数；

      .{keyAlias} - 只在某些按键下触发处理函数；

      .once - 最多触发一次处理函数；

      .left - 只在鼠标左键事件触发处理函数；

      .right - 只在鼠标右键事件触发处理函数；

      .middle - 只在鼠标中键事件触发处理函数；

      .passive - 通过 { passive: true } 附加一个 DOM 事件。

         7、v-bind：动态的设置html的标签属性（src，title，url等），v-bind:属性名="表达式"，可简写为:属性名="表达式"；

data: {
    imgUrl: './imgs/10-02.png',
    msg: 'hello 波仔'
}