vue.js２ 基礎構文

１、二重中括弧を使用してデータを抽出する。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<div id=""app>
 <a>{{ message }}</a>
 <a>{{ number }}</a>
 <a>{{ ok ? 'Yes' : 'No' }}</a>
 <a>{{ test() }}</a>
<div>

new Vue({
el: '#app',
data:{
message:'Helloworld',
number: 3 ,
ok: false
},
methods: {
  test : function(){
  return 'test';
  }
}
})

出力結果
Helloworld
8
No
test

Hellowork、numberはVueファイルの記入した
内容が出力される。
NoはOKのfalse＝反対なので、NOが出力される。
testはmethodsの関数の出力値が出力される。

２、thisを使用する。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<div id=""app>
 <a>{{ test() }}</a>
<div>

new Vue({
el: '#app',
data:{
message:'Helloworld',
number: 3 ,
},
methods: {
  test : function(){
  return this.message;
  }
}
})

出力結果
Helloworld

thisを使用する事で、
new Vue{}内のmessageやnumberを指定し、
文字や値を出力することができる。

return this.number;
の場合は、
3が出力される。