Labs

<< 最初 < 前ページ 次ページ > 最後 >>
icon IE11以下でclosest() を利用する (2019/07/28)
IE11以下では closest() を利用できません。
*最も近い親要素の取得
MDNによると、Elementにプロトタイプすることで対策できるとしている。
MDN: closest#Polyfill
    if (!Element.prototype.matches) {
        Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
    }
    if (!Element.prototype.closest) {
        Element.prototype.closest = function(value) {
        var element = this;
        do {
            if (element.matches(value)) return element;
            element = element.parentelementement || element.parentNode;
        } while (element !== null && element.nodeType === 1);
            return null;
        };
    }
icon コンポーネントを親に登録 (2019/07/28)
親のVue にコンポーネントを登録することで、子のイベントを管理できる

コンポーネント作成(変数)

var コンポーネント変数 = Vue.extend({
      template: 'HTML',    //methods で登録したメソッドを実行可能
      data: function () { return { データ名 : 値 } },   //コンポーネント内で利用できる変数を登録
      methods: { コンポーネント内のメソッド }    //template 内で利用可能
)}
親に登録しない場合は、Vue.component() でもよい
var コンポーネント変数 = Vue.component('counter-button', {
      template: 'HTML',
      data: function () { return { データ名 : 値 } },
      methods: { コンポーネント内のメソッド }
})

コンポーネント登録

new Vue({
    el: "#id",
    components : { 'HTMLタグ名' : コンポーネント変数 }, //タグ名はケバブケース(kebab-case)
    data: { オブジェクト }  //Element内のオブジェクト
    methods: { メソッド }  //Element内のメソッド
}

サンプル(Vue.js入門 基礎から実践アプリケーション開発まで:第3章)

HTML

  <div id="fruits-counter">
    <div v-for="fruit in fruits">
      {{fruit.name}}
      :
      <counter-button v-on:increment="incrementCartStatus()"></counter-button>
     //v-on:increment カスタムイベント設定し、他のメソッドを実行
    </div>
    <p>Total: {{total}}</p>
  </div>

Javascript

    var counterButton = Vue.extend({
      template: '<span>{{counter}} amounts <button v-on:click="addToCart">Add</button></span>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        addToCart: function () {
          this.counter += 1
          this.$emit('increment') //add custom event
        }
      }
    })
    new Vue({
      el: '#fruits-counter',
      components: {
        'counter-button': counterButton
      },
      data: {
        total: 0,
        fruits: [
          { name: 'Pear'},
          { name: 'Strawbery'}
        ]
      },
      methods: {
        incrementCartStatus: function() {
          this.total += 1
        }
      }
    });

icon Vue Cli インストール (2019/07/28)
props は親コンポーネントのデータを v-bind で、子コンポーネントにバインドできる。
v-bind(HTML) に設定するデータバインド名は、ケバブケース(kebab-case)
props(Javascript) 側のデータバインド名は、パスカルケースで記述
    //子コンポーネント
    Vue.component('コンポーネント名', {
      props: {
        データバインド名: {
          type: 型
        }
      },
      template: '<p>{{データバインド名}}</p>'
    })

    //親コンポーネント
    new Vue({
      el: 'エレメント名',
      data: { データ }
    })

サンプル(Vue.js入門 基礎から実践アプリケーション開発まで:第3章)

HTML

  <div id="item-component">
    <item-desk v-bind:item-name="item"></item-desk>
    //ケバブケース: item-name
  </div>

Javascript

    Vue.component('item-desk', {
      props: {
        itemName: {    //パスカルケース: itemName
          type: String
        }
      },
      template: '<p>{{itemName}}</p>'
    })

    new Vue({
      el: '#item-component',
      data: { item: 'Pen'}
    });
HTML(v-bind): item-name
Javascript: itemName

HTML

  <div id="fruits-component">
    <fruits-item-name v-for="fruit in fruitsItems" :fruits-item="fruit"></fruits-item-name>
    //v-bind を省略したケバブケース: :fruits-item
  </div>

Javascript

    Vue.component('fruits-item-name', {
      props: {
        fruitsItem: {   //パスカルケース: fruitsItem
          type: Object,  //オブジェクト型
          requited: true    //必須
        }
      },
      template: '<p>{{fruitsItem.name}}</p>'
    })

    new Vue({
      el: '#fruits-component',
      data: {
        fruitsItems: [
          { name: 'Pear'},
          { name: 'Strawbery'}
        ]
      }
    })
<< 最初 < 前ページ 次ページ > 最後 >>