vue学习笔记 表单与v-model

幕布上的思维导图

文字稿

• CRM学习法\

  • vue官方文档：表单输入与绑定\

  • 学习内容\

    • 基本用法\

      • input | textarea | checkbox | radio | select | form\

    • 修饰符\

      • .lazy | .number | .trim\

  • v-model干什么用的\

    • 实现vue的双向绑定\
    • v-model实际就是v-bind:value和v-on:input的语法糖\

• 示例学习：基本用法\

  • 什么叫双向绑定\

    • 我更改内存，页面发生变化\
    • 我更改页面内容，内存发生变化\

    • 代码\

      • \
      • \
  • 大部分看官方文档写一次就好了\

  • 重点学一下form\

    • form与submit\

      • 点按钮后页面会刷新\

        • \

      • 点按钮后阻止页面自动刷新\

        • \

• 示例学习：修饰符\

  • .lazy\

    • v-model是监听input事件，就是任何鼠标键盘事件\
    • 加上.lazy修饰符，v-model就会监听change事件，也就是失去焦点时\

    • 示例\

      • \

• v-model\

  • 原理\

    • v-model的等价写法\

      • :value = "user.name" + @input='user.name=$event.target.value'\
      • \

    • 手撕input v-model\

      • \
      • \

      • 这一部分代码看不明白，可以看看.sync的博客\

        • Vue 中的 .sync 修饰符 - 掘金 (juejin.cn)\

• 面试题\

  • Vue的双向绑定如何实现\

    • 说一下v-model的用法\

      • 解释一下v-model的作用\

        • v-mode可以实现我绑定一个变量，这个变量说两句话。第一句话，在变量变化的时候，ui会变化，第二句话，用户改变ui时，数据会变化\

      • 深入解释v-mode，实现原理\

        • v-model实际就是v-bind:value和v-on:input的语法糖\

        • v-on:input\

          • 原生\

            • v-on:click='$event.target.value'\

          • 自定义组件\

            • v-on:click='$event'\

• 如何使用 ant-design-vue\

  • CRM学习法\

    • Copy啥\

      • 查看一个内容是否过时，去看维护，看github上的维护时间\

      • 找到页面\

        • 搜索到官网，然后去到github\

          • \
          • 然后进入docs的页面\
          • 快速上手 - Ant Design Vue (antdv.com)\