Vueインスタンスの作成
new VueでVueインスタンスを作成することができ、その中のel要素でhtmlのどこの部分をターゲットにしてVueを使用するか定義します。
html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
</div>
JavaScript
new Vue({
el: '#app'
})
テンプレート構文とは
htmlに書いてある3行がテンプレートである。html書いているわけではなく、テンプレート構文を用いてテンプレートを書いている。Vue.jsがテンプレートを判断して、最終的にhtmlとして出力してる。
html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
</div>
JavaScript
new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
ブラウザ
Hello World!
ディレクティブ
v-からはじまるviewの要素に特別な属性を付け加えられるもの。
v-on
イベントが発生した瞬間に関数を実行したいという時に使用する。
html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<p>現在{{ number }}回クリックされています</p>
<button v-on:click="countUp">カウントアップ</button>
</div>
JavaScript
new Vue({
el: '#app',
data: {
number: 0
},
methods: {
countUp: function() {
this.number += 1
}
}
})
v-bind
属性に対してdata内のurlプロパティなどを使って表示させるのに向いている。
html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<a v-bind:href="url">Google</a>
</div>
JavaScript
new Vue({
el: '#app',
data: {
url: 'https://google.com'
}
})
v-model
双方向データバインディング実現できる。dataとhtmlの双方向に影響します。htmlの値に変更があった場合、自動でdataの値を更新します。
html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<input type="text" v-model="message">
<h1>{{ message }}</h1>
</div>
JavaScript
new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
今回学習するうえで使用した環境
JSFiddle
Vueだけに限らずReactなどの言語に関しても、アカウント登録なしで簡単にコードを試すことができます。
とても使いやすいのでぜひ使ってみてください！
