Vue.jsのリアクティブディレクティブを幾つか試す その1
※qiitaに投稿した記事そのままです。
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>