Vue.js(二).两个重要指令

vue指令

	对于上一篇文章的补充

1、v-cloak指令

• 这个指令保持在元素上直到关联实例结束编译
• 可以解决闪烁的问题
• 和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

  [v-cloak] {
    display: none;
  }

  <!-- {{ message }}不会显示，直到编译结束 -->
  <div v-cloak>
    {{ message }}
  </div>

v-bind指令

• 能够动态添加一个或者多个特性 也可以说属性
• ：后面是传递的参数

<!-- 绑定一个属性 -->
  <img v-bind:src="imageSrc">

  <!-- 动态特性名 (2.6.0+) -->
  <button v-bind:[key]="value"></button>

  <!-- 缩写 -->
  <img :src="imageSrc">

  <!-- 动态特性名缩写  -->
  <button :[key]="value"></button>

• 可以用一个包含键值对的对象来绑定多个特性

<!-- 绑定一个有属性的对象 -->
  <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

• 由于字符串拼接麻烦且易错，所以在绑定 class 或 style 特性时，Vue做了增强，表达式的类型除了字符串之外，还可以是数组或对象。
• 绑定class

  • 对象语法

     <div v-bind:class="{ active : isRed }"></div>
    

    上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 真假，isAction为true时class存在

  • 数组语法
    我们可以把一个数组传给 v-bind:class，以应用一个 class 列表

    <div v-bind:class="[classA, classB]"></div>
    

  • 在数组语法总可以使用三元表达式来切换class

    <div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
    

  • 在数组语法中可以使用对象语法

      <div v-bind:class="[classA, { classB: isB, classC: isC }]">
      <div v-bind:class="classA" class="red">
    

  • v-bind:class 可以与普通 class 共存

      <div v-bind:class="classA" class="red">
    

  • 绑定style

    • 使用对象语法
      看着比较像CSS，但其实是一个JavaScript对象
      CSS属性名可以用驼峰式(camelCase)或者短横线分隔(kebab-case)来命名
      但是使用短横线分隔时，要用引号括起来

      <div v-bind:style="{ fontSize: size + 'px' }"></div>
      

      data: {
        size: 30
      }
      

      也可以直接绑定一个样式对象，这样模板会更清晰：

      <div v-bind:style="styleObject"></div>
      

      data: {
        styleObject: {
          fontSize: '13px'
        }
      }
      

    • 使用数组语法
      数组语法可以将多个样式对象应用到同一个元素

      <div v-bind:style="[styleObjectA, styleObjectB]"></div>
      

• 缩写: :
• 修饰符：
  修饰符 (modifier) 是以英文句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
  • .camel
    由于绑定特性时，会将大写字母转换为小写字母，如：

    <!-- 最终渲染的结果为：<svg viewbox="0 0 100 100"></svg> -->
    <svg :viewBox="viewBox"></svg>
    

    所以，Vue提供了v-bind修饰符 camel，该修饰符允许在使用 DOM 模板时将 v-bind 属性名称驼峰化，例如 SVG 的 viewBox 属性

    <svg :view-box.camel="viewBox"></svg>
    

v-on指令

• v-on 指令可以监听 DOM 事件，并在触发时运行一些 JavaScript 代码
• 事件类型由:后的参数指定

<div id="app">
    <button v-on:click="counter += 1">点击加 1</button>
    <p>按钮被点击了 {{ counter }} 次</p>
  </div>

下面是js代码

const vm = new Vue({
    el: 'app',
    data: {
      counter: 0
    }
  })

• 但是很多事件处理逻辑是非常复杂的，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。所以 v-on 还可以接收一个需要调用的方法名称。

  <div id="app">
  <!-- `addCounter` 是在下面定义的方法名 -->
  <button v-on:click="addCounter">点击加 1</button>
  <p>按钮被点击了 {{ counter }} 次</p>
  </div>
  

  const vm = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    // 在 methods 对象中定义方法
    methods: {
      addCounter: function (e) {
        // this 在方法里指向当前 Vue 实例
        this.counter += 1；
        // e 是原生 DOM 事件
        cosnole.log(e.target)；
      }
    }
  })
  

  • methods中的函数，也会直接代理给Vue实例对象，所以可以直接运行：

    vm.addCounter();
  

  • 除了直接绑定到一个方法，也可以在内联JavaScript 语句中调用方法：

  <div id="app">
    <button v-on:click="addCounter(5)">点击加 5</button>
    <p>按钮被点击了 {{ counter }} 次</p>
  </div>
  

  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      addCounter: function (num) {
        this.counter += 5;
      }
    }
  })
  

• 在内联语句中使用事件对象时，可以利用特殊变量 $event:

  <div id="app">
   <button v-on:click="addCounter(5, $event)">点击加 5</button>
   <p>按钮被点击了 {{ counter }} 次</p>
  </div>
  

  new Vue({
    el: '#app',
    methods: {
      addCounter: function (num, e) {
        this.counter += 5;
        cosnole.log(e.target)；        
      }
    }
  })
  

• 可以绑定动态事件，Vue版本需要2.6.0+

  <div v-on:[event]="handleClick">点击，弹出1</div>  
  

  const vm = new Vue({
    el: '#app',
    data: {
      event: 'click'
    },
    methods: {
      handleClick () {
        alert(1);
      }
    }
  })
  

• 可以不带参数绑定一个对象，Vue版本需要2.4.0+。

  • { 事件名：事件执行函数 }
  • 使用此种方法不支持函数传参&修饰符

  <div v-on="{ mousedown: doThis, mouseup: doThat }"></div>
  

• v-on指令简写：@