初衷

之前就是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事件传递

    <z-float-input-district 
    dom_id="district" 
    placeholder="区域" 
    name="district"
    v-model="hotel.location.district" 
    v-on:district_select="event_district">
    </z-float-input-district>
                                
                                
    Vue.component('z-float-input-district',{
        props:["placeholder","name", "value", "dom_id"],
        template: '<label class="form-group has-float-label">' +
        '<input :id="dom_id" class="form-control form_input" :name="name" :placeholder="placeholder" ' +
        'v-bind:value="value"' +
        'v-on:input="update($event.target.value)"/>' +
        '<span><% placeholder %></span>',
        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循环

//直接渲染
<div v-for="(item, index) in items">
    <% item %>
</div>

//数字，[ 1, 7 ]，注意从1开始的。。。
<div v-for="index in 7">
    <% index %>
</div>

//for循环不关联dom元素，可以做更多逻辑
<template v-for="(item, index) in items">
    <div>
        <% item %>
    </div>
    <div v-if="index % 4 == 3"></div>
</template>

页面大小适配

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

当然，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/

不求甚解 - VUE实践

初衷