Vue.jsのテンプレート構文について

⬇️HTMLっぽいこれがテンプレート構文です

<div id="app">
  <p>{{message}}</p>
</div>

これを、Vue.jsがいろんな処理をして、最終的にHTMLとして出力し、ブラウザがレンダリングしている！

• マスタッシュタグの中に、messageとかsayHiとかのmain.jsのプロパティを記述します

App.vue

<div id="app">
  <p>{{message}}</p>
 <!--   マスタッシュタグの中身はJavaScriptをそのままかける -->
  <p>{{number + 4 }}</p>
  <p>{{sayHi()}}</p>
 <!-- マスタッシュタグ内に プロパティを記述する -->
</div>

main.js

new Vue({
    //elはクラス,id,divとかも取れる
    el:'#app',
    data:{
        message:'Hello Wold!',
    number:3
  },
  methods:{
        sayHi:function(){
            return 'Hi';
    }  
  }
})

methodsからdataにアクセスするには

インスタンス内のmethodsからdataにアクセスするには、以下のように書きます。

main.js

new Vue({
    //elはクラス,id,divとかも取れる
    el:'#app',
    data:{
        message:'Hello Wold!',
    number:3
  },
  methods:{
        sayHi:function(){
    //同じインスタンス内のmessageを表示させたい時、
            return this.message;
    }  
  }
})

thisをつけてプラパティであるmessage書くことで、
その値のHello World!が表示されます。