一、事件补充
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一样设置属性

在mounted函数中/nextTick里面的代码会在DOM更新后执行*/---mounted函数中执行
$ nextTick this.$nextTick(function(){ })
Slot标签添加 属性
内容可通过 slot属性值查找是否显示默认

网友评论