美文网首页
Vue 事件补充 生命周期 组件化 传值

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

作者: 旺旺小小酥_d3fc | 来源:发表于2018-08-21 20:40 被阅读0次

一、事件补充

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属性值查找是否显示默认

相关文章

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

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

    一、事件补充 1)函数内部阻止事件冒泡 e.cancelBubble=true; 2)标签内阻止事件冒泡 @...

  • 父子组件通信 非父子组件传值 生命周期

    案例: 非父子组件传值:案例: 生命周期:在Vue的整个生命周期中,它提供了一系列的事件,可以让我们在事件触发时注...

  • 与Vue.js的第八天

    今天学习了Vue组件中的非父子之间的传值和生命周期Vue组件之间的传值分三种1.父传子之间传值用属性:props2...

  • Vue组件间通信

    Vue组件间通信 父子组间通信 通过props向子组件传值,通过事件向父级组件发送消息 通过props向子组件传值...

  • Vue组件间传值

    首先 vue 组件化的一个框架。既然是组件化。那么一定存在组件和组件之间传值的问题 在讨论组件和组件怎么传值的问题...

  • VUE03

    Vue组件 组件的创建 组件的指令以及事件绑定 父子组件创建 父子组件通信 兄弟组件的传值 动态组件

  • 实现非父子之间通信,兄弟组件之间的数据传递--eventBus

    vue中,组件传值的方法常见的也就那几种,1.父组件向子组件传值,用props 属性,2.子组件主要通过事件传递数...

  • 前端VUE3,JQ,uniapp,综合

    vue3 + ts 子组件更新props 子组件可以直接修改父组件传进来的值子组件定义事件名称update:事件名...

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

网友评论

      本文标题:Vue 事件补充 生命周期 组件化 传值

      本文链接:https://www.haomeiwen.com/subject/uezjiftx.html