文章目录
- 前言
前言
此篇博客为之前使用vue-elementui-webpack-vuecli进行的项目相关知识的总结,即个人的项目实战学习笔记,经查阅相关资料以及自我总结得出此篇文章。(如有错误之处,请大佬指出,共同学习研究)
项目源码地址:点击链接
1. Vue的生命周期
图片来自:Vue.js生命周期
名词解释
beforeCreate(创建前)
在数据观测和初始化事件还未开始
created(创建后)
完成数据观测,属性和方法的运算,初始化事件,$el属性还没有显示出来
beforeMount(载入前)
在挂载开始之前被调用,相关的render函数首次被调用。实例已完成以下的配置:编译模板,把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。
mounted(载入后)
在el 被新创建的
vm.$el
替换,并挂载到实例上去之后调用。实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
beforeUpdate(更新前)
在数据更新之前调用,发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态,不会触发附加的重渲染过程。
updated(更新后)
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时,组件DOM已经更新,所以可以执行依赖于DOM的操作。然而在大多数情况下,应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
beforeDestroy(销毁前)
在实例销毁之前调用。实例仍然完全可用。
destroyed(销毁后)
在实例销毁之后调用。调用后,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
Q & A
1.什么是vue生命周期?
答: Vue 实例从创建到销毁的过程,就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程,称之为 Vue 的生命周期。
2.vue生命周期的作用是什么?
答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
3.vue生命周期总共有几个阶段?
答:它可以总共分为8个阶段:创建前/后, 载入前/后,更新前/后,销毁前/销毁后。
4.第一次页面加载会触发哪几个钩子?
答:会触发 下面这几个beforeCreate, created, beforeMount, mounted 。
5.DOM渲染在哪个周期中就已经完成?
答:DOM 渲染在 mounted 中就已经完成了。
2. Vue的优点
低耦合
视图(
View
)可以独立于Model
变化和修改,一个ViewModel
可以绑定到不同的"View
"上,当View
变化的时候Model
可以不变,当Model变化的时候View
也可以不变。
可重用性
你可以把一些视图逻辑放在一个
ViewModel
里面,让很多view
重用这段视图逻辑。
独立开发
开发人员可以专注于业务逻辑和数据的开发(
ViewModel
),设计人员可以专注于页面设计。
可测试
界面素来是比较难于测试的,而现在测试可以针对
ViewModel
来写。
3. Vue组件间的参数传递
1.父组件与子组件传值
父组件传给子组件:子组件通过props
方法接受数据;
子组件传给父组件:$emit
方法传递参数
2.非父子组件间的数据传递,兄弟组件传值
eventBus
,就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。项目比较小时,用这个比较合适。
4. 路由之间跳转
声明式(标签跳转) 编程式( js跳转)
5. Vue如何自定义一个过滤器
html部分代码
<el-table-column label="创建时间" prop="add_time" width="140px">
<template slot-scope="scope">
{
{scope.row.add_time | dateFormat}}
</template>
</el-table-column>
在此次项目中,html页面中使用element-ui组件和template进行操作,使用|
进行调用过滤器。其中add_time为后台进行传递。
data() {
return {
// 查询参数对象
queryInfo: {
query: '',
pagenum: 1,
pagesize: 10
},
// 商品列表 从后台获得
goodslist: [],
total: 0
}
}
在全局进行过滤器的定义
Vue.filter('dateFormat', function (originVal) {
const dt = new Date(originVal) //获取数据
const y = dt.getFullYear()
const m = (dt.getMonth() + 1 + '').padStart(2, '0') //不足两位,进行补0
const d = (dt.getDate() + '').padStart(2, '0')
const hh = (dt.getHours() + '').padStart(2, '0')
const mm = (dt.getMinutes() + '').padStart(2, '0')
const ss = (dt.getSeconds() + '').padStart(2, '0')
return `${
y}-${
m}-