Vue.jsの基礎、テンプレート構文
テンプレート構文とは
HTML <div id="app"> <p>{{ message }}</p> </div>
HTMLコードを書いているのではなく、Vue.jsのテンプレート構文を書いている。 最終的にVue.jsがHTMLを出力してブラウザに表示している。
二重中括弧を使ってデータを描画
HTML <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <div id="app"> <p>{{ message }}</p> <p>{{ number + 5 }}</p> <p>{{ ok? 'Yes' : 'No'}}</p> <p>{{ sayHi() }}</p> </div>
Javascript new Vue({ el: '#app', data: { message: 'HelloWorld!', number: 3, ok: true, }, methods: { sayHi: function() { return 'Hi'; } } })
Vueインスタンス内のdata要素に変数を定義する。 格納した変数はhtml側で{{ }}をつけると呼び出すことができる。
結果 HelloWorld! 8 Yes Hi
thisを使って、methodからdataを使う
HTML <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <div id="app"> <p>{{ sayHi() }}</p> </div>
new Vue({ el: '#app', data: { message: 'HelloWorld!', }, methods: { sayHi: function() { return this.message; } } })
インスタンス内で自分のインスタンスのプロパティにアクセスする場合はthisが必要。
プロパティとは
let user = { name: '山田太郎', age: 27, address: '東京都' } console.log(user.name); >> 山田太郎
name、age、addressのこと
オブジェクト.プロパティ名
でアクセスできる。