XXとしてる: Vue.jsについて

Nuxt.jsを使ってポートフォリオサイトを作ろうかと思ったので、Vue.jsについて調べた。以下、その調べたものについてのメモ

前書き

公式サイトに大体書いてある。
まぁ、それだけではいまいち頭にピンっとこないので他のサイトも調べていたのが今までのパターンだけど、公式サイトで紹介されていたScrimbaというサイトにビデオチュートリアルがあったので助かった。公式サイトは読みやすいのでそこいらのサイトよりおすすめである。

Vue.jsの使い方

こんな感じになる。 scriptタグの部分を開発者ツールのコンソールから変更すると元のファイルを編集せず、挙動を確認できるのでお手軽である。


<div id="app">
    {{ message }}

    <p v-show="doShow">
        v-showで表示/非表示を切り替えられる<br>
        頻繁に切り替えるときに向いている
    </p>

    <!-- if文がある -->
    <p v-if="doShow">
        「v-if」で条件付きでタグの表示を制御できる<br>
        あまり変化がないものに使う
    </p>
    <p v-else-if="doElseShow === true">else if 文もある</p>
    <p v-else> else文もある</p>

    <!-- for文もある -->
    <p v-for="text in books">{{ text }}</p>

    <button v-on:click="clickButton">
        「v-on」でイベント処理が行える<br>
        指定するものは,"method"で定義する
    </button>

    
    <button v-on:click="clickButton" v-on:keyup.enter>
        「v-on」でイベント処理が行える<br>
        指定するものは,"method"で定義する
    </button>

    <!-- 自作のタグを作れる.　下は複雑な例 -->
    <!-- v-bind:keyで必ずkeyを渡す必要がある -->
    <ol>
        <custom-tag
            v-for="item in list"
            v-bind:obj="item"
            v-bind:key="item.id"></custom-tag>
    </ol>
</div>

<!-- HTMLに複数あってもいい　-->
<div id="app2">{{message}}</div>

<script>
    //テンプレートの定義
    Vue.component("custom-tag", {
        props: ["obj"],
        template: '<li>{{ obj.text }}</li>'
    });

    var app = new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!",
            doShow: true,
            doElseShow: true,
            books: [
                "Anguler",
                "React",
                "Vue",
            ],
            list: [
                {id: 1, text: "カス"},
                {id: 2, text: "タム"},
                {id: 3, text: "タグ"},
            ]
        },
        methods: {
            clickButton: function() {
                this.message += "-";
            }
        }
    });
    var app2 = new Vue({
        el: "#app2",
        data: {
            message: "Dive into web!"
        }
    });
    app.message = "Change Vue!";
</script>

使っているVue.jsの機能は以下のものになる。

その他にも以下のものがある。

v-once
v-html(XSS脆弱性があるので注意)
v-model: フォーム入力で使う。

Vueはデータフロープログラミング的

これをVueではリアクティブと呼んでいる。基本的にdataとして宣言した変数はリアクティブシステムの対象になっているが、Object.freeze()を使うと値の変更をできないようにできる。


var obj = {
  foo: "bar"
};
Object.freeze(obj); //変更を防ぐ
new Vue({
  el: "#app",
  data: obj
})

Vueインスタンスのライフサイクル

Vueインスタンスにもライフサイクルがあって、以下のものがフックできる。 フック関数の定義にはアロー関数は使用してはいけない。絶対に

created
mounted
updated
destroyed


new Vue({
  data: {
    a: 1,
  },
  created: function() {
    console.log('created| a is: ' + this.a);
  },
  mounted: function() {
    console.log('mounted| a is: ' + this.a);
  },
  updated: function() {
    console.log('updated| a is: ' + this.a);
  },
  destroyed: function() {
    console.log('destroyed| a is: ' + this.a);
  }
})

データバインディング

データバインディングのやり方には以下の種類がある

”Mustache” 構文( {{}} )
基本的な使い方。jsの式が使える
v-bind & v-on
htmlタグの属性を指定するときに使う「<p v-bind:属性名="js式">」と使う
v-bindは':',v-onは'@'で省略できる。

修飾子

算出プロパティ

「{{ }}」の中に式は書けるが、あまり複雑なものを書くことはVueは推奨していない。そのようなときは算出プロパティを使うことを勧めている。


new Vue({
  data: {
    a: 1,
  },
  computed: { //算出プロパティの定義
    reversedMessage: function() {
      return this.message.split('').reverse().join('');
    },
    a: { //getter, setterの定義もできる
      get: function() { return 'prefix ' + a; }
      set: function(newValue) { a = newValue; }
    }
  }
})
//使うときは以下の通り
<p> {{ reversedMessage }} </p>

メソッドを定義するのと同じことだが、算出プロパティは依存関係にもとづいて処理結果がキャッシュされる利点があるので、どんどん使っていこう。

監視プロパティ

監視プロパティというデータの変更に合わせて処理をフックできるものがある。指定したデータの変更を監視できるので、用途に合わせて使い分けよう。


new Vue({
  data: {
    a: 1,
  },
  watch: { //監視プロパティの定義
    a: function(var) {
      console.log('changed a: ' + a);
    }
  }
})
//使うときは以下の通り
<p> {{ reversedMessage }} </p>

フォーム入力の補助機能

フォーム入力もサポートしている。 v-modelを使って、入力結果を受け取りたいデータを指定する。入力した値を自動的に設定した値に代入してくれるので、便利。

以上、基本的な機能についてみてきた。公式ドキュメントにはまだまだ機能の解説が続いているが、疲れたのでここでいったん閉じる。

XXとしてる

2019年1月1日火曜日

Vue.jsについて

前書き