资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

怎么深入了解vue2中的v-model以及让组件支持该语法

怎么深入了解vue2中的 v-model以及让组件支持该语法,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

十载的日照网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。营销型网站的优势是能够根据用户设备显示端的尺寸不同,自动调整日照建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。创新互联建站从事“日照网站设计”,“日照网站推广”以来,每个客户项目都认真落实执行。

一、v-model 的本质是语法糖。

v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。』 -- 官方文档。【相关推荐:vue.js教程】

什么是语法糖?

语法糖,简单来说就是『便捷写法』。

在大部分情况下, v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"




没错,在大部分情况下如此。

但也有例外:

  • vue2 给组件提供了 model 属性,可以让用户自定义传值的prop名更新值的事件名。这个暂且略过,第四节会细说。

  • 对于原生 html 原生元素,vue 干了大量『脏活儿』,目的是为了能让我们忽视 html 在api上的差异性。以下元素的左右两种写法是等价的:

  • textarea 元素:

怎么深入了解vue2中的 v-model以及让组件支持该语法

  • select 下拉框:

怎么深入了解vue2中的 v-model以及让组件支持该语法

  • input type='radio' 单选框:

怎么深入了解vue2中的 v-model以及让组件支持该语法

  • input type='checkbox' 多选框:

怎么深入了解vue2中的 v-model以及让组件支持该语法

在编程思想上,这种帮助使用者『隐藏细节』的方式叫封装

二、v-model 仅仅是语法糖吗?(冷知识)

v-model 不仅仅是语法糖,它还有副作用。

副作用如下:如果 v-model 绑定的是响应式对象上某个不存在的属性,那么 vue 会悄悄地增加这个属性,并让它响应式。

举个例子,看下面的代码:

// template中:

// script中:
export default {
  data() {
    return {
      user: {
        name: '公众号: 前端要摸鱼',
      }
    }
  }
}

响应式数据中没有定义 user.tel 属性,但是 template 里却用 v-model 绑定了 user.tel,猜一猜当你输入时会发生什么?

看效果:

怎么深入了解vue2中的 v-model以及让组件支持该语法

揭晓答案吧:user 上会新增 tel 属性,并且 tel 这个属性还是响应式的。

这就是『副作用』带来的效果,你学会了吗?

三、 v-model 是双向绑定还是单向数据流?

2.1 v-model 是双向绑定吗?

是,官方说是。

『你可以用 v-model 指令在表单