Vue.jsを使ってみたい！ - ひとりまとめ

Vue.jsの2.0プレビュー版が出たという記事を読んで、今更ながらVue.jsを使ってみました。「どうもデータを表示したりするのが簡単らしい」程度の前知識でスタートです。

しかも2.0ではなく1.0で、あくまでも初心者の入門、基礎の基礎ということで。

準備

とりあえず使ってみたいので、CDNを使って読み込みます。HTMLファイルのheadあたりで、これを記述。

<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js'>

※この時の安定版の最新が1.0.21なのでこれにしてみました。

仕組み

Vueというのをnewして使います。この人の変数とHTML内の記述を紐付けておくと、変数に合わせて描画を更新する仕組みのようです。（ざっくり）

なので、このオブジェクトをnewして以降しか機能しないので、最初からこれで描画するぞ！という場合は

window.onload = function() {}

の中で作っておいたりしないと、あれ？？ってことになります。当たり前か。

やってみる

今回試してみようと思うのは、次のようなものです。

・ページ表示時点で、同じ変数の値を同一ページ内の複数の場所に表示する

・ボタンを押したら値が変わる

色々手抜きしたいので、HTMLファイルの中にscriptタグを書いて、そこで試してみることにしました。以降は<head></head>の間に書いた↓の中で書き進めて行くことにします。

<script>

// （１）
window.onload = function() {

// （２）

}

// （３）

</script>

先に、表示する場所を記述しておきます。<body></body>の間に適当に。

基本は{{ 変数名 }}という書き方のようです。

<div id="demo">

<h1>{{ message }}</h1>

<p>{{ message }}</p>

<p>{{ num }}</p>

// （４）

</div>

// （５）

（４）と（５）には後でボタンをおきます。

単に描画するだけでおしまいなら変数に入れなくてもいいのだけど、色々値を書き換えることを考慮して、demoという名前の変数に入れてみます。とりあえずこんな感じ。

varを先に宣言してるのは、この後（３）で書こうとしてるfunctionからも見えるようにするためです。

// ここは（１）に

var demo;

--------

// ここは（２）に

demo = new Vue({
el: '#demo',
data: {
message: '最初のメッセージ',

num: 3,
},

methods:{

change: function(val){

this.num = this.num * val;

},

}

});

newするときに渡す配列の値で、色々定義できるということみたい。ここで僕がよくやらかすのが、間の「,」を忘れること。何でもかんでも「,」入れとこ。

el

値を変えたい場所を指定します。 divのidでdemoと言うのを指定したので#demoと書いてます。classなら.demoのように。ただし、classであっても複数の場所に指定していると最初に登場する領域しか対象にならないっぽげ。なので結局idの方が用途にあってそう。

data

変数。インスタンス変数ってやつか？

methods

メソッド。ここでは自分の変数（this.num）の値を引数をもとに書き換えてます。この中に書いてもいいし、ここから別のfunctionを呼び出してもOK。returnで値を返すこともできるので、普通に使える。

とりあえずこのままこのファイルをブラウザで開くと、{{ message }} と{{ num }}の場所に値が表示されてるかと思います。何箇所書いてもOK！便利！注意すべきは、elで指定しているidあるいはclassの下に書かれている必要があるということです。

（２）のwindow.onload = function() {}の中に書いてるので、読み込んだら即生成されてるために、表示することができてます。

さて、ここまでなら別にVue.jsじゃなくてもいいやんってことで、値を変えて表示も変わるというのを試します。

まずは、インスタンスのメソッドを使って値を書き換えてみます。

ここで一つ、ボタンにイベントを仕掛ける方法。ボタンから直接そのインスタンスのメソッドを叩くには、さっきの「el」の下に入れておかないとダメ。

ということで、（４）に次のように書きました。

<input type="button" v-on:click="change(3)" value="numを変える" />

v-on:clickというので、クリックイベントを引っ付けてます。属性を書き換えるときは「v-なんちゃら」というのが使えるようです。ある値の時だけ表示するとかもできるみたい。ここでは引数「３」を一緒に渡してます。

methodsの下で書いてるchangeというメソッドの中で変数numを更新しているので、ボタンを押すたびに{{ num }}と書いた箇所の値が更新されていきます。

メソッド使って値を書き換えるのも面倒くさいなーって思ったら、直接変数を更新することもできるようです。（他から弄れるべきかどうかは考えるとして、ひとまず）

次はその方法。（５）に次のようなボタンを設置します。

<input type="button" value="messageを変える" onClick="changeMessage('別のメッセージ');"/>

onClickで指定したfunctionを（３）の場所に次のように書いてみました。

function changeMessage(val){
demo.message = val;
}

ここでdemoというふうにいきなり使えてるのは、（１）でvar demo;のように宣言してるためです。そして変数messageに＝で代入することでも、値を更新できます。ここでも変数を更新することで、すべての表示箇所の値が書き換わります。

他にもループが作れる「v-for」とか、条件によって表示/非表示を変えらる「v-show」などがあって、ちょっと何かやるには便利そうっす！

アニメーションでグリグリ動かすとかっていうのではなく、データを動的に表示しまくったりするときには楽そうかなーと思いました。