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

コロナによる需要変化 コロナパンデミックの影響で、人々は外に出られなくなり、自宅で過ごす時間が増えました。 この自粛ムードの中、下記のようなビジネスの需要変化が引き起こされています。 【利用者減少】 ...

2

米国レストランの決済時に毎日お世話になっていた「Square」のビジネスモデルについて本日はふれていきたいと思います。 「Square」とは、ネットにつながったモバイル端末と専用のカードリーダーを用意 ...

3

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

4

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

5

ナイキのSNKRSが、なぜこれほどまでに人気なのか?調べてみました。 きっかけは米国での友達との会話。彼は自分のシューズをみせて、「これ20万円もしたんだぜ。」と語ってくれました。 あまり靴に興味がな ...

-Blockchain, code, Metaverse, VR
-, ,

Copyright© BUSINESS HACKER , 2021 All Rights Reserved Powered by AFFINGER5.