vue——修饰符

1、input便签中 v-model 的修饰符 

    .lazy修饰符可以使v-model在输入完成之后再触发数据更新

    .number修饰符可以确保 v-model绑定的数据是数字

2、.sync修饰符其实是添加了update事件,如:prop.sync="value"其实就是,当子组件中提交了$emit("update:prop",v)后,父组件就可以直接刷新prop绑定的值value了,注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用(例如:v-bind:title.sync="data.title+'标题'"是无效的,使用了.sync修饰符之后,不能包含表达式,只能是变量)

3、自定义的组件是没有默认事件的(点击事件都没有),如果需要给自定义组件添加原生事件,可以添加上.native修饰符,如添加点击事件@click.native="btnClick",在一个组件的根元素上直接监听一个原生事件

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
注意:不要把 .passive 和 .prevent 一起使用,因为 .prevent 将会被忽略,同时浏览器可能会向你展示
一个警告。请记住,.passive 会告诉浏览器你不想阻止事件的默认行为。

<input v-on:keyup.13="submit">

 

### Vue.js 中 `sync` 修饰符的用法和实现 在 Vue.js 中,`.sync` 是一种用于简化父子组件间双向数据绑定的方式。通常情况下,在单向数据流模型下,父组件通过 `props` 向子组件传递数据,而子组件则通过 `$emit` 发送事件通知父组件更新状态。 当使用 `.sync` 修饰符时,可以更简洁地处理这种场景: #### 使用方式 假设有一个名为 `childComponent` 的子组件接收来自父级的一个属性 `message` 并允许修改它,则可以在模板中这样写[^1]: ```html <template> <!-- 父组件 --> <div> <ChildComponent :message.sync="parentMessage"/> </div> <!-- 子组件定义 --> </template> ``` 这相当于做了两件事: 1. 将 `parentMessage` 绑定到子组件的 prop 上; 2. 自动监听由子组件发出的特定格式 (`update:propName`) 的自定义事件来同步更改父组件的数据。 因此上面的例子实际上等价于下面的手动编码版本: ```html <!-- 手动实现 .sync 效果 --> <div> <ChildComponent :message="parentMessage" @update:message="val => parentMessage = val" /> </div> ``` #### 实现原理 为了支持 `.sync` 语法糖,Vue 编译器会自动转换上述代码片段中的指令为相应的 v-bind 和 v-on 结合的形式。具体来说就是编译阶段将带有 `.sync` 的属性解析成一对输入输出操作——即设置初始值的同时也绑定了一个用来响应变化的方法调用。 对于开发者而言,只需要确保每当希望触发一次 "上抛" 更新的时候就在子组件内部发射相应命名模式 (前缀 update:) 的事件即可完成整个流程的设计。 ```javascript // 子组件内触发更新逻辑 this.$emit(&#39;update:message&#39;, newValue); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值