不求甚解 – VUE实践

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

  • 好处:表单操作变得方便了,简化了动态渲染页面的逻辑。
  • 缺点:以前使用的js库,在Vue的框架下,会有初始化的问题。目前都是在 updated
    回调了重新初始化,不知道是不是正路。
  • 未知:前端自动化工具及单文件组件,一直没用。主要还是随便写写~

让Vue工作

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

QA

符号冲突

laravel默认使用的也是 {{}}
来表示变量,所以想想还是改Vue的吧,变成

var hotelController = new Vue({
    el:'#hotelEl',
    delimiters: [""],
    ...
})

加载初始数据

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

  1. [v-cloak]来控制Vue初始页面,否则页面总会先看到一个Vue的变量在Vue初始化之前
  2. 定义一个loading变量来控制loading状态。页面数据请求好后,置loading为false。
  3. 在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: '

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循环

//直接渲染
//数字,[ 1, 7 ],注意从1开始的。。。
//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 : 异步加载,所以回调时也要尝试初始化一次
稀土掘金稿源:稀土掘金 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » 不求甚解 – VUE实践

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录