LoginSignup
0

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-07-23

こちらの記事の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が更新されています。

出力されるHTML
<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」の文字が緑色になりました。

出力されるHTML
<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」の文字を緑にすることができました。

出力されるHTML
<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スタイルも変更されました。

クリック後に出力されるHTML
<span style="font-size: 20px; color: red;">Magnified</span>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0