VueJs 覚書 その1「 ディレクティブについて」
/ 2016.03.21 /
WEB /
1.0系と0.0系でディレクティブる際のお作法が一部異なるのでメモ。
- ネットに転がってる記事は割りと0.0系が多い印象。
- コピペで使うと
私みたいに痛い目に遭う。 - ココのNotable Changesをよく読む事。
v-if, v-show
v-if
のみtemplate
使用可能。
一般的に言って、v-if はより高い切り替えコストを持っているのに一方、v-show はより高い初期レンダリングコストを持っています。そのため、とても頻繁に何かを切り替える必要があるのであればむしろ v-show を選び、条件が実行時に変更することがほとんどない場合は、むしろ v-if を選びます。
#myApp
button(v-on:click="ok=!ok") change
template(v-if="ok")
h2 hello
p world
template(v-else)
h2 bye
p bye
script.
var vm = new Vue({
el: '#myApp',
data: {
ok: true
}
});
v-on
1.0系になって、v-on="click:hoge"
からv-on:click="hoge"
に記述方法が変わった。
ついでにv-on:click="hoge"
は@:click="hoge"
に省略可能。
#myCounter
div(v-text="count")
button(v-on:click="countUp") カウントアップする
script.
var vm = new Vue({
el: '#myCounter',
data: {
count: 0
},
methods: {
countUp: function(){
this.count++;
}
}
});
v-class → v-bind:class
1.0系からv-class
は廃止されて、v-bind
に統合されてv-bind:class
で対応するようになったっぽい。
ちなみにv-bind:class="{hoge: fuga}"
は:class="{hoge: fuga}"
に省略可能。
//- jade形式
style.
div { width: 200px; background-color: blue; color: #fff;}
.active { background-color: red; }
#myApps
div(v-bind:class="{active: isActive}" v-on:click="isActive=!isActive") {{ content }}
script.
var vm = new Vue({
el: '#myApps',
data: {
content: 'click me',
isActive: false
}
});
v-on:click="isActive=!isActive"
でtoggleになる。超便利。
下記のように直接バインドも可能。
これが一番使用頻度が高そげ。
style.
.active {background-color: red !important;}
.btn { width: 200px; background-color: blue; color: #fff;}
#myApps
div(v-bind:class="hoge" v-on:click="hoge.active=!hoge.active") {{ content }}
script.
var vm = new Vue({
el: '#myApps',
data: {
content: 'hellow vue',
hoge: {
'active': false,
'btn': true
}
}
});
配列構文(条件付き)の場合
これもよく使うことになりそうだからメモ。
条件は三項演算子で書く。
ここまで書いておいてなんだけど公式のドキュメントのコピペみたいになってる。
VueJSは公式のドキュメントのできがとても良いと思う。
分かりやすい。
style.
.active {background-color: red !important;}
.btn { width: 200px; background-color: blue; color: #fff;}
#myApps
div(v-bind:class="[c_btn, showActive ? c_active : '']" v-on:click="showActive=!showActive" )
{{ content }}
script.
var vm = new Vue({
el: '#myApps',
data: {
content: 'hellow vue',
c_active: 'active',
c_btn: 'btn',
showActive: false
}
});
v-repeat → v-for
1.0系からv-repeat
は廃止、今後はv-for
で対応。
オブジェクトをforる場合は{{$key]} {{value}}
で値を出力できる。
v-repeatの時は{{$key}} {{$value}}
だったから、地味にハマってた。
v-repeat (old)
#myApp
ul
li(v-repeat="hoge") {{$value}}
ul
li(v-repeat="fuga") {{$key}} : {{$value}}
ul
li(v-repeat="piyo") {{$index}} . {{name}} : {{age}}
script.
var vm = new Vue({
el: '#myapp',
data: {
hoge: ['a', 'b'],
fuga: {A: 'a', B: 'b'},
piyo: [
{name: 'mogami moga', score: 26},
{name: 'yumemi nemu', score: 28}
]
}
});
v-for (new!!)
#myApp
ul
li(v-for="value in hoge") {{value}}
ul
li(v-for="value in fuga") {{$key}} : {{value}}
ul
li(v-for="value in piyo") {{$index}} . {{ value.name }} : {{ value.age }}
script.
var vm = new Vue({
el: '#myapp',
data: {
hoge: ['a', 'b'],
fuga: {A: 'a', B: 'b'},
piyo: [
{name: 'mogami moga', score: 26},
{name: 'yumemi nemu', score: 28}
]
}
});
v-model
FormとModelを連動させる。
#myApp
p
input(type="text" v-model="name")
{{name}}
p
input(type="checkbox" v-model="isAccept")
{{isAccept ? "accept" : ""}}
p
input(type="radio" name="phone" v-model="phone" value="iphone")
label(for="iphone") iphone
input(type="radio" name="phone" v-model="phone" value="android")
label(for="android") android
br
{{phone}}
p
select(v-model="city")
option(value="tokyo") tokyo
option(value="kyoto") kyoto
option(value="osaka") osaka
{{city}}
script.
var vm = new Vue({
el: '#myApp',
data: {
name: 'yumemi nemu',
isAccept: true,
phone: 'iphone',
city: 'tokyo'
}
});
おわりに
シンタックスハイライトさせるためにhighlight.js
を導入したんだけど、jadeが未対応っぽい…。
むちゃくちゃなカラーが割当たってしまってるけど、まあいいか。