你真的会用Vue-cli脚手架和Element-ui进行项目创建吗？

最新推荐文章于 2024-12-04 16:45:28 发布

原创

最新推荐文章于 2024-12-04 16:45:28 发布 · 置顶 · 3.5k 阅读

40 ·

CC 4.0 BY-SA版权

本文详细介绍了Vue的生命周期，包括beforeCreate到destroyed的各个阶段及其作用。讨论了Vue的优点，如低耦合、可重用性。深入探讨了Vue组件间的数据传递、路由跳转、自定义过滤器、v-for的key值意义。此外，还讲解了Vue-router的使用，包括如何创建和配置路由，以及路由钩子函数的应用。最后，涉及了ElementUI的表单验证方法及Vue中数据双向绑定的原理。

文章目录

前言

前言

此篇博客为之前使用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}-${
     
     d}

最低0.47元/天解锁文章