概要
Vue.jsはシンプルに始められるのが気に入って一部だけでも使ったりしています。3段階になっていて、ローカルファイルのhtmlにコピペして使えます。
1.最小限のリスト表示
まずはリスト表示。
<html>
<body>
<ul id="vue_list1">
<li v-for="user in users" v-text="user.id + ' => ' + user.name">
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script>
var usersData = [
{id:1, name:'鈴木'}, {id:2, name:'佐藤'},{id:3, name:'田中'},{id:4, name:'伊藤'}
];
var userList1 = new Vue({
el: '#vue_list1',
data: {
users: usersData
}
});
</script>
</body>
</html>
ポイントはulのidとnewしたVueオブジェクトのel指定でひもつけ、Vueのdata.usersはusersDataとひもつけ、liのところでforループ。サーバサイドで作ったデータをこんな風に出力して使うことができる。
2.リストにイベント(とスタイル)をつけてみる
リスト表示だけではVue.jsを使う意味がほぼないので、イベントをつけてみる。先ほどの例にvue_list2を追加します。元データは同じものを使う。
<html>
<body>
<ul id="vue_list1">
<li v-for="user in users" v-text="user.id + ' => ' + user.name"></li>
</ul>
<ul id="vue_list2" style="background-color:#F99">
<li v-for="user in users" v-text="user.id + ' => ' + user.name"
@click="onClick(user)" @mouseover="onMouseOver" v-bind:style="{color:'blue', cursor:mouseType}"></li>
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script>
var usersData = [
{id:1, name:'鈴木'}, {id:2, name:'佐藤'},{id:3, name:'田中'},{id:4, name:'伊藤'}
];
var userList1 = new Vue({
el: '#vue_list1',
data: {
users: usersData
}
});
var userList2 = new Vue({
el: '#vue_list2',
data: {
users: usersData,
mouseType: 'auto'
},
methods: {
onClick: function(user) {
user.count = (user.count !== undefined) ? ++user.count : 1;
user.name = user.name + ', ' + user.count;
},
onMouseOver: function() {
this.mouseType = 'pointer'
}
}
});
</script>
</body>
</html>
色付きリストの名前をクリックしてみると、変化がある。ちなみに、@は省略形。v-bind:styleの「文字列」と「javascript変数」の違いに注意。'blue'はシングルクォートでくくった文字列、mouseTypeは変数。データを共有しているので、上と下のリストが同じ表示になるのが面白いところ。
3.jQueryと共存してみる
Vue.jsはjQueryと共存もできるので試してみる。ほとんど上と同じでだが、ボタンが1つ増えている。
<html>
<body>
<ul id="vue_list1">
<li v-for="user in users" v-text="user.id + ' => ' + user.name"></li>
</ul>
<ul id="vue_list2" style="background-color:#F99">
<li v-for="user in users" v-text="user.id + ' => ' + user.name"
@click="onClick(user)" @mouseover="onMouseOver" v-bind:style="{color:'blue', cursor:mouseType}"></li>
</ul>
<button id="btnClick">Click</button>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
<script>
var usersData = [
{id:1, name:'鈴木'}, {id:2, name:'佐藤'},{id:3, name:'田中'},{id:4, name:'伊藤'}
];
var userList1 = new Vue({
el: '#vue_list1',
data: {
users: usersData
}
});
var userList2 = new Vue({
el: '#vue_list2',
data: {
users: usersData,
mouseType: 'auto'
},
methods: {
onClick: function(user) {
user.count = (user.count !== undefined) ? ++user.count : 1;
user.name = user.name + ', ' + user.count;
},
onMouseOver: function() {
this.mouseType = 'pointer'
}
}
});
$('#btnClick').click(function() {
usersData[0].name = 'Jon'; //元データを変えてみる
userList2.users[1].name = 'Mike'; //Vueオブジェクト内のデータ(下の方)を変えてみる
});
</script>
</body>
</html>
外部からデータを変更してみる。
まずデータがあって、データの変化によってViewが自動的に変更されるので、Viewとデータを分離して考える。
まとめと後書き
最小限でVue.jsでリスト表示でしたが、これだけでもシンプルなのに強力なのが分かるかと思います。
あとは、v-ifとv-showとv-bind:classとcomputedが重要。
また、本来はVueインスタンスのcreatedを使うべきですが、あえてこう表現してみました。