2018-05-02 Vue.js 简单使用

MVC：用户通过view（操作发送） ->Controller->model->view（操作接受）来实现一次操作？？
MVP：view 和model完全隔离，二者交互只通过Presenter
MV VM:View<->viewModel（二者完全同步）->model
Vue.js 时MVVM框架
特点：轻量，数据绑定（MVVM的框架），指令，4插件化

vue中的数据和html中的数据是绑定的，页面改变数据改变，数据改变，页面改变

初始化

el为需要在html中绑定的id，一般加在核心内容的div上，
data里面为注册了的参数，可以在vue标签中使用，methods则为注册的方法，在html中调用是@click而不是onclick
created：在vue组件初始化之前执行的方法

vm = new Vue({
el:id,
data:{
},
created:function () {

},
methods:{
xx:function(){

}
})

模板

模板数据一般为可复用的UI，如果不是可复用的可以直接在html中拼v-for

Vue.component("name", {
    props: ['param'],
    template: `
            <li>页面展示<li>
    `,
    methods: {
        del: function (audio) {
//子件调用父类方法
            this.$emit('del', audio);
        }
    }
});

生命周期

beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestory,destoryed

html界面引用

常用的有v-model,v-if,v-for,:class,单纯展示数据用{{}}

<name :param="audio" @del="delAudio" v-for="audio in audios"></name>

:class的三目判断

//如果满足sortType==0则class为fl active否则为fl
 <li :class="{'active':(param.sortType=='0'),'fl':true}" ></li>

字符串拼接

简单说:后面绑定的数据，单引号是静态字符串，双引号里是Vue中的数据

:href="'拼接的字符串'+data里面的数据"

自定义判断

很多时候v-if中的数据是没办法直接用来判断的，需要先处理一下，可以将处理的方法写在methods中，在v-if中可调用方法

通知刷新

有时候数据发生改变，但是页面却没有刷新，如果仔细检查没有写错，可以在方法开始加入下方代码，刷新界面

this.$forceUpdate()

ajax请求中的坑

如果在methods中使用ajax操作，在methods修改参数使用的是this.param=xx,而在ajax回调中要使用vm.param=xx

ajax加载完成后的ui处理

问题：在textarea中绑定数据，但是要根据字数判断对对内容的隐藏，如果直接在ajax会调中判断字数，会发现代码会先执行ui操作，但是数据还没有被写入textarea中。
解决：在ajax回调中先修改数据，再加入下面的方法，再方法中加入UI修改

Vue.nextTick(function () {
            // DOM 更新了
            changeContentUI()
        });

在vue中注册一个LayUI的分页控件

现在html中创建分页div

<div id="layPage" ></div>

在vue.data中注册laypage=null

data:{
 laypage:null
}
//初始化分页插件
function initLayUi(pageBean) {
    if (app.isEmpty(vm.laypage)) {
        layui.use(['laypage', 'layer'], function () {
            vm.laypage = layui.laypage;
        })
//完整功能
    vm.laypage.render({
        elem: 'layPage'
        , count: pageBean.total
        , curr: pageBean.pageNum
        , limit: pageBean.pageSize
        , layout: ['prev', 'page', 'next', 'count', 'skip']
        , jump: function (obj, first) {
            if (!first) {
                loadWork(obj.curr);
            }
        }
    });
    }
    
}

vue中的拦截器

问题：很多时候数据库存的时间并不是时分秒，需要在展示数据时格式化一波

Vue.filter('millisecondToYYYYMMDDHHMMSS', function (millisecond) {
    return app.millisecondConvertToStr(millisecond);
});

<span>{{workComment.createTime|millisecondToYYYYMMDDHHMMSS}}</span>

最后编辑于：2020.05.15 10:21:49