VUE 老项目改造，常用方法说明

最新推荐文章于 2025-06-21 03:30:16 发布

程序员-拖鞋

最新推荐文章于 2025-06-21 03:30:16 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue html css

本文链接：https://blog.youkuaiyun.com/a1178013314/article/details/78248797

vue 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了在面临组织架构限制，无法全面采用Vue生态的情况下，如何在现有项目中逐步引入Vue，提升开发效率。文章分享了不使用脚手架，直接编写页面JS，并抽离公共组件的经验。重点讲解了Vue的几个核心概念，如数据绑定、生命周期钩子、方法定义、过滤器和观察者，以及在实际开发中的应用，帮助开发者解决日常开发问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 相较上一代web框架JQ有更优秀的开发理念，更快的开发速度（这里可能有些低版本浏览器兼容问题）

可由于历史遗留问题，很难使用vue的全部生态来开发比如脚手架，

比如我们公司在组织架构上，前端的设计 html css的编写是由一个部门完成的

动态渲染是由另一个部门完成的

导致一个问题，在后端迭代新技术的时候无法要求人家去迭代，所以我们公司还在使用 freemarker 和JSP等相关技术

搞过JAVA开发的都知道这俩技术有点坑，
（比如在做一些AJXA渲染移动端上拉加载更多等操作的时候，要同时维护 freemarker和JQ两种代码，冗余不说BUG也不好处理）

由于公司结构的问题，又很难推进VUE的全部生态，使用脚手架前后端分离开发

如何解决呢，如何提高开发速度了，如何提高效率不加班呢（PS：不加班是我的最终目的~~）

我们可以不使用脚手架，直接进行页面JS的编写，对公共组件进行抽离（这个问题会放在下一次来说）

写了一些了，目前效果不错最起码BUG少了，也不怎么加班了，还有时间学习新东西了，好了先看代码

<script type="text/javascript">
//开发完毕重构抽到单门的JS中并压缩处理
var indexApp = new Vue({
    el: '#indexApp', //@1 标记符详情见下
    data: {
       //@2 标记符详情见下
      datas: [],
      watchVal:''
    },
    created:function(){
      //@3 标记符详情见下
     this.onLoadData();
    },
    methods:{
      //@4 标记符详情见下
      onLoadData :function(){
        console.log("onLoad")

      },
      watchFun : function(newVal,oldVal){
        console.log("newVal")
        console.log("oldVal")
      },
      eventFun : function(val){
        console.log("newVal");

      }

    },
    filters: {  
       //@5  标记符详情见下
      dateFormat : function(val1,val2){

      }
    },
    watch :{
       //@6  标记符详情见下
      'watchVal':'watchFun'
    }
  })

</script>

这里只介绍些常用的基本能解决大部分的日常开发问题，更详细的教程网上很多，可以自行搜一搜

@1：对应需要VUE进行处理的DOM上，不要把ID放在body上，会报错
@2：VUE用来进行数据绑定的，数据对象，在绑定完dom后，我们的主要错做都是在操作这个属性下的值
@3: vue的生命周期钩子很多，这个是比较常用的，其中可以用this.{funName} 来调用 methods里面定义的方法
@4: 用来定义方法的属性，比如可以给生命周期里的回掉来定义方法，可以给watch定义函数，可以定义各种事件的方法等

@5: 这个也很重要，主要是在做循环时对值的处理，因为后端开发人员不会都给你格式化好的，他们懒着呢（给你就行了格式自己处理，别问我怎么知道的），说一下用法

<div v-for="data in datas">
  <dl @click="eventFun(data)">
    <dt><a href="javascript:void(0)" target="_blank" > {{data[5]}}</a></dt>
    <dd><span class="time"> {{data[3] | dateFormat}} </span></dd>
    <dd class="text">{{data[2]}}</dd>
  </dl>
</div>