vue.js のデータバインディングの仕組みを紹介。
HTML
1 2 3 4 5 6 7 8 9 10 | <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
1 2 3 4 5 6 7 8 9 | console.log(Vue.version)const app = Vue.createApp({ data: () => ({ message: "hello" }) })app.mount('#app') |
テキストボックスを変更すると、js の message が変更され、html に反映される
