Vue.jsが前から気になっていたのでこれから勉強しようかと。
文章にすると難しいと思う（纏められない）のでコードベースに記録していきたいと思ってます。
レンダリング
データとDOMは関連付けられ、全てがリアクティブになります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message">
<div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
let data = {
message: 'Hello World'
}
new Vue({
el: '#app',
data: data
});
これでテキストボックスの値を変更するとpタグ内も変更されるかと思います。
ポイントはVueインスタンスのelプロパティにセレクタを用いてバインド先のDOMを指定することと、dataプロパティにモデルが保持するデータを指定することです。
htmlではバインド先のDOMにv-modelでプロパティ名を指定すればリアクティブとなります。
条件分（if）
先ほどの例で見たHTMLで指定してるvではじまる属性はディレクティブと呼ばれています。
条件分岐を書きたい場合は以下のようにします。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message" v-if="seen">
<div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
let data = {
message: 'Hello World',
seen: false
}
new Vue({
el: '#app',
data: data
});
v-if属性を指定してdataプロパティに真偽値を指定すれば値に応じて表示/非表示されます。
seenプロパティをtrueにしてみると表示されるのを試してみてください。
ループ処理
繰り返し処理はv-forディレクティブを用います。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos">{{ todo.text }}</li>
</ul>
<input type="text" v-model="message">
<div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
new Vue({
el: '#app',
data: {
todos: [
{ text: 'JavaScript' },
{ text: 'Vue' },
{ text: 'React' }
],
message: "Hello World"
}
})
{{ todo.text }}はliタグ内でv-text="todo"とすることでも内容の表示ができます。
イベント処理
次はリストにデータを追加してみたいと思います。今度はモダンなjsで記載する場合と比較してみます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos" v-text="todo"></li>
</ul>
<input type="text" id="input">
<button id="button">add</button>
<div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
var app = new Vue({
el: '#app',
data: {
todos: ['JavaScript', 'Vue', 'React']
}
})
// ボタンを押下した際に入力値を取得して配列に追加 → 入力項目の内容をクリア
document.querySelector('#button').addEventListener('click', function(){
let text = document.querySelector('#input');
app.todos.push(text.value);
text.value = '';
})
vueで記載すると以下のようになります。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Vue</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="todo in todos" v-text="todo"></li>
</ul>
<input type="text" v-model="newTodo">
<button v-on:click="addTodo">add Todo</button>
<div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
index.js
var app = new Vue({
el: '#app',
data: {
todos: ['JavaScript', 'Vue', 'React'],
newTodo: ''
},
methods: {
addTodo() {
this.todos.push(this.newTodo);
this.newTodo = '';
}
}
})
v-on属性を使ってクリック時のイベントを設定しました。
実際のイベントはvueのmethodsプロパティで定義します。かなりスッキリした書き方ができますね！
ということで続きは②で記事にしたいと思います。