//tips
//js連動理解
Jsの中でのvueの役割を確認する。
vueはjqueryと同様のjsのライブラリの一つだが、jqueryが対応できなかったはHTML側の要素とJavaScript側の値やイベントとの対応付を自動で行ってくれる点で重宝されている。
HTMLの{{ message }}の部分などを、JavaScriptのメッセージに自動的に置換できる。
例えば、htmlに下記があった場合、
<div id="app">
{{ message }}
</div>
jsにvueで下記のような対応をさせることで
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
HTMLでHello Vue!を表示できる。
$(function() {
var apiUrl = 'http://localhost:3000/posts';
var message = new Vue({
el: "#post",
methods: {
sendPosts: function(e) {
var self = this;
$.ajax({
type: 'POST',
url: apiUrl,
dataType: 'json',
data: {
name: $("#name").val(),
message: $("#message").val()
}
});
}
}
});
$.ajax({
type: 'GET',
url: apiUrl,
dataType: 'json',
success: function(json) {
message.$data.posts = json;
console.dir(json);
},
data: null
});
});
これより 下記の部分でhtmlのフォームの直前に入れられている<div id="post">を取得し、
var message = new Vue({
el: "#post",
elはVueの管轄領域を表し、<div id=""> タグ内部がVueアプリケーションとして認識される。
とするとmessage.$data.postsの箇所はhtmlのv-repeat="posts”部分を指すことがわかる。
今までunityからのリクエストが反映されなかったのは、jsonに
"name": "ooo",
"message": "ooo",
として情報が格納されていなかったためだとわかる。
<div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<tr v-repeat="posts">
<td>{{name}}</td>
<td>{{message}}</td>
</tr>
</tbody>
</table>
</div>
もう少しv-repeatについて突っ込んで理解すると、
Vueオブジェクトで参照されているidの子要素などでv-repeatを宣言しておくことで、Vueに格納されるdataの配列内のものを自由に呼び出せる。
例えば、下記のようなものを見るとわかりやすい。
<ul id="demo">
<li v-repeat="items" class="item-{{$index}}">
{{$index}} - {{parentMsg}} {{childMsg}}
</li>
</ul>
var demo = new Vue({
el: '#demo',
data: {
parentMsg: 'Hello',
items: [
{ childMsg: 'Foo' },
{ childMsg: 'Bar' }
]
}
})
この結果は、
0-Hello Foo
1-Hello Bar
として示され、該当するVueインスタンスのdata配列構造内のものであれば全て、指定して表現し直すことができる。大変便利。
Vue.jsが使われるようになってきたのはランディングページが流行り、一ページ内に機能を盛り込ませたくなり、jqueryで手が届かないdom操作をvueが代行できるこのような便利機能があるため。
