双向数据绑定

提交表单引入一个很实用的指令 v-model

  <div id="app">
    <h1>{{msg}}</h1>
    <form action="" @submit.prevent="post">
      <input type="text" v-model="msg">
      <button>提交表单</button>
    </form>
  </div>
  <script src="https://unpkg.com/vue@next"></script>
  <script>
    Vue.createApp({
      data(){
        return {
          msg: "hello world"
        }
      },
      methods: {
        post(){
          console.log(this.msg)
        }
      },
    }).mount("#app")
  </script>

@submit后面的 .prevent 是事件修饰符
.prevent 阻止事件提交时刷新页面
.number 数据类型是Number
.lazy 失去焦点时再发生改变
.trim 去除首尾的空格

Vue3（4）表单提交，input的双向数据绑定