property的修饰符

本文详细介绍了Objective-C中@property的各种属性,包括readwrite、readonly、assign、retain、copy等,并解释了nonatomic和atomic的区别及应用场景。
@property 的属性可以有以下几种:

readwrite 是可读可写特性;需要生成 getter 方法和 setter 方法
readonly 是只读特性,只会生成 getter 方法 不会生成 setter 方法,不希望属性在类外改变时使用
assign 是赋值特性,setter 方法将传入参数赋值给实例变量;仅设置变量时;
retain 表示持有特性,setter 方法将传入参数先保留,再赋值,传入参数的 retain count 会+1;
copy 表示拷贝特性,setter 方法将传入对象复制一份;需要完全一份新的变量时。
nonatomic 和 atomic ,决定编译器生成的 setter getter是否是原子操作。 atomic 表示使用原子操作,可以在一定程度上保证线程安全。一般推荐使用 nonatomic ,因为 nonatomic 编译出的代码更快

默认是 assign, readwrite,atomic(基本数据类型)
      strong, readwrite,atomic(对象)
### Vue 修饰符的使用方法和类型 #### v-model 的修饰符 Vue 提供了一些内置的 `v-model` 修饰符来增强数据绑定的功能。以下是常见的修饰符及其作用: - **`.lazy`**: 默认情况下,`v-model` 在每次输入事件 (`input`) 后同步数据到视图模型。而 `.lazy` 则会将其更改为在失去焦点 (`change`) 或手动触发时才同步数据[^1]。 ```html <template> <input type="text" v-model.lazy="inputValue" placeholder="请输入内容"> </template> <script> export default { data() { return { inputValue: '' } } } </script> ``` - **`.trim`**: 自动过滤用户输入字符串两端的空白字符[^1]。 ```html <input type="text" v-model.trim="inputValue"> ``` - **`.number`**: 将用户的输入值自动转换为数值类型(如果可能的话)。这有助于处理表单中的数字输入[^1]。 ```html <input type="text" v-model.number="age"> ``` --- #### 事件修饰符 除了 `v-model` 的修饰符外,Vue 还提供了一系列用于修改事件行为的修饰符: - **`.stop`**: 调用 `event.stopPropagation()` 阻止事件冒泡[^2]。 ```html <div @click.stop="doSomething">不会向父级传播点击事件</div> ``` - **`.prevent`**: 调用 `event.preventDefault()` 防止默认行为。 ```html <form @submit.prevent="onSubmit"></form> ``` - **`.capture`**: 添加事件侦听器时使用捕获模式。 ```html <div @click.capture="doSomething">...</div> ``` - **`.self`**: 只当事件是从该元素本身出发时才触发回调函数。 ```html <div @click.self="doSomething">只有点击此 div 才有效</div> ``` - **`.once`**: 点击事件只会触发一次。 ```html <button @click.once="onClick">只响应第一次点击</button> ``` - **`.passive`**: 告诉浏览器不要等待 JavaScript 处理完成再执行滚动操作,从而提高性能[^2]。 ```html <div @scroll.passive="onScroll">...</div> ``` --- #### 按键修饰符 Vue 支持按键修饰符以便于监听特定键盘事件。例如: - **`.enter`**: 监听回车键按下事件[^2]。 ```html <template> <input type="text" @keyup.enter="handleKeyUp"> </template> <script> export default { methods: { handleKeyUp() { console.log('回车键被按下'); } } } </script> ``` 其他常用按键修饰符还包括: - `.tab`, `.delete`, `.esc`, `.space`, `.up`, `.down`, `.left`, `.right`. 还可以自定义全局快捷键修饰符[^2]。 --- #### `.sync` 修饰符 `.sync` 是一种语法糖,简化父子组件之间的双向绑定逻辑。它通过 `$emit` 方法实现子组件对父组件传入 prop 的更新[^3]。 **父组件代码:** ```html <child-component :foo.sync="parentFoo"></child-component> ``` **子组件代码:** ```javascript props: ['foo'], methods: { changeValue() { this.$emit('update:foo', '新值'); // 更新 foo 的值 } } ``` 上述代码等价于以下写法: ```html <child-component :foo="parentFoo" @update:foo="val => parentFoo = val"></child-component> ``` --- #### `.prop` 修饰符 `.prop` 修饰符的作用是将属性绑定设置为 DOM 属性 (property),而非 HTML 特性 (attribute)[^4]。两者的区别在于: - **Attribute**: 定义在 HTML 标签上的静态特性,仅能表示初始状态。 - **Property**: 动态存在于 DOM 对象上,可以反映当前的真实状态。 示例: ```html <!-- Attribute --> <img v-bind:src="'image.png'"> <!-- Property --> <input v-bind:value.prop="value"> ``` --- ### 总结 Vue 的修饰符分为多种类型,包括但不限于 `v-model` 修饰符、事件修饰符、按键修饰符以及 `.sync` 和 `.prop` 等特殊用途修饰符。每种修饰符都有其独特的功能和适用场景,合理运用这些工具能够显著提升开发效率并优化用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值