最近、JavaScriptを拡張したり、HTML中でPHPのようにJavaScriptを実行したり、仮想DOMとかがはやっているのね。
最近のフロンドエンドにはついていけない・・・・・・
そんななか、Vue.jsのHTMLのタグやアトリビュートの中でPHPのようにJavaScriptを実行できる機能はなんとなく理解できてとても気に入りました。
Angular.jsだと変数とか関数にアクセスするの大変だもんね。
これはちょー便利。
また、Vue.jsはJavaScriptから一切DOMを操作しなくて良いように設計されているのもよいですね。
HTMLの中を汚さないので、デザイナーの納品データをすぐに更新できるのもよいです。
Vue.jsならばjQueryから乗り換えられそうな気がする。
おじさん、C言語風にVue.jsのコードを書いてみました。
------------------------------
<!DOCTYPE html>
<html lang="ja">
<body>
<h1>Vueサンプル</h1>
<div id="app" v-bind:tag="getMessage()">
{{ getMessage() }}</br>
{{ hogeee}}
</div>
<div id="aaa">
<div v-for="n in kaisuu" v-bind:id="'id_'+n" v-on:click="onClickApp(n)">{{ n }}:{{ getHoge(n) }}</div>
</div>
<script src="vue.js"></script>
<script language="Javascript">
var kaisuu=5;
var hogeee="123456789";
println=function(str){
alert(str);
}
getMessage=function(){
var ret="hoge";
return ret;
}
onVueReady=function()
{
println("onVueReady()");
}
onClickApp=function(n)
{
var str="onClickApp(";
str+=n;
str+=")";
println(str);
}
getHoge=function(n)
{
var ret="hoge_";
ret+=n;
return ret;
}
new Vue({
el: '#app',
data: {
hogeee: hogeee,
},
methods: {
getMessage: getMessage,
},
created: onVueReady,
});
new Vue({
el: '#aaa',
data: {
kaisuu: kaisuu,
},
methods: {
getHoge: getHoge,
onClickApp: onClickApp,
},
});
</script>
</body>
</html>
------------------------------
0 件のコメント:
コメントを投稿