au PAY マーケット

Vue.js Lesson1

★★★ Lesson 1 ★★★

Vue.js
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
<div id=“ID名”>
</div>
                              
JS 1
2
3
4
5
6
7
8
new Vue({
 el: ‘#ID名’,
 data:{
  プロパティ名:値,
  プロパティ名:値
 }
})
                              

Vueインスタンスの中身

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


只要你认真去学,你一定能学会的,下一课继续加油哦!

如果你觉得这个网站对学习有帮助,一定要跟亲朋好友分享哦!


Lesson1 Lesson2

前の記事

あまり(に)

次の記事

Vue.js Lesson2
ショップチャンネル