Vue 事件补充 生命周期 组件化 传值

一、事件补充

1）函数内部阻止事件冒泡 e.cancelBubble=true;

2）标签内阻止事件冒泡  @click.stop=“show1()”

3）键盘事件  keydown    函数中获取键盘编码keyCode

4）在标签内直接绑定按键事件  @keyup.13=“show()”          @keyup.enter=“show()”

二、生命周期

vue总共分有十一个生命周期 我们常用的有8个 分别是

1）beforeCreate 类型Function

在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。

2）created

实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3）beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。该钩子在服务器端渲染期间不被调用。

4）mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。该钩子在服务器端渲染期间不被调用。

5）beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。该钩子在服务器端渲染期间不被调用。

6）updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

7）beforeDestroy

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

8）destroyed  this.$destroy()

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

三、组件

/ 注册组件，传入一个扩展过的构造器

Vue.component('my-component', Vue.extend({ /* ... */ }))

// 注册组件，传入一个选项对象（自动调用 Vue.extend）

Vue.component('my-component', { /* ... */ })

// 获取注册的组件（始终返回构造器）

var MyComponent = Vue.component('my-component')

2、vue实例化  中 components  

  模板定义有两种形式

定义模板的形式

全局组件（  ‘组件名’: 组件内容  ） 定义在实例外

全局组件

嵌套组件 

全局嵌套和局部嵌套

*：嵌套组件可以在全局组件使用也可以在实例化里面嵌套 嵌套后 data属性变为函数 他的属性值都是返回值 其他不变

四、传值

1）父传子

父传子

2）子传父

子值传父值

3）非父子组件 之间 

传值—空vue对象 $emit(‘ ’,数据) 发送 $on 接收

传

收

父子操作、父组件操作子组件---$refs          $parent 子组件操作父组件数据

使用$refs获取dom      $parent 可以直接使用不用像$refs一样设置属性 

$resf 父操作子

 在mounted函数中/nextTick里面的代码会在DOM更新后执行*/---mounted函数中执行

$ nextTick  this.$nextTick(function(){    })

Slot标签添加 属性

内容可通过 slot属性值查找是否显示默认