Vue框架动态渲染界面心得

对于页面需要动态获取数据来渲染的在

示范

var vue;
$(document).ready(function () {
    vue = new Vue(
        el: '#app',
        data: {
            name:''
        },
        mounted:function () {
            loadName();//调用另外的方法加载，赋值采用vue.name=data;
            //或者直接在这里面写ajax然后赋值采用this.name=data;
        }
    })
})

如果你采用了例如LayUI这样的UI框架，且是模块化动态加载组件时可以将vue的初始化代码写到UI组件加载完成的回调函数中

示范

var vue;
$(document).ready(function () {
    layui.use(['form'],function () {
        vue = new Vue({
            el: '#app',
            data: {
                name:''
            },mounted:function () {
                loadName();//调用另外的方法加载，赋值采用vue.name=data;
                //或者直接在这里面写ajax然后赋值采用this.name=data;
            }
        });
    })
})

如果你的UI框架的组件被Vue动态改变后需要重新渲染的话，使用vue的update方法

示范

var vue;
$(document).ready(function () {
    layui.use(['form'],function () {
        vue = new Vue({
            el: '#app',
            data: {
                name:''
            },mounted:function () {
                loadName();//调用另外的方法加载，赋值采用vue.name=data;
                //或者直接在这里面写ajax然后赋值采用this.name=data;
            },updated:function () {
                layui.form.render();//在这里调用UI渲染函数，在vue完成渲染之后会调用
            }
        });
    })
})

如果你要监测数据的变化从而做出相应的话，使用vue的watch，观察数据

示范

var vue;
$(document).ready(function () {
    layui.use(['form'],function () {
        vue = new Vue({
            el: '#app',
            data: {
                name:''
            },mounted:function () {
                loadName();//调用另外的方法加载，赋值采用vue.name=data;
                //或者直接在这里面写ajax然后赋值采用this.name=data;
            },updated:function () {
                layui.form.render();//在这里调用UI渲染函数，在vue完成渲染之后会调用
            },watch:{
                name:function(){
                    //name数据变化之后会调用这个函数，在这里写在name数据变化时你要做的操作即可                }
            }
        });
    })
})