Vue的过滤器、生命周期钩子函数、组件开发、路由、Promise基本使用语法

//这里面的形参可多个

==========================================================================

生命周期执行期间的钩子函数:


实例刚被初始化

1、beforeCreate(){} 表示实例完全被创建出来之前,会执行它

在beforeCreat生命周期执行的时候,data和methods中的数据都还没有初始化

2、created(){} ,在这个函数中,data和methods都已经被初始化好了

如果调用methods中的方法或者操作data中的数据,最早只能在created中操作

实例将要被挂载和已经被挂载

3、beforeMount(){} 表示模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中

在beforeMount执行的时候,页面中的元素,还没有真正的替换过来,只是之前写的一些模板字符串

4、mounted (){} 表示模板中的已经真实的挂载到了页面中去,用户可以看到渲染好的页面了

mounted是实例实例创建期间的最后一个生命周期函数,当执行完mounted就表示实例已经被完全创建好了,此时,如果没有其他操作的话,这个实例就在内存中,没有变化

如果要通过某些插件操作页面上的DOM节点,最早要在mounted中进行,只要执行完了mounted,就表示整个Vue实例已经初始化完毕了,此时,组件已经脱离了创建阶段,进入了运行阶段

运行期间

5、beforeUpdate(){} 当触发这个函数时,表示我们的界面已经被更新了

当执行beforeUpdate的时候,页面中显示的数据还是原来的,但是在data中的数据时最新的,页面和data中的数据没有保持同步

6、updated(){} 这个事件执行的时候,页面和打他数据已经保持同步了,都是最新的

运行结束

7、beforeDestroy(){} 当执行beforeDestroy钩子函数的时候,Vue实例就已经从运行阶段,进入了销毁阶段,但是还没有真正的销毁

8、当执行到destroyed 函数的时候,组件已经被完全销毁了,此时组件中所有的数据,方法指令等等都已经不可用了

keep-alive组件中的两个生命周期钩子

当组件在 内被切换,它的 activateddeactivated 这两个生命周期钩子函数将会被对应执行。

总结起来Vue的生命周期钩子总共有十个[常见的时文档中标明的8个,另外两个只有在keep-alive中才能使用]:

文档中的:

**beforeCreate、creacted、

beforeMount、mounted、

beforeUpdate、updated、

beforeDestroy、destroyed**

keep-alive切换时的:

activated、deactivated


组件化开发:

在组件开发模板中,可以直接在html文档中使用template标签来创建一个模板,方便写html类型的模板,但是需要定义相关的id或者class

在Vue.component中使用template:’#id 或者 .class名‘


定义公有组件:

使用Vue.extend({ })创建全局的Vue组件模板对象

使用Vue.component(‘组件的名称’ ,创建出来的组件模板对象)来引用组件

定义私有组件:

components:{ ’组件名称‘:{组件模板对象 } }

组件可以有自己的data数据,但是组件中的data和实例中的data有点不一样,即:实例中的data可以作为一个对象,但是组件中的data必须是一个方法,且该方法必须有返回值,返回值为一个对象。

组件中的data数据和实例中的data使用方式完全一样


组件之间传递参数:

父组件向子组件:props[ ]

子组件向父组件:$emit (可选参数 )

===============================================

路由


使用Vue-router 定义路由

在vue的容器中使用router-view标签来当作占位符,将路由规则,匹配到的组件,展示到这个占位符中去

使用router-link to=’路由位置‘来定义要去的路由位置 在里面可以使用tag属性来定义对应的标签,默认为a标签

// 创建路由实例对象

var router = new VueRouter({

routes: [

{ path: ‘路由名1’, redirect: ‘重定向的路由名2’ },//重定向路由

常用的JavaScript设计模式

  • 单体模式

  • 工厂模式

  • 例模式

函数

  • 23
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值