ディレクティブ集

v-once

これだとhello worldが書き換わってしまう

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

new Vue({
	el:'#app',
  data:{
  	message:'Hello world'
  },
  methods:{
  	sayHi(){
    this.message='Hello vuejs'
    return 'Hi'
    }
  }
})

そんなとき、一度だけの変化で留めておきたいときは

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

<div id="app">
  <p　v-once>{{message}}</p>
  <p>{{sayHi()}}</p>
</div>

new Vue({
	el:'#app',
  data:{
  	message:'Hello world'
  },
  methods:{
  	sayHi(){
    this.message='Hello vuejs'
    return 'Hi'
    }
  }
})

v-html

v-bind: 省略して:だけでもok

v-on

イベント一覧
https://developer.mozilla.org/ja/docs/Web/Events

キー修飾

v-on:keyup.enter

v-onの短縮

＠

v-model

<div id="app">
  <input type="text" v-model="message">
  <h1>{{message}}</h1>
</div>

new Vue({
	el:"#app",
  data:{
  	message:'こんにちは'
  }
})