1 Minute Tips

タグ: Vue.js

  • 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 が読み込まれたことを確認。