Vue.jsで最初の一歩

各Vueアプリケーションは、Vueをインスタンス化して実装する必要があります。

構文は次となります。

var vm = new Vue({
  // オプション
})

次には、例を通してVueコンストラクタに必要なものを見てみましょう。

例

<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>{{details()}}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
site: "Florian Studio",
url: "www.ceodata.com.com",
alexa: "10000"
},
methods: {
details: function() {
return  this.site + " - Tech Power！";
}
}
})
</script>

Vueコンストラクタにel引数があり、これがDOM要素のidであることがわかります。上記の例では、idはvue_detです。div要素の中にあります。

<div id = "vue_det"></div>

これは、次の変更がすべて上記で指定されたdiv内にあり、divの外側は影響を受けないことを意味します。

次、データオブジェクトを定義する方法を見てみましょう。

dataはプロパティを定義するために使用されます。この例には、site、url、alexaの3つのプロパティがあります。

methodsは関数を定義するために使用され、関数の値はreturnで返します。

{{ }} オブジェクトのプロパティと関数の返す値を出力するために使用されます。

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>

Vueインスタンスが作成されると、そのdataオブジェクトにあるすべてのプロパティがVueのリアクティブシステムに追加されます。 これらのプロパティ値が変更されると、それに応じてhtmlビューも変更されます。

例

<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// データオブジェクト
var data = { site: "Florian Studio", url: "www.ceodata.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
// それらは同じオブジェクトを参照する！
document.write(vm.site === data.site) // true
document.write("<br>")
// プロパティの設定は元のデータにも影響する
vm.site = "Florian"
document.write(data.site + "<br>") // Florian
// ……逆にしても同じ
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>

データプロパティ以外、Vueインスタンスはいくつかの有効的なインスタンスプロパティとメソッドも提供します。ユーザー定義のプロパティと区別するために、先頭に$が付いています。 例えば：

例

<div id="vue_det">
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// データオブジェクト
var data = { site: "Florian Studio", url: "www.ceodata.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
document.write(vm.$data === data) // true
document.write("<br>")
document.write(vm.$el === document.getElementById('vue_det')) // true
</script>