Vue.js (4) vue-cliと単一ファイルコンポーネント（vueファイル）

vue-cliとは

npmのモジュールで、Vue.jsを使ったプロジェクトを管理するツール。テストサーバを立てたり、デプロイするためにbuildしたりすることができる。

インストール

node.jsがインストール済みとして、npmで下記のコマンドでインストールする。node.jsはサーバサイドで使うイメージがあるが、vue-cliにも使う。

npm install -g @vue/cli

プロジェクト作成

vue create myproject

単一ファイルコンポーネント（vueファイル）の作成

vue componentは.vueファイルにまとめることができる。componentはhtmlに当たる「template」、Javascriptにあたる「script」、cssにあたる「style」の3つの部分からなるが、それらを1つのファイルに記述することで見通しよく記述することができる。

<template>
    <div class="test">
        This is test page. message: {{ message }}
    </div>
</template>

<script>
export default {
    name:"test",
    props:{
        message:String
    }
}
</script>

<style>
/* css */
</style>

このようなvueコンポーネントファイルをsrc/components直下に置く。こうすることで、再利用可能なcomponentファイルを作ることができる。

作ったcomponentを使うには、App.vueファイルのtemplate部分で使うほかに、script部分にimportを書く。

<script>
import test from "./components/test.vue"

export default {
  name: 'app',
  components: {
    HelloWorld,test
  }
}
</script>

テスト

下記のコマンドによってテストサーバを立てることができる。

npm run serve

これでhttp://localhost:8080にアクセスすると、App.vueに記述したサイトが確認できる。

Vue.js (3) Vue Components

Vue ComponentsはVueの機能を再利用するための仕組み。

globalに定義する

Vue.componentsに記述する。

dataには初期化処理の関数を書く。dataメンバに関数を指定するのは違和感もあるが、そういう仕様。

templateメンバにはcomponentが置き換えるhtml文を書く。

Vue.component("button-counter",{
    data:function() {
        return {count:0}
    },
    template: '<button v-on:click="count++"> count up {{count}}</button>'
})

htmlには<button-counter>タグを指定することで、template部分の文が展開される。

<!-- button-counterが設置される。複数設置することもできる。 -->
<button-counter></button-counter>

localに定義する

globalに定義するのは何かと弊害もあるので、変数としてlocalに定義することもできる。この場合、Vueインスタンスの引数にcomponentsメンバに記述する。

const buttonCounterLocal = {
    data:function() {
        return {count:0}
    },
    template: '<button v-on:click="count++"> count up {{count}} </button>'
}

const app = new Vue({
    el:'#app',
    components:{
        'button-counter-local': buttonCounterLocal
    }
})

参考

jp.vuejs.org

Vue.js (2) 「はじめに」にあるいろんな機能をフォローする

今回はVue公式ドキュメントの「はじめに」の章をフォローしてみる。

jp.vuejs.org

見えるか見えないかを制御する（v-if）

v-ifディレクティブにtrue/falseで指定することで、要素が見えるか見えないかを指定できる。

<span v-if="message_is_seen">
   message
</span>

リストの要素をforループで全部表示する（v-for）

v-forディレクティブにmyiter in list_dataのような形式の文字列を指定することで、list_dataのアイテムを列挙できる。

<ol>
    <li v-for="myiter in list_data">
        {{ myiter }}
    </li>
</ol>

イベントによって関数を呼び出す（v-on）

Vueオブジェクトのmethodsメンバに関数オブジェクトを渡し、v-onディレクティブに関数オブジェクトmethodを指定することで、イベント駆動で関数を呼び出すことができる。

<button v-on:click="mymethod">
    push risa
</button>

const app = new Vue({
    el:'#app',
    data:{
        idols: [
            "momoka","arisu","miria"
        ],
    },
    methods:{
        mymethod: function() {
            this.idols.push("risa");
        }
    }
})

リストにアイテムを追加すると、リアルタイムでブラウザ表示に反映される*1。

*1:これがVue.jsの強みで、Vue.jsを使わないとgetElementsを呼び出さないと行けなかったり、更新処理が必要になったりするはず。