learnVUE-note

---

title: learnVUE-note
date: 2018-02-27 15:57:37
tags:
categories: 前端技术

本文是自己在学习Vue中的

VUE事件处理

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管在方法里也可以实现，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

1. .stop阻止单机事件继续传播
2. .prevent提交事件不再重载页面
3. .capture添加事件监听器时使用事件捕获模式，即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
4. .self只当在 event.target 是当前元素自身时触发处理函数
5. .once事件只触发一次

以上的v-on修饰符可以对DOM进行操作，而不需要在方法中对DOM进行操作。
另外使用修饰符时，顺序很重要；相应的代码会产生不同的事件顺序.

为什么在 HTML 中监听事件?

这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

• 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
• 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
• 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。

Vue离开进入过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

在进入/离开的过渡中，会有 6 个 class 切换。

1. v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
2. v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除)，在 transition/animation 完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
5. v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除)，在 transition/animation 完成之后移除。
   

图片来自VUE官方文档 # vue组件 #

1. 组件中的数据data只能通过function来返回，不可以定义对象。
   例如data: { name : jams}
   /-未完成-/

组件的通信

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

图片来自官方文档 组件中间的通讯可以用vuex来实现，流程如下 1. 添加vuex模块 `import Vuex from 'vuex` 2. 加载到vue实例`vue.use(vuex)` 3. 新建Vuex.Store对象，添加到vue对象中. 实际上再单页面应用上vue就可以做到响应式的数据，vuex的出现完全是为了组件与组件之间更好的通讯，具体的通讯包括state，getter，mutation，action等，参考官方文档[https://vuex.vuejs.org/zh-cn/](https://vuex.vuejs.org/zh-cn/ "vuexDoc")

---

参考：https://cn.vuejs.org/v2/guide/