プログラミング学習記録

自動車メーカー勤務しながらプログラミング学習中。学習記録を残していきます。

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のこと オブジェクト.プロパティ名でアクセスできる。