【Javascript】Vue3のディレクティブまとめ

<div id="app">
  <!-- 以下２つは同じ意味。表現が異なるだけ -->
  <p v-text="message">既存のコメント</p>
  <p>{{ message }}</p>
</div>

<script>
  Vue.createApp({
    data(){
      return {
        message: 'Hello Vue js!'
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <p><a v-bind:href="url" target="_blank">google</a></p>
  <!-- 省略形 -->
  <p><a :href="url" target="_blank">google</a></p>
  <!-- これでは動かない -->
  <p><a href="{{url}}" target="_blank">google</a></p>
</div>

<script>
  Vue.createApp({
    data(){
      return {
        url: 'https://www.google.com'
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <p>v-text: <span v-text="htmlText"></span></p>
  <p>v-html: <span v-html="htmlText"></span></p>
</div>

<script>
  Vue.createApp({
    data(){
      return {
        htmlText: '<span style="color: red;">RED</span>'
      }
    }
  }).mount('#app')
</script>

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

<script>
  Vue.createApp({
    data(){
      return {
        message: 'Hello Vue js!'
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <form v-on:submit.prevent>
    <label for="textBox">テキスト: </label>
    <input type="text" id="textBox" v-model="text">
  </form>
  <div v-once>再描画なし: {{text}}</div>
  <div>再描画あり: {{text}}</div>
</div>

<script>
  Vue.createApp({
    data(){
      return {
        text: '初期値'
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <button v-on:click="countUp(2)">Add</button>
  <!-- 省略形 -->
  <button @click="countDown(2)">Remove</button>
  <p>Clicked {{ count }} times.</p>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        count:0 //初期値
      }
    },
    methods:{
      countUp(num){
        this.count += num
      },
      countDown(num){
        this.count -= num
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <input type="text" v-model="message">
  <p>入力内容 : {{ message }}</p>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <form action="">
    <div>OSを選んでください。</div>
    <input type="checkbox" id="windows" value="Windows" v-model="os">
    <label for="windows">Windows</label>
    <input type="checkbox" id="linux" value="Linux" v-model="os">
    <label for="linux">Linux</label>
    <input type="checkbox" id="mac" value="MacOS" v-model="os">
    <label for="mac">MacOS</label>
  </form>
  <p>選択:{{ os }}</p>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        os: []
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <hello-tpl>山田</hello-tpl>
</div>

<script>
  Vue.createApp({})
  .component('hello-tpl', {
    template:`<div>こんにちは<slot>ゲスト</slot>さん！</div>`, 
  })
  .mount('#app')
</script>

<div id="app">
  <p v-if="flag">
    これはTrueの状態です。
  </p>
  <p v-else>
    これはFalseの状態です。
  </p>
  <button v-on:click="chaneFlag()">ボタンを押してね。</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        flag: true
      }
    },
    methods:{
      chaneFlag:function(){
        this.flag = !this.flag
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <p v-show="flag">
    こんにちは！
  </p>
  <button v-on:click="chaneFlag()">ボタンを押してね。</button>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        flag: true
      }
    },
    methods:{
      chaneFlag:function(){
        this.flag = !this.flag
      }
    }
  }).mount('#app')
</script>

<div id="app">
  <ul>
    <li v-for="(item, index) in items" :key="item.title">
      {{index}} : {{item.title}} : {{item.author}} : {{item.published}}
    </li>
  </ul>
  <hr>
  <ul>
    <li v-for="(value, key, index) in books">
      {{index}} : {{key}} : {{value}}
    </li>
  </ul>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        items:[
          {title:'Romeo and Juliet ', author:'William Shakespeare', published:'1595'},
          {title:'Hamlet', author:'William Shakespeare', published:'1601'},
          {title:'Macbeth', author:'William Shakespeare', published:'1606'},
        ],
        books:{
          title:'Hamlet',
          author:'William Shakespeare',
          published:'1601',
        }
      }
    },
  }).mount('#app')
</script>

<div id="app">
  <select v-model="selectedItem" v-on:change="selectItem">
    <option 
      v-for="item in items"
      v-bind:key="item.id" 
      v-bind:value="item.id"
    >
      {{ item.name }}
    </option>
  </select>
  <div v-for="item in items" :key="item.id" v-memo="[item.id, selectedItem]">
    <p v-if="item.id === selectedItem">{{item.name}} : selected ← ここだけ更新</p>
    <p v-else-if="item.id === preselectedItem">{{item.name}} : unselect ← ここだけ更新</p>
    <p v-else="item.id === selectedItem">{{item.name}} : unselect ← 更新しない</p>
  </div>
</div>

<script>
  Vue.createApp({
    data() {
      return {
        items:[
          { id: 1, name:'ITEM1' },
          { id: 2, name:'ITEM2' },
          { id: 3, name:'ITEM3' },
          { id: 4, name:'ITEM4' },
          { id: 5, name:'ITEM5' },
          { id: 6, name:'ITEM6' },
          { id: 7, name:'ITEM7' },
          { id: 8, name:'ITEM8' },
          { id: 9, name:'ITEM9' },
        ],
        selectedItem:1,
        preselectedItem:1,
      }
    },
    methods:{
      selectItem:function(e){
        this.preselectedItem = this.selectedItem
      }
    }
  }).mount('#app')
</script>

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

[v-cloak] {
  display: none;
}

<script>
  // v-cloak確認のためvueの実行を遅らせる
  window.setTimeout(() => {
    Vue.createApp({
      data() {
        return {
          message: 'こんにちは！',
        }
      },
    }).mount('#app')
  }, 2000);
</script>

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

[v-cloak] {
  display: none;
}

<script>
  // v-cloak確認のためvueの実行を遅らせる
  window.setTimeout(() => {
    Vue.createApp({
      data() {
        return {
          message: 'こんにちは！',
        }
      },
    }).mount('#app')
  }, 2000);
</script>