Vue.jsのリアクティブディレクティブを幾つか試す

こちらの記事の1st stepをベースに、spanタグの中にあるリアクティブディレクティブを試しました。公式サイトのAPIリファレンスを一度見てもよくわからないことが多いので、実際に動かしてみてどのような命令なのか確認してみます。

まず1st Stepの動作確認

クリックすると、Hello Vue.jsのフォントサイズと色が変わりました!

コードの確認

詳しい説明は元記事に書いてありますが、自分なりに解釈してみます。

<div id="simple">
    <span v-text="message" v-on="click: magnify" v-attr="style: font"></span>
</div>

var app = new Vue({
    el: '#simple',
    data: {
        message: "Hello Vue.js",
        font: ""
    },
    methods:{
        magnify: function(){
            this.font = "font-size:20px;color:red"
        }
    }
})

Vueインスタンスの生成で代入されたappは ViewModelインスタンスになります。 Vueインスタンスの引数にある、 el (コンポーネントオプション) は、HTML要素のidを指定しており、これによって<div id="simple">以下のDOM要素はVue管理下となります。

data、methodsのデータは、HTMLのspanタグにあるv-から始まる属性(リアクディブディレクティブ)によって、様々な命令でバインドすることができます。バインドされた要素は同期されるため、Vueインスタンス内にある値の更新によって変更することができます。

v-text

spanタグのテキストは何も入っていませんが、messageプロパティの値、"Hello Vue.js"が、v-textでバインドされているため、DOMのtextContentが更新されています。

<span>Hello Vue.js</span>

v-textをMustacheバインディングに置き換え

{{ Mustache }}という書き方でバインドすることもできるようなので(Mustacheバインディング)、上記のv-textでの指定方法を変えてみました。

<div id="simple">
    <span v-on="click: magnify" v-attr="style: font">{{message}}</span>
</div>

同じようにtextContentが更新されました!

v-attr

v-attrは、v-textと違い、style:という引数が指定されています。このディレクティブは、引数に指定した属性で要素を更新する役割ですが、fontプロパティが空の文字列になっているので、バインドされていても最初はspanに属性が追加されません。わかりやすいようにスタイルを指定してみます。

var app = new Vue({
    el: '#simple',
    data: {
        message: "Hello Vue.js",
        font: "color:green"
    },
    methods:{
        magnify: function(){
            this.font = "font-size:20px;color:red"
        }
    }
})

style属性が追加されて「Hello Vue.js」の文字が緑色になりました。

<span style="color: green">Hello Vue.js</span>

v-style

v-attrでスタイルを変更しましたが、CSSスタイル専用のディレクティブ、v-styleがあるので、こちらで上記と同じスタイルの更新をしてみます。この場合は命令がスタイルの更新と決まっているので、引数が必要なくなります。

<div id="simple">
    <span v-on="click: magnify" v-style="font">{{message}}</span>
</div>

これでも同じように「Hello Vue.js」の文字を緑にすることができました。

<span style="color: green">Hello Vue.js</span>

v-on

引数に指定されているclick:は、イベントタイプです。その名の通りクリックイベントを監視して、クリックされたらmethodsメソッドを呼び出します。今回はクリックされたらfontスタイルを変えるだけではなく、テキストも変えてみることにします。

var app = new Vue({
    el: '#simple',
    data: {
        message: "Hello Vue.js",
        font: "color:green"
    },
    methods:{
        magnify: function(){
            this.message = "Magnified"
            this.font = "font-size:20px;color:red"
        }
    }
})

これでクリックするとtextContentが"Hello Vue.js"から"Magnified"に変わり、fontスタイルも変更されました。

<span style="font-size: 20px; color: red;">Magnified</span>

aosy

Vue.jsのリアクティブディレクティブを幾つか試すその1