【Vue】グローバルAPIを✅ - subaru-hello’s blog

ハイボール7%3杯で酩酊になりました。酒ケジュールの設計を見直そうと思っている23期中野昴です。

今回は、グローバルAPIについて学習していきます。

グローバルAPIとは

vueで使用できる、Vueの動作をグローバルに変更するAPI

複数用意されているみたいです。

よく見るグローバルAPIを列挙していきます。

Vue.nextTick( [callback, context] )

引数:
- {Function} [callback]
- {Object} [context]
使用方法:

callback を延期し、DOM の更新サイクル後に実行される。

基本的には、setTimeout( callback, 0)と同じ挙動をする。
```
# データを変更する
vm.msg = 'Hello'
# DOM 更新前
Vue.nextTick(function () {
# DOM 更新後の処理
})

// promise での使用法 
Vue.nextTick()
  .then(function () {
    # DOM 更新後の処理
  })
```
effect( id, definition )

特定のビューモデルに依存しないエフェクト(v-ifと組み合わせて対象値変更時に特定処理を行う)を生成できる。

例）1秒おきに表示を切り替えてコンソールに出力するコード
```
<div id="sample">
  <div v-effect="foo" v-if="bar">message</div>
</div>
<script src="js/vue.js"></script>
<script>
  Vue.effect('foo', {
    enter: function(el,  insert,  timeout){
      insert();
      console.log('inserted');
    },
    leave: function(el,  remove,  timeout){
      remove();
      console.log('removed');
    },
  });
  var vm = new Vue({
    el: '#sample',
    data: {
      bar: false
    }
  });
  setInterval( function() {
    vm.bar = vm.bar ? false : true
  }, 1000);
</script>
```
コンポーネント(Vue.component())

Vue.component() は、コンポーネントと呼ばれる Vue の独自要素を定義します。

下記の例では、'<strong>Hello!</strong>' を表示する独自要素 <my-element-140> を定義している。
```
<div id="app-140">
  <my-element-140></my-element-140>
</div>
<script>
Vue.component('my-element-140', {
  template: '<strong>Hello</strong>'
})
var app140 = new Vue({
  el: '#app-140',
})
</script>
```
表示

Hello

このテンプレートは他のコンポーネントで呼び出す事ができる。

カスタムディレクティブの登録(Vue.directive())

v-for や v-show などのディレクティブに加えて、グローバルに独自のカスタムディレクティブを追加することができます。

v-の後に好きな文字をつけて、独自のディレクティブを作る事ができる。

下記の例では、フォントサイズを 16pt にする v-font16 カスタムディレクティブを作成している。
```
<div id="app-144">
  <div v-font16>Hello!</div>
</div>
<script>
Vue.directive('font16', {
  inserted: function(el) {
    el.style.fontSize = '16pt'
  }
})
var app144 = new Vue({
  el: '#app-144'
})
</script>
```
表示

Hello!

グローバルAPIとは

Vue.nextTick( [callback, context] )

effect( id, definition )

コンポーネント(Vue.component())

カスタムディレクティブの登録(Vue.directive())