Vue2--基本知识.（2）

dreamlikeovo

已于 2022-04-10 22:25:45 修改

阅读量121

点赞数

文章标签： vue

于 2022-04-10 22:23:49 首次发布

本文链接：https://blog.csdn.net/insrire/article/details/124087517

版权

本文深入探讨了Vue.js中的数据代理机制，解释了如何通过vm对象便捷地操作data中的属性，并介绍了其内部getter/setter的工作原理。同时，文章详细阐述了Vue的事件处理，包括事件绑定、事件修饰符的使用，以及键盘事件的处理。针对事件修饰符，如prevent、stop、once等，给出了实际代码示例。最后，提到了系统修饰符和自定义按键别名的使用，帮助开发者更精确地控制事件行为。

摘要由CSDN通过智能技术生成

数据代理

Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处:
更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定到 getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

事件处理

使用v-on:xxx 或 @xxx 绑定事件，其中xxx为事件名；
事件的回调需要配置在methods对象中，最终会在vm上；
methods中配置的函数，不要用箭头函数；否则this就不指向vm；
methods中配置的函数，都是被vue所管理的函数，this的指向是vm 或者组件实例对象。
@click=“demo” 和 @click=“(#event)” 效果一致，后者可以传参；

代码示例：

<div id="basic-event">
  <button @click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

Vue.createApp({
  data() {
    return {
      counter: 0
    }
  }
}).mount('#basic-event')

事件修饰符

prevent：阻止默认事件（常用）；
stop：阻止事件冒泡（常用）；
once：事件只触发一次（常用）；
capture：使用事件捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

代码示例：

<!-- 阻止单击事件继续冒泡 -->
<a @click.stop="doThis"></a>

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

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

<!-- 只有修饰符 -->
<form @submit.prevent></form>

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

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

注：

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

键盘事件

常用的按键别名：

.enter 回车
.tab 换行（特殊，必须配合keydown使用）
.delete (捕获“删除”和“退格”键)
.esc 退出
.space 空格
.up 上
.down 下
.left 左
.righ 右

代码示例：

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input @keyup.enter="submit" />

Vue 未提供别名的按键，可以使用按键原始的key值去绑定，但需要转化为kebab-case（短横线命名）

代码示例:

<input @keyup.page-down="onPageDown" />

系统修饰符（用法特殊）：CTRL、alt、shift、meta

需要配合keyup使用：按下修饰符的同时，再按下其他键。随后释放其他键，事件才触发。
配合keydown使用：正常触发事件。

也可以使用keycode去指定具体的按键（少用）。
Vue.config.keyCodeS，自定义键名 = 键码，可以去定制键名别名。
特殊修饰符 .exact

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

代码示例：

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>