vue.jsの使い方オブジェクト編の続きである。このページではグローバルAPIについて解説する。
逆引き：タグエイリアス、data操作の追加と削除、スタイルのエイリアスと操作、変換フィルタ、ミックスイン、バージョン
コンポーネントを使うことで独自要素を定義できる。
<div id="id1">
<mytag></mytag>
</div>
<script>
Vue.component('mytag', {
template: '<strong>my tag element</strong>'
})
var vuei1 = new Vue({
el: '#id1'
})
</script>
結果は「my tag element」と太字で表示される。
Vue.component()はコンポーネントを定義して、独自要素を使うことができる。ここではmytagタグを定義している。インスタンスを生成することで、タグを反映する。
Vue.component()の第２引数はサブクラスを指定できる。サンプルを示す。
<div id="id1-2">
<mytag2></mytag2>
</div>
<script>
var MyComponent1_2 = Vue.extend({
template: '<strong>my tag element</strong>'
})
Vue.component('mytag2', MyComponent1_2)
var vue1_2 = new Vue({
el: '#id1-2',
})
</script>
実行結果はid1のときと同じである。
vue.jsではvueオブジェクトのデータが変更されるとビューも自動的に更新されるようになっているが、以下３つの場合は自動的に更新されない。
プロパティの追加または削除（例：this.b = 2 ）
配列にインデックスを使用して直接値を設定（例：this.items[1] = 'x'）
配列の長さを変更（例：this.items.length = 2）
プロパティの追加または削除の場合はVue.set()とVue.delete()を使うと自動的に更新できる。代わりに、this.$set()とthis.$delete()でもよい。サンプルを示す。
<div id="id2">
<input type="button" @click="tenClick" value="10">
<input type="button" @click="elevenClick" value="11">
<input type="button" @click="twelveClick" value="12">
<input type="button" @click="thirteenClick" value="13">
<ul>
<li v-for="(value, key) in words">{{ key }} = {{ value }}</li>
</ul>
</div>
<div id="idWords"></div>
<script>
var vuei2 = new Vue({
el: '#id2',
data: {
words: {
nine: '9',
ten: '10'
}
},
methods: {
tenClick: function() {
if (this.words.ten == '10')
this.words.ten = '-';
else
this.words.ten = '10';
PrintWords(this.words);
},
elevenClick: function() {
if (this.words.eleven == undefined)
Vue.set(this.words, 'eleven', '11(Vue.set)');
else
Vue.delete(this.words, 'eleven');
PrintWords(this.words);
},
twelveClick: function() {
if (this.words.twelve == undefined)
this.$set(this.words, 'twelve', "12(this.$set)");
else
this.$delete(this.words, 'twelve');
PrintWords(this.words);
},
thirteenClick: function() {
if (this.words.thirteen == undefined)
this.words.thirteen = "13(direct)";
else
delete this.words.thirteen;
PrintWords(this.words);
}
}
})
function PrintWords(words)
{
var s = '';
for(const [key, value] of Object.entries(words)){
s += `${key}: ${value}` + '<br>';
}
document.getElementById('idWords').innerHTML = s;
}
PrintWords(vuei2.words);
</script>
実行するとボタン３つとvueによって表示されたリスト、現在のデータが表示される。13ボタンをクリックしてもすぐにはvueのリストには反映されず、他のボタンをクリックしたときに反映される。
ディレクティブにはv-htmlやv-model、v-for、v-showなどがあるが、自作のものも作成できる。
<div id="id3">
この機能は<span v-important>ここが重要</span>です。
</div>
<script>
Vue.directive('important', {
inserted: function(el) {
el.style.color = 'red';
el.style.fontWeight = 'bold';
}
})
var vuei3 = new Vue({
el: '#id3'
})
</script>
実行結果は「この機能はここが重要です。」と表示されるが、「ここが重要」の部分は太字の赤になっている。ここではv-importantというカスタムディレクティブを作っている。insertedは要素が挿入されるとき呼ばれるという意味である。
カスタムディレクティブは引数を使うことができる。例を示す。
<div id="id3-2">
幅： <input type="text" v-model="xsize">
<div v-box="xsize" style="background-color:red;"></div>
<div v-box="200" style="background-color:green;"></div>
</div>
<script>
Vue.directive('box', {
bind: function (el, binding, vnode) {
el.style.width = binding.value + 'px';
el.style.height = '100px';
},
update: function (el, binding, vnode) {
el.style.width = binding.value + 'px';
el.style.height = '100px';
}
})
var vuei3_2 = new Vue({
el: '#id3-2',
data:{
xsize: "150"
}
})
</script>
実行するとテキストボックス、赤の矩形、緑の矩形が表示される。緑の矩形は幅が200pxになっている。赤の矩形の幅はテキストボックスの値によって変化する。「v-box="200"」は引数が200という意味である。「v-box="xsize"」は引数がxsizeデータによる。bindは初めて対象要素に紐づいたときに呼び出され、updateはVNodeが更新される度に呼び出される。
vueオブジェクトにはフィルタ（filters）があったが、グローバルAPIにもある。
<div id="id4">
<div>{{ message | toupper }}</div>
</div>
<script>
Vue.filter('toupper', function(value) {
return value.toUpperCase()
})
var viewi4 = new Vue({
el: '#id4',
data: { message: 'Hello!' }
})
</script>
オブジェクト編でもあったミックスインはグローバルAPIでも利用できる。書き直してみる。
<div id="id5">
<input type="button" @click="ShowData" value="ShowData">
</div>
<script>
Vue.mixin({
methods: {
ShowData: function(e) {
alert(this.myData);
}
}
})
var vuei5 = new Vue({
el: '#id5',
data: {
myData: 'I live in Japan.'
}
})
</script>
バージョンを表示する。
<div id="id6">{{ Vue.version }}</div>
<script>
var vuei6 = new Vue({
el: '#id6'
})
</script>
結果は2.6.11 などのバージョンが表示される。