Vue知识点整理（一）- Vue核心（5）- 收集表单数据、内置指令

JHY97

已于 2022-05-04 23:43:05 修改

阅读量648

点赞数

分类专栏： Vue笔记文章标签：前端 vue

于 2022-04-12 23:13:48 首次发布

本文链接：https://blog.csdn.net/JHY97/article/details/124125604

版权

Vue笔记专栏收录该内容

34 篇文章 7 订阅

订阅专栏

一、收集表单数据

1.1 收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值

若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值

若：<input type="checkbox"/>

没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，即收集到布尔值）
配置input的value属性
1. v-model的初始值是非数组，那么收集到的就是checked（勾选 or 未勾选，即收集到布尔值）
2. v-model的初始值是数组，那么收集到的就是value组成的数组

备注：v-model的三个修饰符;

lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤

1.2 简单案例练习

    <div class="root">
      <form @submit.prevent="demo">
        账号：<input type="text" v-model.trim="userInfo.username" /><br /><br />
        密码：<input type="password" v-model="userInfo.password" /><br /><br />
        年龄：<input type="number" v-model.number="userInfo.age" /><br /><br />
        性别： 男<input type="radio" v-model="userInfo.sex" value="male" />
        女<input
          type="radio"
          v-model="userInfo.sex"
          value="female"
        /><br /><br />
        爱好： 吃<input type="checkbox" v-model="userInfo.hobby" value="eat" />
        睡<input type="checkbox" v-model="userInfo.hobby" value="sleep" />
        玩<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="play"
        /><br /><br />
        所属地区：
        <select v-model="userInfo.city">
          <option value="">请选择所在地区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="fujian">福建</option></select
        ><br /><br />
        其他信息：<textarea v-model.lazy="userInfo.other"></textarea
        ><br /><br />
        <input type="checkbox" v-model="userInfo.agree" />阅读并接受<a
          href="javascript:;"
          >《用户协议》</a
        ><button>提交</button>
      </form>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;

    new Vue({
      el: ".root",
      data: {
        userInfo: {
          username: "",
          password: "",
          age: "",
          sex: "",
          hobby: [],
          city: "",
          other: "",
          agree: "",
        },
      },
      methods: {
        demo() {
          console.log(JSON.stringify(this.userInfo));
        },
      },
    });
  </script>

二、内置指令

2.1 v-text指令

作用：向其所在的节点中渲染文本内容
与插值语法的区别：v-test会替换掉节点中的内容，{{xxx}}则不会

  <body>
    <div class="root">
      <div>hello, {{name}}</div>
      <div v-text="name">hello,</div>
    </div>
  </body>
  <script>
    Vue.config.productionTip = false;
    new Vue({
      el: ".root",
      data: {
        name: "world",
      },
    });
  </script>

2.2 v-html指令

（1）作用：向指定节点中渲染包含html解构的内容

（2）与插值语法的区别：

v-html会替换掉节点中的所有内容，{{xxx}}则不会
v-html可以识别html结构

（3）注意：v-html有安全性问题

在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击（跨站脚本攻击）
一定要在可信的内容上使用v-html，永远不要用在户提交的内容上

2.3 v-cloak指令

本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

    <style>
      [v-cloak] {
        display: none;
      }
    </style>

2.4 v-once指令

v-once所在的节点在初次渲染后，就视为静态内容了
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能

2.5 v-pre指令

跳过其所在节点的编译过程
可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

2.6 自定义指令

2.6.1 定义语法

（1）局部指令

    new Vue({
        directives:{指令名:配置对象}
    })

或者

    new Vue({
      directives{指令名:回调函数},
    });

    new Vue({
    // 精简写法
      directives:{
          指令名(element,bingding){}
      }

    // 正常写法
    // directive:{
    //     指令名:function(){}
    // }

    });

（2）全局指令

    Vue.directive(指令名,配置对象);

或者

    Vue.directive(指令名,回调函数);

2.6.2 配置对象中常用的3个回调

bind: 指令与元素成功绑定时调用
inserted: 指令所在的元素被插入页面时调用
update: 指令所在模板结构被重新解析时调用

注意：

指令定义时不加v-，但使用时要加v-
指令名如果是多个单词，要使用kebab-case命名方式，不要camelCase命名

局部指令 -- 配置对象

    new Vue({
      directives: {
    // 使用kebab-case命名方式
        '指-令名': {
          bind(element, binding) {},
          inserted(element, binding) {},
          update(element, binding) {},
        },
      },
    });

全局指令 -- 配置对象

    Vue.directive("指令名", {
      bind(element, binding) {},
      inserted(element, binding) {},
      update(element, binding) {},
    });

局部指令 -- 回调函数

    new Vue({
      directives:{
          指令名(element,bingding){}
      }

全局指令 -- 回调函数

    Vue.directive("指令名", function (element, binding) {});

JHY97

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Vue知识点整理（一）- Vue核心（5）- 收集表单数据、内置指令

目录一、收集表单数据1.1 收集表单数据1.2 简单案例练习二、内置指令2.1 v-text指令2.2 v-html指令2.3 v-cloak指令2.4 v-once指令2.5 v-pre指令2.6 自定义指令2.6.1 定义语法2.6.2 配置对象中常用的3个回调一、收集表单数据1.1 收集表单数据若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值若：<inpu
复制链接

扫一扫