技術標籤：開始學習Vue

函式簡寫

當想在 bind 和 update 中觸發相同行為，而不關心其他鉤子時，可以寫成函式的形式：

Vue.directive('myshow', (el, binding) => {
  const { value } = binding;
  const display = value ? '' : 'none';
  el.style.display = display;
})

Vue.directive('slice', (el, binding, vnode) => {
  const vm = vnode.context;
  let
 
 { value, expression, arg, modifiers } = binding;

  if(modifiers.number) {
    value = value.replace(/[^0-9]/g, '');
  }


  el.value = value.slice(0, arg);
  vm[expression] = value.slice(0, arg);

  el.oninput = function (e) {
    let inputVal = el.value;

    if(modifiers.number) {
      inputVal = inputVal.
 
replace(/[^0-9]/g, '');
    }

    el.value = inputVal.slice(0, arg);
    vm[expression] = inputVal.slice(0, arg);
  }
})

物件字面量

如果自定義指令需要多個值，可以傳入一個 JS 物件字面量。指令函式能夠接受所有合法的 JS 表示式。

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.
 
log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

過濾器

自定義過濾器，用於一些常見的文字格式化。

過濾器可用在兩個地方：雙花括號插值 和 v-bind 表示式，新增在JS表示式的尾部，由“管道”符號表示:

<!-- 在雙花括號中 -->
{{ message | filter }}

<!-- 在 v-bind 中 -->
<div v-bind:id="id | filter"></div>

定義過濾器

全域性過濾器：

Vue.filter('filter', value => {})

區域性過濾器：

filter () {
  return xxx;
}

引數

當過濾器形式為 msg | filter 時，filter過濾器接收一個引數，引數為msg。

當過濾器形式為 msg | filter('a')時，filter過濾器接收兩個引數，引數為msg, 'a'

過濾器串聯

{{ msg | filterA | filterB }}

在這個例子中，filterA的引數為msg，filterB的引數為filterA。