Vue.js Lesson1

★★★ Lesson 1 ★★★

Vue.js

Vueインスタンス

●new Vue●
★ Vueインスタンスを作成する

★書式★

■書式
new Vue({ Vueインスタンスの中身 })
または
var 変数名 new Vue({ Vueインスタンスの中身 })
　
■オプション
「Vueインスタンス」では、まず「elオプション」と「dataオプション」を用意します。
　・elオプション:「どのHTML要素とつながるのか」を指定します。
　　※HTMLの中に「<タグ名 id="ID名">と書いた要素」という記述をしておいて、elオプションで「el: ‘#ID名’」と指定することでその要素とつながります。
　・dataオプション:「どんなデータがあるのか」を指定します。
　※「data : { データ部分 }」に、「<プロパティ名> : <値>」の書式でデータを書いていきます。ここに書くことで、データが作られます。Vue.jsでは、データの名前のことをプロパティといいます。もし、データが複数ある場合は、カンマ区切りで並べることができます。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Vueインスタンスを作る例：（el、dataオプション）

HTML

1
2
3

JS

1
2
3
4
5
6
7
8

new Vue({
　el: ‘#ID名’,
　data:{
　　プロパティ名:値,
　　プロパティ名:値
　}
})
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Vueインスタンスの中身

　new Vue({
　　　 el:　どのHTML要素とつながるのか
　　　 data:　どんなデータがあるのか
　　　 methods:　どんな処理を行うのか
　　　 computed:　どのデータを使って別の計算をするのか
　　　 watch:　どのデータを監視するのか
　})
　