初衷

之前就是laravel自带的blade加上jquery，配上boostrap。看前端都上Vue了，新页面尝试下，总结下体验

好处：表单操作变得方便了，简化了动态渲染页面的逻辑。

缺点：以前使用的js库，在Vue的框架下，会有初始化的问题。目前都是在updated回调了重新初始化，不知道是不是正路。

未知：前端自动化工具及单文件组件，一直没用。主要还是随便写写~

让Vue工作

看到前端各种工具，头就很大。最简单使用Vue的方式就是直接引入vue.min.js，像引入其他js库一样。然后就可以按照官方的例子来个hello world页面。到此，准备工作ok了。然后就要开始改变观念，之前一直laravel的，所以前端页面也比较依赖laravel的相关。用Vue的话，只好硬搞前后端分离，所有数据都暂有js来获取

QA

符号冲突

laravel默认使用的也是 {

{}} 来表示变量，所以想想还是改Vue的吧，变成<% vue_variable %>

var hotelController = new Vue({    el:'#hotelEl',    delimiters: ["<%","%>"],    ...})复制代码

加载初始数据

遇到的第一个问题，何时发页面数据请求，怎样控制页面初始时的loading状态

[v-cloak]来控制Vue初始页面，否则页面总会先看到一个Vue的变量在Vue初始化之前

定义一个loading变量来控制loading状态。页面数据请求好后，置loading为false。

在created回调里发起数据请求，使用了axios发发请求

Post请求

这可能是vue最方便我的地方了，直接post vue里的data，不用再关心form表单里的字段设计. 后端直接处理json参数即可

update_data : function(){    var paras = JSON.parse(JSON.stringify(this.$data));//covert data to json    axios.post(url,paras.hotel)        .then(function(response){            //parse response        })        .catch(function(error){            //console.log(error)        });}复制代码

动态表单

以前的思路是，通过Jquery构造表单string，然后append到对应的div里去。相对来说比较麻烦，调整样式也蛋疼，现在通过控制Vue data来搞，基本就是arr.splice(index, 0, empty) 或者 arr.splice(index,1) 来改变数组大小，从而控制表单数目

子控件传递数据

这个Vue官方有说，父到子通过props定义，子到父通过emit事件传递


        
                                                                        Vue.component('z-float-input-district',{        props:["placeholder","name", "value", "dom_id"],        template: '' +        '' +        '<% placeholder %>',        mounted:function(){            //...        },        data : function(){            return {                //...            }        },        methods: {            update:function(item){                if(item.hasOwnProperty("district")){                    this.$emit('input', item.district)                    this.$emit('district_select', item)                }            }        }    });复制代码

Jquery修改的form表单，如果同步到Vue的data中

通常来说，用户输入修改的表单，可以通过 v-model 实现双向绑定，但是由于一些遗留问题，仍然需要通过Jquery或者代码的方式修改表单数据，比如使用了一个date-range-picker的第三方控件，此时就需要构造原生事件通知Vue了。

helper_js_event : function(obj){    var evt = document.createEvent('HTMLEvents');    evt.initEvent('input', false, true);    obj.dispatchEvent(evt);}复制代码

当通过Jquery修改某个input时，再调用helper_js_event(input)来同步到Vue中

强制刷新

不知道为什么，就是不自动更新页面，不求甚解的话，直接强制刷新this.$forceUpdate()

复制数据

需要一个复制功能，但是复制Vue的data里的数据，object和arr是deep copy，尴尬，需要自己实现一个clone功能

function clone(obj) {        var copy;        if (null == obj || "object" != typeof obj) return obj;        if (obj instanceof Date) {            copy = new Date();            copy.setTime(obj.getTime());            return copy;        }        if (obj instanceof Array) {            copy = [];            for (var i = 0, len = obj.length; i < len; i++) {                copy[i] = clone(obj[i]);            }            return copy;        }        if (obj instanceof Object) {            copy = {};            for (var attr in obj) {                if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]);            }            return copy;        }        throw new Error("Unable to copy obj! Its type isn't supported.");    }复制代码

页面返回时检查是否保存

由于表单数据较多，防止内容丢失，做一个询问是否保存功能。

至于为啥不自动保存，怕误操作自动保存就回不去了。。。

本来想通过watch来监听Vue data的变化的，发现有点问题，就是每次Vue data赋值完后会调用两次watch，导致我无法判断data的初始状态了，但是我watch一个简单的变量行为就是对的，可能是data的结构太复杂了么。。

不求甚解的方案，通过比较json串来判断

//在每次保存数据成功后调用 last_json = this.helper_hotel_json()window.addEventListener("beforeunload", function (e) {        if(last_json != hotelController.helper_hotel_json()){            var confirmationMessage = '离开之前请确认保存,否则更改信息会丢失的!!!';            (e || window.event).returnValue = confirmationMessage; //Gecko + IE            return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.        }    });复制代码

解析路由参数

需要用到vue-router，我用这个主要是要解析url参数，获取一些配置信息

var router = new VueRouter({        mode: 'history',        routes: []    });var hotelList = new Vue({        router,        ...,        created:function () {            var hotel_id = this.$route.query.id;        }    )}复制代码

for循环

//直接渲染
    
         <% item %>
    
//数字，[ 1, 7 ]，注意从1开始的。。。
    
         <% index %>
    
//for循环不关联dom元素，可以做更多逻辑
    复制代码

页面大小适配

好吧，有些控件要适配页面大小。想了想还是直接代码搞试试先~

当然，h5页面还是要单独写的，一般在php路由时重定向到h5对应的页面

mounted:function(){    window.addEventListener('resize', this.handle_resize)    this.handle_resize(null);},beforeDestroy: function () {    window.removeEventListener('resize', this.handle_resize)},methods : {    handle_resize : function(event){        var height = document.documentElement.clientHeight;        var width = document.documentElement.clientWidth;        //然后这里可以各种操作那些和界面大小相关的data参数    }}复制代码

axios跨越问题

好吧，这个太折腾了。还是在后端倒了一次。

使用以前的第三方js

第三方控件的初始化时机，目前我这里是在updated回调时每次都要检查一次的。否则就会出现失效的问题。

七牛的js-sdk ：上传图片

affix ：浮动

swiper ： image gallery

blueimp ： image gallery & fullscreen

google map ：异步加载，所以回调时也要尝试初始化一次

Refs

https://vuejs.org/