Vue.jsの復習

はじめに

Vue.jsをUdemyで学習したのですが、
時間が経ってしまったので
基本的な部分を思い出すために記事にしました。

データバインディング

データと描画を同期する仕組み
以下のようなコードでブラウザ上では
Hello Vue.js!と表示されます。

.html

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

.js

const app = Vue.createApp({
  data: () => ({
    message: 'Hello Vue.js!'
  })
})
app.mount('#app')

ディレクティブ

v-から始まる属性。
directive(指令) Vue.jsに指示する仕組み

v-bind

htmlの属性に紐づける。

.html

<div id="app">
  <input type="text" v-bind:value="message">
</div>

.js

const app = Vue.createApp({
  data: () => ({
    message: 'Hello Vue.js!'
  })
})
app.mount('#app')

※省略も可能

<div id="app">
  <input type="text" :value="message">
</div>

v-on

イベントを発生させることができる。

.html

<div id="app">
  <button v-on:click="onClick">Click!</button>
  <p>{{ now }}</p>
</div>

.js

const app = Vue.createApp({
  data: () => ({
    now: '-'
  }),
  methods:{
    onClick:function(){
      this.now = new Date().toLocaleString()
    }
  }
})
app.mount('#app')

※こちらも@に省略可能

.html

<div id="app">
  <button @click="onClick">Click!</button>
  <p>{{ now }}</p>
</div>