Blockchain code Metaverse VR

Unity×VR×Blockchain(227)

スポンサーリンク

//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が代行できるこのような便利機能があるため。

人気の記事

1

皆さん、ついに、エアラインでも、サブスクリプションが始まったのはご存じですか? まだ実験段階ですが、ANAが、定額全国住み放題サービスを提供する「ADDress」と組んで、国内線を4回まで定額利用可能 ...

2

無料でネットショップを開けるアプリとして多くの人に驚きを与えたBASE株式会社が、2019年10月25日東証マザーズに上場しました。2020年2月時点で90万店を超えるショップを抱えるまでに成長してい ...

3

2011年にサービスを開始してから圧倒的な成長率を誇るインテリア通販サイト 【FLYMEe/フライミー】を皆さんご存じでしょうか。 「自分のイメージするインテリア、本当に欲しいインテリアがどこにあるの ...

4

ついに、noteの月間アクティブユーザー数が4400万人(2020年3月時点)に到達しました。 そもそも、「note」とは、クリエイターが、文章やマンガ、写真、音声を投稿することができ、ユーザーはその ...

5

ボードゲームカフェが1日2回転で儲かるという記事をみつけたので興味を持ち、調べてみました。 まずは、需要がどれくらいあるのか、市場のようすからみていきましょう。 世界最大のボードゲーム市場はドイツで、 ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HUNTER , 2023 All Rights Reserved Powered by AFFINGER5.