初心者がVue.jsの公式ガイドを勉強するメモ テンプレート編

• 並んでいる題名がくどく感じてきたので、少し変えました。　

• 今回の学習箇所です。https://jp.vuejs.org/v2/guide/syntax.html

  テンプレート構文

  テキスト

• App.vue

<template lang="pug">
  #app
    div Message: {{ msg }}
    div(v-once) NeverChange: {{ msg }}
      div Message: {{ msg }}
        div Message: {{ msg }}
    button(@click=' msg="change Message !" ') click!
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: 'This First Message'
    }
  },
}

</script>
style省略

• v-once は、子要素にも影響するので注意です。

ナマのhtml

• App.vue

<template lang="pug">
  #app
    div {{ msg }}
    div(v-html="msg")
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      msg: '<p style="color:red">html</p>'
    }
  },
}

</script>

• ヒゲ付きは、値をそのまま出して、v-htmlは　htmlを解釈するので使い所に注意しなさいとのこと。

属性

• App.vue

<template lang="pug">
  #app
    div {{ msg }}
    button(v-bind:disabled="btn1" @click="msg='change message'") Button1
    button(v-bind:disabled="btn2" @click="msg='change message'") Button2
    div
      | checkbox: {{ btn3 }}
      input(v-bind:checked="btn3" v-model="btn3" type="checkbox")

</template>

<script>
import Vue from 'vue'


export default {
  name: 'app',
  data () {
    return {
      msg: 'aaa',
      btn1: true,
      btn2: false,
      btn3: true
    }
  },
  methods: {
  }
}
</script>

• v-bindでtrue / falseを扱うときの挙動の説明です。
• disable値の有効・無効になっています。 checkbox等であれば、checked値になりますね。

JavaScript 式の使用

• App.vue

<template lang="pug">
  #App
    div {{ number + 1 }}
    div {{ number ? 'Yes' : 'No'}}
    div {{ message.split('').reverse().join('') }}
    div(v-bind:id="'list-' + idNumber")
    //- 上記は、id属性です
    button(@click="number=''") change number
    button(@click="idNumber=3") change id
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      number: 1,
      message: 'Hello Vue.js',
      idNumber: 2

    }
  },
}

</script>

• テンプレート内で、JSの式が書けますよとのこと。　しかし書けないものもあるみたいです。

ディレクティブ

• ここでは、省略形で書かないようにします。

引数

• App.vue

<template lang="pug">
  #App
    a(v-bind:href="url") googole or yahoo!
    button(v-on:click="url='https://www.yahoo.co.jp/'") change Yahoo!
    //- クリックしてしまったら、ブラウザーの左矢印で戻ってください。
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      url : 'https://google.com',
    }
  },
}

</script>

• コロンの後に引数を取る、？　こうゆうことですかね。　適当に解釈しました。　ちがったらごめんなさい。

修飾子

• App.vue

<template lang="pug">
  #App
    div {{ msg }}
    div: a(v-on:click="msg='change message'" :href="url") google and change message
    div: a(v-on:click.prevent="msg='change message'" :href="url") change msg only

    //- クリックしてしまったら、ブラウザーの左矢印で戻ってください。
</template>

<script>

export default {
  name: 'app',
  data () {
    return {
      url : 'https://google.com',
      msg : 'first message'
    }
  },
}

</script>

• 修飾子preventは、画面遷移の抑制例ですね。 意図があって、aタグの基本動作を止めたい場合にも使えます。

• 省略記法はすでに、使っているのでいいですね。

• テンプレート編は、これで終了です。 git commitして終わります。