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>
网友评论