はじめに
Vue.jsの基礎について複数回に渡ってまとめていきます。今回は「環境構築」と「ディレクティブ」についてです。動作確認済みのコードも記述しています。※内容は初学者向けです。
【第1回】環境構築・ディレクティブ(今回)
【第2回】コンポーネント基礎・データの渡し方：https://qiita.com/tatsuya_1995/items/390ec39cb99f1d7b5253
準備
今回はCDNを用いて導入。Vueの公式ホームページより最新のCDNを取得。bodyタグの直前に記述。別のファイルにJSを記述する場合は、CDNの後に挿入する。
https://jp.vuejs.org/v2/guide/installation.html#CDN
<body>
<div id="app">
//本記事ではここにVueで操作したい内容を記述
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script src="app.js"></script>
</body>
</html>
new Vueでインスタンスを生成し、html内のVueを使用する場所をel要素で指定する。
new Vue({
el:'#app'
})
ディレクティブ
v-という接頭辞がついたVue.jsの属性のこと。DOMに対して動作を適用することができる。
参考：https://rightcode.co.jp/blog/information-technology/vue-js-introduction-directive
①v-bind
タグの属性を動的に設定できる。
v-bind:<属性の名前="属性に代入される変数名">
使用例：
<div id="app">
<a v-bind:href="url">URL</a>
</div>
new Vue({
el:'#app',
data: {
url : 'http://localhost'
}
})
v-bindは省略できる。
<a :href="url">URL</a>
表示
②v-on
イベントのトリガーを呼び出す関数を定義する。
v-on:<イベント名>="<呼び出す関数名>"
参考：v-onの後ろに置くことができるDOMイベント
https://developer.mozilla.org/ja/docs/Web/Events
引数を取らない時
メソッド名に()は不要。あっても問題ない。
<div id="app">
<p>カウント数：{{ counter }}</p>
<button v-on:click="countUp">カウントアップ</button>
</div>
new Vue({
el:'#app',
data: {
counter: 0
},
methods:{
countUp:function(){
this.counter += 1;
}
}
})
引数をとる時
引数を複数渡すこともできる。下記例は引数に10を渡して10倍ずつカウントアップしている。
<div id="app">
<p>カウント数：{{ counter }}</p>
<button v-on:click="countUp(10)">カウントアップ</button>
</div>
new Vue({
el:'#app',
data: {
counter: 0
},
methods:{
countUp:function(times){
this.counter += 1 * times;
}
}
})
v-on:は@で省略可能
<div id="app">
<p>カウント数：{{ counter }}</p>
<button @click="countUp">カウントアップ</button>
</div>
表示
③v-model
双方向バインディングを可能にするため、テキストボックスの文字列を変更すると、連動してのVue側の値も変更される。
双方向バインディング:
スクリプト側から値の設定とブラウザからの入力のどちらからでも双方向で値を更新できる仕組み。
ブラウザから入力 <==> 変数 a <==> JavaScriptから更新
参考：https://ameblo.jp/forefrontier/entry-12330323176.html
※バインディングは結びつけるの意。
使用例：
<div id="app">
<input type="text" v-model="message">
<h1>{{ message }}</h1>
</div>
new Vue({
el:'#app',
data: {
message: 'Hello、JS！'
}
})
出力
入力フォームに「Hello、JS!」と入力すると、データが変更される↓
④v-if
条件に応じてhtml要素を動的に変更する。
使用例：FizzBuzzをカウントアップで表示
<div id="app">
<p v-if="FizzBuzz">FizzBuzz</p>
<p v-else-if="Fizz">Fizz</p>
<p v-else-if="Buzz">Buzz</p>
<p v-else>{{ count }}</p>
<button @click="countUp">カウントアップ</button>
</div>
new Vue({
el:'#app',
data: {
count:1
},
methods: {
countUp:function(){
this.count += 1;
}
},
computed: {
FizzBuzz: function() {
return this.count %3 == 0 && this.count % 5 == 0;
},
Fizz : function() {
return this.count %3 == 0;
},
Buzz : function() {
return this.count %5 == 0;
}
}
})
表示「FizzBuzz」
表示「Fizz」
表示「else」
⑤v-for
オブジェクトや配列の中身を表示する。
v-for = "<配列やオブジェクト名> in <配列やオブジェクトの複数形>"
使用例：
<div id="app">
//配列の場合
<ul>
<li v-for="color in colors">{{ color }}</li>
</ul>
//オブジェクトの場合
<ul>
<li v-for="value in object">{{ value }}</li>
</ul>
</div>
new Vue({
el:'#app',
data: {
colors: ['赤','青','緑'],
objects: {
name: 'Evan You',
age: 35,
birthplace:'China'
}
}
})
表示
オブジェクトや配列は引数をとることができる。
<div id="app">
<ul>
<li v-for="(value,key,index) in objects">({{ index }}){{ key }}-{{value }}</li>
</ul>
</div>
最後に
Vueのディレクティブについてまとめました。複数回に渡ってVueの基礎をまとめていきます。
（もしこの記事に誤りがありましたらご教授いただけると幸いです。）