Vue作为组件在前端项目中的应用技巧

fobnn 发布于2019-06-28 18:34 / 900人阅读

摘要：所以，我考虑将前端的部分功能抽象出来使其成为通用的组件，可以在任意地方方便地被调用，并且具备可扩展性和易用性。

为什么要使用vue

因为现有的前端项目中JS在使用方面过于混乱，存在大量重复调用和代码冲突（同一段代码可能在10个不同的地方都有写到，被触发的时候，管理异常困难），所以我认识到之前单纯依靠操作DOM的方式是有问题的，应切换到以数据为主。
所以，我考虑将前端的部分功能抽象出来使其成为通用的组件，可以在任意地方方便地被调用，并且具备可扩展性和易用性。

vue的优点

1.完备的中文文档

2.容易上手

3.体积小（只有<50kb）

4.基于组件化的开发方式

5.优秀的代码可读性、可维护性

期望的实现方式

前后端代码分离，组件的vue模板代码不出现在php模板中，仅定义一个特定标签，加载特定的JS文件就可以实现组件加载，使其成为插拔式使用的组件。

通过$mount方法将vue对象挂载到某个ID的dom节点上

// hideLogin 可以是用来控制登录弹窗的参数之一

var LoginComponent = require("loginForm.js");

var Vue = require("vue");
var loginForm = require("loginForm.vue");
var login = exports;
var form;
/**
 * 初始化登录组件
 */
login.loadLoginForm = function () {
    if(form){
        return;
    }
    form = new Vue(loginForm);
    form.$mount("#loginForm");
};

登录组件 + 业务调用

Vue.set() 数据传递业务回调 https://segmentfault.com/a/11...

弹窗控制组件

组件和父子组件，组件通信，内部生命周期

pop.js

var Vue = require("vue");
var pop = require("pop.vue");
new Vue({
    el: "#pop",
    render: function (h) {
        return h(pop)
    }
});

pop.vue // 父组件

子组件（popA.vue）设置一个methods 来给父组件传值

 methods: {
            closeMsg: function (type) {
                this.$emit("listenPop", type);
            }
        }

城市选择组件

侦听器 watch：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

过滤器 filter

// watch方法监控该对象，当数据发生变化的时候，触发function
    watch: {
        list: function(val) {
            this.doSm();
        },
        history: function(val) {
            if(val){
                this.doSm();
            }
        }
    }

// 使用filter 来对接口返回的数据进行处理
    constructUrl: function (list) {
        var vm = this;
        return list.filter(function (item) {
            if (if (vm.type == "1") {)
            return item["url"] = "javascript:;";
        })
    }

相关知识点应用

安装版本受webpack影响

因项目原因不支持babel转换es6语法，因此只能用es5

初始化，基础语法，属性绑定，数据绑定，事件绑定

mount挂载

生命周期钩子（create，mount，update，destroy）

组件和父子组件,组件通信，内部生命周期

Vue.set() 数据传递业务回调

侦听器 watch：当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的

过滤器 filter

云服务器 GPU云服务器 webrtc项目中的stl库在哪里在深度学习中的应用机器学习在企业中的应用云主机在我们工作中的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28413.html

Vue作为组件在前端项目中的应用&Vue.set 的用法

摘要：业务背景是，在的前端项目中加入作为组件。但随着需要登录的页面的增多，多个页面都需要添加相同的，，以及前端登录逻辑，所以在原先的项目中添加了，将重复的添加的代码加入到了文件中，然后通过方法将对象挂载到某个的节点上。业务背景是，在jq的前端项目中加入Vue作为组件。原本的登录功能是每个页面加一个登录弹窗（手机号+验证码验证登录），然后发ajax请求到后端，登录成功后再进行一些操作。但...

hersion 2019-06-28 18:34 评论0 收藏0
Vue.js新手入门指南[转载]

摘要：就是一个用于搭建类似于网页版知乎这种表单项繁多，且内容需要根据用户的操作进行修改的网页版应用。单页应用程序顾名思义，单页应用一般指的就是一个页面就是应用，当然也可以是一个子应用，比如说知乎的一个页面就可以视为一个子应用。最近在逛各大网站，论坛，以及像SegmentFault等编程问答社区，发现Vue.js异常火爆，重复性的提问和内容也很多，楼主自己也趁着这个大前端的热潮，着手学习了一...

MartinHan 2019-08-23 11:50 评论0 收藏0
Vue 2019开发者图谱

摘要：为了便于您更清晰的理解的体系架构，在这里我将为您展示年开发者知识图谱，它包含了所有开发过程中的关键部分。在数据展示前端导入导出图表面板数据绑定等场景无需大量代码开发和测试，可极大节省企业研发成本并降低交付风险。作为 Vue 的初学者，您或许已经听过很多关于它的专业术语了，例如：单页面应用程序、异步组件、服务器端呈现等，您可能还听过和Vue经常一起被提到的工具和库，如Vuex、Webp...

cgspine 2019-08-23 18:14 评论0 收藏0
2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

winterdawn 2019-08-30 13:21 评论0 收藏0
2016年最具潜力前端开源项目Top20

摘要：作为年最具潜力，乃至最具影响力的前端开源项目真的不为过。通过上的介绍，这个项目是偏右阿里的前端大牛和阿里的前端大牛主导，而且从中也不难看出有些部分是来自参与过的项目。 showImg(https://segmentfault.com/img/bVH8b2?w=900&h=500); 在2016年，前端的开源世界越发精彩，Vue的不断壮大，Angular 2的发布，Amaze UI 3....

xiguadada 2019-08-20 13:39 评论0 收藏0