Vue 通过自定义指令回顾v-内置指令(小结)

// 全局注册 自定义指令
Vue.directive(‘mydir',{
  // 指令选项
});
// 全局注册 自定义指令函数
Vue.directive('mydir', function () {
 // 这里将会被 `bind` 和 `update` 调用
})
// 局部注册（只针对组件内元素）
export default {
  directives: {
    mydir: {
      // 指令选项
    }
  }
}

Vue.directive('mydir', {
 bind: function () {
  // 只调用一次，指令第一次绑定到元素时调用，用于在绑定元素时执行一次的初始化动作。
  },
 update: function () {
  // 第一次是紧跟在 bind 之后调用，获得的参数是绑定的初始值，
  // 之后被绑定元素所在的模板更新时调用，而不论绑定值是否变化，可以忽略不必要的模板更新。  
  }, 
 inserted: function () {
  // 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
  },
 componentUpdated: function () {
  // 被绑定元素所在模板完成一次更新周期时调用。
  },
 unbind: function () {
  // 只调用一次， 指令与元素解绑时调用。
  }
})

// 一个带自定义指令的元素
<div v-mytest:foo.m1.m2="1+1">MyDirective</div>

// 部分 JS 代码
export default {
  directives:{
   mytest: {
    bind: function (el, binding, vnode) {
     console.log(el)
     console.log(binding)
     console.log(vnode)
    }
   }
  }
}

<a :href="url" rel="external nofollow" rel="external nofollow" :id="linkID">链接</a>

// js
data : {
  url: 'https://www.baidu.com/',
  linkID : 'myid'
}

<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" id="myid">链接</a>

<!-- class 绑定 -->
<div :class="{colorRed: isRed}"></div>

<div class="colorRed"></div>

<!-- class 绑定，传入多个属性 -->
<div :class="{ classA: isA, classB: isB }">

<div class="classA classB"></div>

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>

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

<div :class="[activeA, activeB]"></div>

<div class="class1 class2"></div>

<div :class="[isA ? activeA : '', activeB]">

<div :class="[{activeA: isA}, activeB]">

<!-- 通过 prop 修饰符绑定 DOM 属性 (property) -->
<div v-bind:text-content.prop="text"></div>

<!-- .camel 修饰符(2.1.0+)将 v-bind 属性名称 kebab-case 驼峰化为 camelCase -->
<svg :view-box.camel="viewBox"></svg>

<!-- .sync 修饰符(2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器-->
<text-document v-bind:title.sync="doc.title"></text-document>
<!-- 批量绑定，将 doc 对象中的每一个属性 (如 title) 都作独立的 prop ，各自添加 v-on 监听器-->
<text-document v-bind.sync="doc"></text-document>

<a :href="url" rel="external nofollow" rel="external nofollow" :id="linkID">链接</a>
<!-- 监听一个事件 -->
<button @click="changeFun">change button</button>

// 部分 JS 代码
methods :{
 changeFun : function () {
  this.linkID = 'changeID' // 指向当前组件本身
 }
}

<a href="https://www.baidu.com/" rel="external nofollow" rel="external nofollow" id="changeID">链接</a>

<!-- v2.4.0+ -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

<!-- 停止单击事件冒泡，调用 event.stopPropagation()-->
<button @click.stop="doThis"></button>

<!-- 阻止默认行为，调用 event.preventDefault() -->
<button @submit.prevent="doThis"></button>

<!-- 添加事件侦听器时使用 capture 事件捕获模式 -->
<button @click.capture="doThis"></button>

<!-- 点击回调只会触发一次 -->
<button @click.once="doThis"></button>

<!-- 只当点击鼠标左键时触发(2.2.0) -->
<button @click.left="doThis"></button>

<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>

<!-- 只有在 `keyCode` 是 5 时调用 `vm.submit()` -->
<input v-on:keyup.5="submit">

<!-- 为重要的 keyCode 如 enter 提供别名-->
<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->
<input @keyup.enter="submit">

<p v-if="status === 1">当 status 为 1 时显示此行</p>

<p v-else-if="status === 1">当 status 为 2 时显示此行</p>

<p v-else>其它情况默认显示此行</p>

<p v-show="status === 1">当 status 为 1 时显示此行</p>

<p style="display: none;">当 status 为 1 时显示此行</p>

<!-- 遍历一个数组 -->
<div v-for="item in items">{{ item.text }}</div>

<!-- 提供第二个的参数为数组的索引 -->
<div v-for="(item, index) in items">{{ index }} - {{ item.text }}</div>

<!-- 遍历对象属性 -->
<div v-for="value in object">{{ value }}</div>

<!-- 提供第二个可选的参数：对象的键名 -->
<div v-for="(value, key) in object">{{ key }}: {{ value }}</div>

<!-- 提供第三个的可选参数：对象的索引 -->
<div v-for="(value, key, index) in object">{{ index }}. {{ key }}: {{ value }}</div>

<!-- 输入框 -->
<input type="text" v-model="message" placeholder="edit me">
<!-- 文本域 -->
<textarea v-model="message" placeholder="edit me"></textarea>
<!-- 实时更新 -->
<p>Message is: {{ message }}</p>

<!--单选按钮的互斥效果-->
<div id="example-radio">
 <input type="radio" id="one" value="One" v-model="picked">
 <label for="one">One</label>
 
 <input type="radio" id="two" value="Two" v-model="picked">
 <label for="two">Two</label>
 
 <!-- picked 显示的是 value 的值 -->
 <p>Picked: {{ picked }}</p>
</div>

<!--多选按钮-->
<div id='example-checkbox'>
 <input type="checkbox" id="one" value="One" v-model="checkedNames">
 <label for="jack">Jack</label>
 <input type="checkbox" id="two" value="Two" v-model="checkedNames">
 <label for="john">John</label>

  <!-- Checked 显示的是 value 组成的数组 -->
 <p>Checked: {{ checkedNames }}</p>
</div>

<!-- 不显示未编译的标签直到实例初始化完 -->
<div v-cloak>{{ message }}</div>
<!-- 需要配合 CSS 隐藏样式 [v-cloak]{ display: none;}-->

<!-- 只渲染一次，随后的渲染将被视为静态内容并跳过 -->
<div v-once>{{ message }}</div>

<!-- 不会被编译，直接显示显示原始{{ }}标签 -->
<div v-pre>{{ message }}</div>