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

为什么要使用vue

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

vue的优点

• 1.完备的中文文档
• 2.容易上手
• 3.体积小 （只有<50kb）
• 4.基于组件化的开发方式
• 5.优秀的代码可读性、可维护性

期望的实现方式

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

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

// hideLogin 可以是用来控制登录弹窗的参数之一
<div id="loginForm" data-action="homePage" data-hideLogin="1"></div>

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 // 父组件

<template>
    <div>
        <div class="mask" v-show="showMask" @click="clickMask"></div>
        // 使用listenPop="closePopMsg" 来监听子组件close pop的行为
        <pop-a v-if="showA"  v-on:listenPop="closePopMsg"></pop-a> 
        // 使用 :showUrl="showUrl"  来给子组件传值 子组件需要定义 
        // props: {showUrl:showUrl}  来接受传值
        <pop-b :showUrl="showUrl" v-on:listenPop="closePopMsg"></pop-b>
    </div>
</template>

<script>
// 加载子组件
var popA = require('popA.vue');
var popB = require('popB.vue');

module.exports = {
        data: function () {
            return {
                showA: false,
                showB: false,
                showMask: false,
                showUrl : ''
                stack: [] // 定义一个栈用来存储pop顺序和流程
            }
        },
        components: {
        // 定义组件时 es6的简写语法糖是key:value一致时 不用写key
          popA:popA,
          popB:popB
        },
        methods: {
            clickMask: function () {
//                console.log('click_mask');
            },
            checkShowA: function () {
                if (!this.checkShow()) {
                    return;
                }
                this.stack.push('showA');
            },
            checkShowB: function () {
                this.stack.push('showB');
            },
            //show出pop
            tryPop: function () {
                if(this.stack.length > 0){
                    var key = this.stack.pop();
                    this[key] = true;
                    this.showMask = true;
                } else {
                    this.showMask = false;
                }
            },
            closePopMsg: function (type) {
                if (type == 1) {
                    this.tryPop()
                }
            }
        },
        created: function () {
            this.checkShowA();
            this.checkShowB();
            this.tryPop();
        }

    };
</script>

子组件（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