vue .prop修饰符

在看vue的compile的代码的时候，在匹配绑定值的时候，除了匹配v- @ :,也匹配了.开头的绑定的方式。由于目前没有用到过这样的绑定方式，所以特地翻看了一下vue的github的feature-requirest，果然有人提相应的fature，目前官网应该还没有更新相应的文档。

附feature链接：github.com/vuejs/vue/i…

.prop的修饰符用来指定绑定的值不应该被props解析，而应该作为dom的属性绑定在元素上。

下面的代码，是直接粘贴尤大大的单元测试的代码。我觉得没有比单元测试代码更能说明这个东西的用法了。

 it('.prop modifier', () => {const vm = new Vue({template: '<div><span v-bind:text-content.prop="foo"></span><span :inner-html.prop="bar"></span></div>',data: {foo: 'hello',bar: '<span>qux</span>'}}).$mount()expect(vm.$el.children[0].textContent).toBe('hello')expect(vm.$el.children[1].innerHTML).toBe('<span>qux</span>')})
复制代码

另外对于这个修饰符，vue应该也提供了一个缩写的形式。即.text-content="foo"。

单元测试代码如下：

  it('.prop modifier shorthand', () => {const vm = new Vue({template: '<div><span .text-content="foo"></span><span .inner-html="bar"></span></div>',data: {foo: 'hello',bar: '<span>qux</span>'}}).$mount()expect(vm.$el.children[0].textContent).toBe('hello')expect(vm.$el.children[1].innerHTML).toBe('<span>qux</span>')
})
复制代码

源码中也提供了相应的注释，希望阅读到这段代码的小伙伴能够少些疑惑，因为官网上还没有相应的描述：

 // support .foo shorthand syntax for the .prop modifierif (propBindRE.test(name)) {(modifiers || (modifiers = {})).prop = truename = `.` + name.slice(1).replace(modifierRE, '')} else if (modifiers) {name = name.replace(modifierRE, '')}```
复制代码

vue .prop修饰符相关推荐

（12）vue.js 修饰符
一.vue.js修饰符介绍修饰符是以点开头的指令后缀,用于给当前指令设置特殊操作. 二.事件修饰符 .prevent 修饰符用于阻止默认事件行为,相当于 event.preventDefault( ...
vue事件修饰符有哪些
vue 事件修饰符 1.prevent:阻止默认事件 2.stop:阻止事件冒泡 3.once:事件只触发一次 4.capture:使用事件的捕捉模式 5.self:只有event.target是当前 ...
Vue 事件修饰符详解
本人后端程序员,由于绑页面需要使用vue,在自学的过程中不懂事件修饰符,特此请教后才理解,在这提出我的分享,忘各位大神指正. vue官网上指出: 在事件处理程序中调用 event.preventDef ...
vue学习：事件传递（冒泡和捕获），事件委托，jquery中的事件委托，$event 获取元素，vue事件修饰符
事件传递 ----冒泡和捕获 DOM事件标准定义了两种事件流,这两种事件流分别是捕获和冒泡. 和许多Web技术一样,在它们成为标准之前,Netscape和微软各自不同地实现了它们.Netscape选 ...
[Vue] : 键盘修饰符
键盘修饰符以及自定义键盘修饰符为文本框回车键绑定事件 <input type="text" class="form-control" v-model=& ...
vue事件修饰符：通过@click.capture捕获内层事件（爷爷-父亲-儿子）
vue事件符的.capture用法,含义是捕获. 先看一个4层结构的div盒子:div(最外层) > div(爷爷) > div(父亲) > div(儿子) <template ...
Vue 事件修饰符.self的用法
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/a250758092/article/details/78354319 <!-- 阻止单击事件冒 ...
Vue按键修饰符：@keyup.enter
事件keyup是按键抬起事件,就是当按键抬起触发: keyup后面加上按键修饰符可以指定抬起某个按键再触发事件: 每一个按键都有一个keyCode,比如"Enter"回车键的key ...
Vue事件修饰符的总结
分为六点: 1.prevent 阻止默认行为(常用) 2.stop 阻止事件冒泡(常用) 3.once 事件值触发一次(常用) ...

vue .prop修饰符

.prop的修饰符用来指定绑定的值不应该被props解析，而应该作为dom的属性绑定在元素上。

另外对于这个修饰符，vue应该也提供了一个缩写的形式。即.text-content="foo"。

vue .prop修饰符相关推荐

最新文章

热门文章