--- title: はじめてのVue.js tags: Vue.js JavaScript 初心者 author: signal0801 slide: false --- # 概要 社内の技術共有会で使用したもの。 自分の勉強も兼ねつつ、Vueを触ったことない方向けに作成したものです。 # What's Vue.js ? - jsのフレームワークのひとつ - 他だとAngular, Reactあたりが有名 - プログレッシブフレームワークである。 - モノリシックではないので、開発レベルに合わせて段階的に導入することが可能 - ECMAScript5対応ブラウザで使用してね - 骨董品みたいなブラウザで使用するのは厳しいです - せめてIE9から ~~IE8以下? 知らない子ですね~~ # Hello World ```html わくわくVue

{{ message }}

``` 上記htmlを実行すると味気ないボタンが出ます。ボタン押下で「こんにちは世界」。 # 上記コードについて ```js const app = new Vue({ el: '#app', // 1 data: { message: '' // 2 }, methods: { displayMsg : function () { // 3 this.message = "Hello World!!"; } } }) ``` ### js側 - 1 : el - html上でVueインスタンスの管理下に置く要素。セレクタで指定。 - 2 : data - Vueインスタンスがもつプロパティ - v-bind, v-model等でバインディングされるデータを保持 - 3 : methods - Vueインスタンスが保持するメソッド - イベントのハンドリングを行う際に使用。 - `methods`オブジェクト下に`メソッド名 : 関数`で定義。 - **アロー関数**には気を付けろ、、、 ```html
// 1

{{ message }}

// 2 // 3
``` ### html側 - 1 : id="app" - Vueインスタンスで管理下に置いた要素。 - 2 : {{ message }} - データバインディングの対象となる項目。今回はappインスタンスのmessageとバインディング。 - Mustache構文(二重中括弧)で記載すること。 - 3 : v-on:click="displayMsg" - `v-`で始まる特別な記法をディレクティブと呼ぶ。属性値の変化があったときに作用する。 - 今回の`v-on`はdomイベントの受け取りを実施。`:`の後に記述されたイベントに対しバインディングする。 -`v-on:click`でクリックされた時に`displayMsg`メソッドを実行。 - `v-on:click`は`@click`と略すことも可能。 # その他の主なVueのディレクティブ ### v-text > 任意の文字列オブジェクトを指定要素に展開する ```html ``` ```html {{msg}} ``` は両方同じ ### v-html > `hoge`みたいな文字列を単なる文字列ではなく生htmlとして展開したいときに使用する > 脆弱性とかを生むものでもあるのでご利用は計画的に ### v-show > 評価式に応じて指定要素のCSSプロパティ`display`に作用する ```html
ほげ
``` ### v-if, v-else, v-if-else > 評価式に応じて指定要素を描画するか決定する **v-showと違って要素すら描画しない!!** 用途に合わせて使い分けるのが吉。 ```html
ほげ
ふが
not ほげふが
``` ### v-for > 配列、オブジェクトを元にループを実行し要素を複数回描画する ```html ``` # 所感 関わっている案件で使用していますが、ちゃんと使い分けとか考えてみると面白いと感じました。 次回の社内共有会ではコンポーネントやライフサイクルあたりを話そうかなあと思ってます。~~僕の知識が足りなくて今回の社内共有会でうまくまとめられなかったのは内緒~~ これからもぼちぼち頑張ろうと思います。 # 参考 [Vue公式様](https://jp.vuejs.org/v2/api/) [とほほ様](http://www.tohoho-web.com/ex/vuejs.html#v-text)