vue生命周期和组件

vue生命周期和组件

1.事件

1）函数内部阻止事件冒泡 e.cancelBubble=true;2）标签内阻止事件冒泡 @click.stop=“show1()”3）键盘事件 keydown 函数中获取键盘编码keyCode4）在标签内直接绑定按键事件 @keyup.13=“show()” @keyup.enter=“show()”

    
        
        
        
    
    
        

        

            父元素
            
            
            子元素
        
        
    
    

一、生命周期

1.钩子函数：指一方面有变动，另一方面立马来处理这些变动的函数称为钩子函数。

每个钩子函数的this指向，必须指向VUE实例化对象

    
        
        
        
    
    
        

            
{{info}}
            更新
            销毁
        
    
    

2.生命周期是什么：

vue实例化对象或组件对象从开始创建到完全销毁的一个过程被称为一个生命周期。

3.为什么要用它以及神魔时候去用它？

因为实例化在创建以及组件在进行构建的过程中要发生一系列的改变，不管是组件数据的变更还是组件移除，都要发生变更，这些变更只能借助生命周期提供的函数进行操作，一旦组件或实例化对象发生变更的时候，需要做一些数据的处理的情况下，需要管理组件成长阶段里的变更，这时候必须要用生命周期进行管理，因为生命周期里提供了钩子函数，方便对于组件以及实例化对象的变更来做处理，所以我们要用到生命周期。

4.如何来用它？

生命周期大体分为四个阶段：四个阶段分别是什么，每个阶段提供的函数是什么，除了这四个阶段意外，因为官方提供的是11个，另外三个钩子函数是干神魔的

二、组件（重中之重）

1.组件是带有结构、样式以及行为的几何体

2.两种写法：

1）全局写法：

// 注册组件，传入一个扩展过的构造器Vue.component('my-component', Vue.extend({ /* ... / }))

// 注册组件，传入一个选项对象（自动调用 Vue.extend）Vue.component('my-component', { / ... */ })

// 获取注册的组件（始终返回构造器）var MyComponent = Vue.component('my-component')

2）私有写法：

vue实例化 中 components { ‘组件名’: 组件内容 }

    
        
        
        
    
    
        

            
组件
            
            
            
        
    
    

三、模板

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上， Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

四、用组件封装一个点击登录的功能

    
        
        
        
    
    
    
        

            toast提示框