au PAY マーケット

Vue.js Lesson2

★★★ Lesson 2 ★★★

Vue.js
Vue.js
マスタッシュ({{ }})タグでデータを表示
●{{ データ }}●
★ データをそのまま表示する時は、「{{ }}」を使います。 ★書式★
書式
  {{ プロパティ名 }}
※HTMLの表示テキスト部分に、{{ プロパティ名 }}と記述します。この二重波括弧のことを、マスタッシュ(Mustache)タグといいます。
                                    

■データをそのまま表示する例:demo1.html
それでは、データとして用意した「Hello dekiruneko!」の文字を表示してみましょう。 HTML 1
2
3
<div id=“app”>
 <p>{{ myText }}</p>
</div>
                              

 まず、HTMLのdiv要素に「id=”app”」と指定して、Vueインスタンスとつなげようと思います。
 次に、そのdiv要素の中で、文字を表示されたい場所に、「myText」をマスタッシュタグで囲んで書きます。この名前は自由に作れます。表示側の設定はこれで終わりです。
JS 1
2
3
4
5
6
7
8
<script>
 new Vue({
  el: ‘#app’,
  data:{
   myText:‘Hello dekiruneko!’
  }
 })
</script>
                              

 次は、Vueインスタンスの設定です。
「el:」に「’#app’」と指定すると、HTMLのdiv要素とつながります。
「data:」に「myText」プロパティを用意して、値を「’Hello dekiruneko!’」にします。
 ブラウザで実行してみると、「{{ myText }}」の場所に「Hello dekiruneko!」と表示されるのがわかります。
ブラウザで次のように表示された

Hello dekiruneko!
 


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

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


Lesson1 Lesson3

前の記事

Vue.js Lesson1

次の記事

あまりの〜に/で
ショップチャンネル