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: "サンプル",
url: "www.example.com",
alexa: "10000"
},
methods: {
details: function() {
return this.site + " - 学ぶのは技術だけでなく、夢でもある！";
}
}
})</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: "サンプル", url: "www.example.com", alexa: 10000}
var vm = new Vue({
el: '#vue_det',
data: data
})
// それら引用相同のオブジェクト！
document.write(vm.site === data.site) // true
document.write("<br>")
// 设置属性也会影响到原始数据
vm.site = "サンプル"
document.write(data.site + "<br>") // サンプル
// ……反之亦然
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: "サンプル", url: "www.example.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>
試してみる »