1 Minute Tips

カテゴリー: Vue.js

  • vue.js の v-for を理解する

    vue.js の loop

    HTML

    <script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <p v-for="color in colors">{{ color }}</p>
</div>

    JS

    const app = Vue.createApp({
  data: () => ({
    colors: ['black', 'white', 'orange']
  })
})
app.mount('#app')

    結果は以下の通り、loop して値を取得できる

  • vue.js の v-if を理解する

    表示非表示を切り替える

    HTML

    <script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
  <p v-if="toggle">hello</p>
</div>

    JS

    const app = Vue.createApp({
  data: () => ({
    toggle: true
  })
})
app.mount('#app')
    v-if に紐づくパラメータが true の時のみ項目を出力する
    v-if に紐づくパラメータが true の時のみ項目を出力する

  • vue.js の v-bind を理解する

    HTML

    <script src="https://unpkg.com/vue@3.1.5"></script>
<div id="app">
   <input type="text" v-bind:value="message">
</div>

    JS

    const app = Vue.createApp({
  data: () => ({
    message: 'hello'
  })
})
app.mount('#app')
    出力結果

  • vue.js でデータバインディングをする

    vue.js のデータバインディングの仕組みを紹介。

    HTML

    <script src="https://unpkg.com/vue@3.1.5"></script>

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

    js

    console.log(Vue.version)

const app = Vue.createApp({
  data: () => ({
    message: "hello"
  })
  
})
app.mount('#app')
    初期値として js に書かれている hello が表示されるが、

    テキストボックスを変更すると、js の message が変更され、html に反映される

  • vue.js で指定の version を読み込む

    最新 version ではなく、指定の version を読み込む際の設定

    https://v3.ja.vuejs.org/guide/installation.html#vue-devtools

    では、

    <script src="https://unpkg.com/vue@next"></script>

    を使うように記載されているが、これだと常に最新になる。

    @next の部分を version に変更することで指定した version を読み込ませる事ができる

    <script src="https://unpkg.com/vue@3.1.5"></script>

    codepen で確認すると、3.1.5 が読み込まれたことを確認。