2014年03月24日

vue.jsファーストインプレッション

Backbone.jsやAngluar.js、Knockout.jsはもう遅い。これからはvue.jsらしいのでとりあえず触ってみた。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<style>
li.done {
text-decoration: line-through;
}
</style>
<div id="demo">
<h1>{{title | uppercase}}</h1>
<ul>
<li
v-repeat="todos"
v-on="click: done = !done"
class="{{done ? 'done' : ''}}">
{{content}}
</li>
</ul>
</div>
<script>
var demo = new Vue({
el: '#demo',
data: {
title: 'todos',
todos: [
{
done: true,
content: 'Learn JavaScript'
},
{
done: false,
content: 'Learn vue.js'
}
]
}
});
</script>
</body>
</html>


タブパネルを作るとこんな感じ。

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.js"></script>
</head>
<body>
<style>
a.active{
font-weight:bold;
}
</style>
<div id="tabpanel" v-on="click: tabChange">
<a href="#tab1" v-class="active:tabSelected=='#tab1'">tab1</a>
<a href="#tab2" v-class="active:tabSelected=='#tab2'">tab2</a>
<a href="#tab3" v-class="active:tabSelected=='#tab3'">tab3</a>
<div id="tab1" v-show="tabSelected=='#tab1'">CSS1</div>
<div id="tab2" v-show="tabSelected=='#tab2'">CSS2</div>
<div id="tab3" v-show="tabSelected=='#tab3'">CSS3</div>
</div>
<script>
var demo = new Vue({
el: '#tabpanel',
data: {
tabSelected: '#tab1',
},
methods: {
tabChange: function (e) {
console.log(e)
if(e.target.nodeName === 'A'){
this.tabSelected = e.target.getAttribute("href");
}
return false
}
}
});
</script>
</body>
</html>
タグ:vue.js
【vue.jsの最新記事】
posted by ねこまんま at 14:05 | Comment(0) | TrackBack(0) | vue.js | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/392495230
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック