来自一枚菜鸟的项目开发——Vue.js的简单认识以及对项目开发的总结和反思

最新推荐文章于 2024-01-05 21:14:42 发布

孤光一点萤❂

最新推荐文章于 2024-01-05 21:14:42 发布

阅读量175

点赞数 1

分类专栏：前端文章标签： vue.js javascript

本文链接：https://blog.csdn.net/weixin_45698813/article/details/117336626

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue

html 部分

展示页面:
<template>
    <div>
        <media-table
         ref="List"
         :tableDate="tableHeader"
         type="selection">
        </media-table>
    </div>
</template>

调用组件:
<template>
<div class="components-table">
    <slot name="top"></slot>
    <el-table ref="multipleTable" 
              :data="tableData" 
              @select="select" 
              @select-all="selectAll" 
              @row-click="rowClick" 
              @row-dblclick="cellDblclick">
        <el-table-column 
        type="selection" 
        v-if="tableHeader.length > 0 && type === 'selection'"
        ></el-table-column>
        <el-table-column 
         type="index" 
         v-if="tableHeader.length > 0 && type === 'index'"></el-table-column>
        <el-table-column 
         v-for="item in tableHeader" 
         :key="item.id" 
         :property="item.property" 
         :label="item.label"></el-table-column>
    </el-table>
</div>
</template>

上述代码展示的是在一个实际开发的所要必备的一个思想，就是对于一个复用性高的组件应该要让它复用性提高，即应该让一些组件功能单一化，就是要让前端代码降低重复的工作量，同时可以让你的前端代码更加的规范
更加的上流。

JavaScript部分

组件中的JavaScript

export default {
  components: {
  
  },
  data() {
    return {
   
    };
  },
  created() {
  
  },
  methods: {
  
  },
};

Javascript部分位于具体的组件部分中的Javascript部分主要的内容就是简单的数据处理和数据渲染，没有什么太强的技术性，但是需要和后端交流，了解后端的业务。

 components: {
  
  },
  主要功能导入外部组件，没了

data() {
    return {
   
    };
  },
  这是一个函数！
  通常在return中声明变量，return中声明的变量为改组件下的全局变量，在JavaScript的代码中调用时以this.xx的形式.
  在这里要注意的一个很重要的问题是要规范变量的命名，要提高JavaScript代码的可读性就要让命名规范化.

 created() {
  
  },
  生命周期钩子函数，实际开发中要做的就是要让异步调用的控制函数或者异步调用的函数在created这个钩子函数中(实现数据观测、挂载实例)调用，就是异步调用在前端实现动态的数据渲染，这里可以在这个created的钩子函数中完成对异步调用函数的执行顺序的逻辑问题。因为在实现异步调用数据时最重要的逻辑问题就是如何实现对异步函数的执行顺序，我们通过在created钩子函数调用一个或多个逻辑处理的一个函数，实现对异步函数的处理.
  与此类似的还有mounted
  created 是在模板渲染成html前被调用，mounted在模板渲染成html后被调用;
  具体区别不是太清楚，因为我是半路出家的.

methods: {
  
 },
 前端处理数据、代码逻辑的地方，async + 方法名 异步方法调用web端接口，通过发送的请求数据获得接口返回值，然后通过数据处理实现数据渲染.

前端项目中的.js文件

在我个人看来有些.js文件在前端起到的作用就像Java中的工具类，就是单纯的JavaScript的业务逻辑，应该要将这个业务逻辑独立出来，以.js文件的形式存在于整个项目中.

CSS部分

没学不会(其实会一点点)

总结

在项目开发的过程中我深刻的理解到，前期设计的重要性，设计的结果应该是开发团队的前后端通过对需求的理解所达成一致意见的结果，同时还要在开发中保持长期有效的沟通机制，要开发就应该从最刚开始，从需求开始到结束(责任意识)持续跟进。
技术上的总结和反思，对于我来说，应该只是学到了简单的数据渲染吧
反思主要是JavaScript代码可读性比较差，建议项目开发用Typescript这种可读性较高的替代JavaScript或者搭配使用。