当前位置: 首页 > news >正文

vue2基础系列教程之v-model及面试高频问题

v-model是表单组件里面的核心知识点,这个指令给我们写表单业务带来了很大的方便。
请添加图片描述

  • 元素标签上的 v-model 指令用于双向绑定数据,它是一个语法糖,可以用于代替 v-bind:value@input

    • 例如:<input v-model="message" placeholder="edit me">
    • 相当于:<input :value="message" @input="message = $event.target.value">
  • 组件上的 v-model 指令默认会使用 value 属性与组件数据双向绑定,可以通过 model 选项来更改

一般使用

const inputTemplate = `<input :placeholder="message" v-bind:value="value" @input="updateValue" />`;
Vue.component("custom-input", {template: inputTemplate,props: ["value", "message"],methods: {updateValue(e) {this.$emit("input", e.target.value);},},
});var app = new Vue({el: "#app",data() {return {message: "",username: "",};},methods: {onFocus() {this.message = "输入框被点击了";},onBlur() {this.message = "";},},
});
<div id="app"><h3>{{username}}</h3><custom-input v-model="username" :placeholder="message" />
</div>

自定义组件绑定原生事件

## 自定义组件绑定原生事件

根据 vue 的设计理念,自定义组件上的属性和事件,会默认绑定到组件的根元素上,如果想要绑定到组件的原生事件上,需要使用 .native 修饰符。
也就是我们在组件内部不使用 props 进行显示的接受,这些属性和事件会默认的绑定到组件的根元素上。 @focus.native="onFocus" @blur.native="onBlur" class="custom-input" 这三个属性我在组件内部没有使用 props 进行接受,但是却可以正常的使用。

<div id="app"><h3>{{username}}</h3><custom-inputclass="custom-input"v-model="username":placeholder="message"@focus.native="onFocus"@blur.native="onBlur"/>
</div>
const inputTemplate = `<input :placeholder="message" v-bind:value="value" @input="updateValue" />`;
Vue.component("custom-input", {template: inputTemplate,props: ["value", "message"],methods: {updateValue(e) {this.$emit("input", e.target.value);},},
});var app = new Vue({el: "#app",data() {return {message: "请输入要显示的文字",username: "",};},methods: {onFocus() {this.message = "输入框被点击了";},onBlur() {this.message = "";},},
});

请添加图片描述

关于inheritAttrs

在 vue2.4 版本中,新增了 inheritAttrs 选项,默认情况下,组件上没有在 props 中声明的属性会被添加到组件的根元素上。
有时候,我们不希望这些属性添加到组件的根元素上,可以通过设置 inheritAttrs: false 来关闭这个功能。
同时,改造下inputTemplate

请添加图片描述
这时候,我们发现focusblur事件失效了,没有报错,就是没有触发。
这种情况,就需要我们手动来处理了,原因就是上面的原理

const inputTemplate = `<label>{{label}}<input  :placeholder="placeholder" :value="value" @input="updateValue" v-on="customListeners"/></label>`;
Vue.component("custom-input", {inheritAttrs: false,template: inputTemplate,props: ["value", "placeholder", "label"],methods: {updateValue(e) {this.$emit("input", e.target.value);},},computed: {customListeners() {var vm = this;console.log("🚀 ~ customListeners ~ this.$listeners:", this.$listeners);return Object.assign({}, this.$listeners, {input: (e) => {vm.$emit("input", e.target.value);},});},},
});var app = new Vue({el: "#app",data() {return {message: "请输入要显示的文字",username: "",label: "账号:",};},methods: {onFocus() {this.message = "输入框被点击了";},onBlur() {this.message = "";},},
});
<div id="app"><h3> {{username}}</h3><custom-input class="custom-input" v-model="username" :placeholder="message" @focus="onFocus" @blur="onBlur" :label="label"/>
</div>

注意这里@focus="onFocus" @blur="onBlur",要去掉.native,不然也不生效
请添加图片描述

http://www.lryc.cn/news/442951.html

相关文章:

  • 【高分系列卫星简介——高分一号(GF-1)】
  • Python基于TensorFlow实现时间序列循环神经网络回归模型(LSTM时间序列回归算法)项目实战
  • springboot实战学习(6)(用户模块的登录认证)(初识令牌)(JWT)
  • 二叉树的顺序存储和基本操作实现
  • python学习-10【模块】
  • modbus调试助手/mqtt调试工具/超轻巧物联网组件/多线程实时采集/各种协议支持
  • 数值计算 --- 平方根倒数快速算法(0x5f3759df,这是什么鬼!!!)
  • 迭代器和生成器的学习笔记
  • ES5 在 Web 上的现状
  • 人话学Python-循环语句
  • 初识模版!!
  • 算法之数学--hash算法 2021-03-11(未完待续)
  • DHCP工作原理
  • 服务发现和代理实例的自动更新
  • Redis的三种持久化方法详解
  • OpenAI GPT o1技术报告阅读(5)-安全性对齐以及思维链等的综合评估与思考
  • nodejs 012:Babel(巴别塔)语言转换与代码兼容
  • 时间安全精细化管理平台存在未授权访问漏洞
  • 软件卸载工具(windows系统)-geek
  • 第三篇 第14篇 工程计价依据
  • java 异常-Exception
  • 爬虫逆向学习(六):补环境过某数四代
  • IO流体系(FiletOutputStream)
  • 网络设备登录——《路由与交换技术》实验报告
  • CSS——网格布局(display: grid)之下篇
  • 低势期操作
  • IMS 呼叫流程(详细)
  • 系统架构设计师:系统架构设计
  • win11不显示已经打开的窗口
  • 数学建模常用模型全面总结(含适用条件、优点、局限性和应用场景)