「Hello!! Vue.js」の感想・備忘録

Hello！！　Vue．js

posted with ヨメレバ

那須理也インプレスR＆D 2018年04月

書籍「Hello!! Vue.js」のまとめ。

点数
感想
主な内容

点数

75点

感想

入門書としてはよかった。
単一ファイルコンポーネントについては定義方法だけ書いてあり、肝心の使用方法が書かれていなかったのが残念。
また、Vuexの説明がよくわからなかった。

主な内容

vue-routerとは

シングルページアプリケーションを作成するためにフロントエンドでのルーティングを可能にする。

<div id="app">
<router-link to="/a">page A</router-link>
<router-link to="/b">page B</router-link>
<!-- router-viewが動的に入れ替わる -->
<router-view></router-view>
</div>
<script src="http://unpkg.com/vue/dist/vue.js"></script>
<script src="http://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/a', component: Foo },
  { path: '/b', component: Bar }
]
const router = new VueRouter({
  routes // `routes: routes` の短縮表記
})

const app = new Vue({
  router
}).$mount('#app')
</script>

Vuexとは

コンポーネント間の状態管理をシンプルに解決する。

Nuxt.jsとは

ユニバーサルアプリケーション(マルチデバイス対応アプリ)を作成するためのフレームワーク。 vue-routerやVuexも組み込まれており、動的なWebサイトを簡単に作れる。 Reactで言うところのNext.js。

ライフサイクル

各タイミングでのフックが用意されている。
よく使われるのはcreatedとmounted。

new Vue({
    created: function() {
        console.log('hoge');
    }
});

主なディレクティブ

v-if="変数"
DOMレベルで初期化/削除の切り替え
v-show="変数"
displayの切り替え
v-on:イベント名="メソッド名or式"
イベントリスナ
省略記法は@イベント名="メソッド名or式"
v-model="変数名”
フォーム部品と変数のバインディング

v-for

配列やオブジェクトの値だけ必要な場合
<ul v-for="item in items">
配列やオブジェクトの値とキーが必要な場合
<ul v-for="(item, key) in items">

※Vue.jsのdataプロパティ配下の配列の値をインデックス指定で上書きしてもリアクティブにDOMは書き換わらない。Vue.setやpush,spliceなどVue.jsで用意された配列操作メソッドを使う必要がある。

算出プロパティ

変数にフィルタを付けたいときに使う（処理をしてから変数を返却）

data: {
  message: 'Hello'
},
computed: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
// テンプレートでは{{ reversedMessage }}で利用可能。

コンポーネント

オリジナルのタグを作ることができる。

Vue.component('my-item', {
    template: '<p>MyItem!</p>'
});
// テンプレートでは<my-item></my-item>で利用可能。

propsプロパティに属性名配列を定義することで、属性値の受け取りが可能。

Vue.component('my-item', {
    props: ['message'],
    template: '<p>{{ message }}</p>'
});
// テンプレートでは<my-item message="hello!!"></my-item>で利用可能。

※コンポーネントの登録（宣言）はnew Vue()より前に行う必要がある
※既に存在する、または将来定義される HTML 要素との衝突を防止するために、コンポーネント名は常に複数単語のケバブケースとする

イベント修飾子

<form v-on:submit.prevent="onSubmit">のようにイベント名の後ろに.preventを付けるとevent.preventDefault()が呼ばれる。
値を指定せず、修飾子だけ利用することもできる。
<form v-on:submit.prevent></form>

once修飾子を付けると一回だけイベントが発生する。
<a v-on:click.once="doThis"></a>