【学習記録①】Vue.jsの基礎的な構文の備忘録
はじめに
Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。
Vue.jsとは
Vue.jsとはJavaScriptのフレームワークであり、国内ではよくReact.jsやAngular.jsと並んで比較されることが多いです。
テンプレート構文
Vueを勉強していると「テンプレート」というワードが出てきます。
Vue.jsではHtmlファイルに以下のように書いたりするのですが、これを「テンプレート」と言います。
//以下のようにVue.jsによって操作される部分をテンプレートという
<div id="app">
<p>{{message}}</p>
</div>
new Vue({
el: "#app",
data: {
message: 'Hello World'
}
})
ディレクティブ
Vue.jsではv-
から始まる特別な属性値「ディレクティブ」というものが用意されています。
v-if
v-ifはJavaScriptのif文と似たようなものでv-if
属性の値がtrueの時にそのテンプレートが表示されます。
<div id="app">
<p v-if="isEnabled">{{message}}</p>
</div>
new Vue({
el: "#app",
data: {
message: 'Hello World',
isEnabled: true // <-- trueのときは上記Htmlファイルのpタグが表示され、falseのときは表示されません
}
})
v-show
v-showは使い方は上記のv-ifと同じです。
しかしながら、出力結果のHtmlに以下のような違いがあります。
v-if
falseの時にはhtml自体に出力されない。
v-show
falseの時にはhtmlには出力されているものの、style属性にてdisplay:none;
が設定されている。
v-bind
v-bind
を用いると任意の属性値をVueのほうから指定することができます。バインディング
などと言われたりします。
v-bindは引数を指定する必要があり、v-bindの後にhref
などの属性を指定します。
<div id="app">
<a v-bind:href="url">Qiita</a>
</div>
new Vue({
el: "#app",
data: {
url: "https://qiita.com/"
}
})
v-bind
は以下のように省略することも可能です。
<div id="app">
<a :href="url">Qiita</a>
</div>
v-on
v-on
はclick等のイベント発火時のJavaScriptを記述します。
メソッドを定義する際はVueインスタンスにあるmethodsプロパティを用います。
<div id="app">
<p>{{ number }}</p>
<button v-on:click="countUp">+1</button>
</div>
new Vue({
el: "#app",
data: {
number: 0
},
methods: {
countUp: function(){
this.number++;
}
}
})
v-on
は以下のように@
マークの後にイベントを書くように省略することも可能です。
<div id="app">
<p>{{ number }}</p>
<button @click="countUp">+1</button>
</div>
v-model
今まではVueインスタンス側から値を操作していましたが、v-model
を用いるとテンプレート側から値を操作することも可能です。
<div id="app">
<input type="text" v-model="message">
<p>{{ message }}</p>
</div>
new Vue({
el: "#app",
data: {
message: ''
}
})
inputタグに何かしら文字を打っていくとpタグの部分にも同じ文字が入っているのが分かります。
computedとmethodsの違い
computedプロパティはmethodsと使い方は似ていますが、computedプロパティにはキャッシュ機能があるのに対し、methodsにはキャッシュ機能がありません。
同じように{{}}
で囲い、それぞれを定義した場合、methodsはVueテンプレートのどれかが更新されるたびに呼ばれますがcomputedは依存する部分に変更がされたときのみしか処理は走りません。
v-for
v-for
を用いると配列の中身を出力することができます。
<div id="app">
<p v-for="greeting in greetings">{{ greeting }}</p>
</div>
new Vue({
el: "#app",
data: {
greetings: ['おはよう', 'こんにちは', 'おやすみ']
}
})
おわりに
引き続き学習内容を備忘録として残していこうと思います。
Vue.js今のところ楽しい!!!
Author And Source
この問題について(【学習記録①】Vue.jsの基礎的な構文の備忘録), 我々は、より多くの情報をここで見つけました https://qiita.com/Ooooooomin_365/items/ed5a206b201bedc6a3fd著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .