过滤器(filter)
什么是: 接收原始数据后,执行再加工,才显示
何时: 原始数据不能直接使用时,都要用过滤器
比如:
如何: Vue官方没有提供任何预定义的过滤器,都要自己定义
1
2
3
4Vue.filter("过滤器名",function(value,形参1,形参2,...){
//value接收的是原始值
return 加工后的新值!
})只要绑定数据,都可用过滤器:
<ANY 模型变量|过滤器名|
<ANY 模型变量|过滤器名|......> <ANY 模型变量|过滤器名(值1,值2)|......>
强调:
- 1.后一个过滤器获得的原始值,是前一个过滤器加工后的
- 2.v-text不能使用过滤器
Vue实例/组件的生命周期:
笔试题目: Vue实例/组件的声明周期共几个阶段,每个阶段做什么:
4个阶段:
- 1.创建(create)阶段:创建组件对象,和模型数据对象
- 2.挂载(mount)阶段:扫描真实 DOM 树,创建虚拟 DOM 树,并绑定模型中的数据到视图中
- 3.更新(update)阶段:只要模型数据发生变化,就更新组件的内容和 DOM 树
- 4.销毁(destroy)阶段:主动调用了
$destory()
函数,销毁组件时
声明周期钩子函数:
- 什么是在组件的每个阶段都会自动执行的函数
- 何时: 如果希望在组件的不同阶段执行一项任务时
包括:
beforeCreate()
$el:undefined data:undefined
created()$el: undefined data: { ... }
beforeMount()$el: 空DOM对象 data: { ... }
mounted()$el: 完整DOM树 data: { ... }
beforeUpdate()
updated()
beforeDestroy()
destroyed()
请求数据axios.get()
可放在created或mounted中均可
但是,如果有DOM操作,就必须放在mounted中
组件Component:
- 什么是: 拥有专属的HTML,CSS和数据的,可重用的页面独立区域
- 为什么: 重用!分工协作!松藕合!
- 何时: 只要发现独立的区域,都要封装为组件。
- 如何:
1.创建组件:
//
Vue.component("组件名",{
// 代替了new Vue中的el:
template: "选择器",
// 代替new Vue中的data:{ 模型变量 }
data: function(){
// 每次都要调用函数,为本次组件创建专属的数据模型
return {
// 创建新对象的意思
'模型变量': '值',
'...' : '...'
}
},
// 其余都一样!
})
组件专属的HTML放在 <template>HTML片段</template>
template是专门保存一段隐藏HTML片段的元素
- 何时: 专门用于为组件保存HTML片段
- 规定: template中只能且必须有唯一的一个父元素包裹组件的片段。
- 如何:
1.定义<template>
元素包裹组件的 HTML 片段,还需要添加一个唯一的父元素
2.Vue.component("....",{template:"选择器"})
,通过选择器找到对应的template元素
- 在视图中使用组件:
一个组件其实就是一个可重用的自定义HTML标签
<组件名></组件名>
执行时,会用组件的template代替<组件名></组件名>
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!