为什么要使用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() 数据传递 业务回调

弹窗控制组件

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

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