一次页面从Jq到Vuejs+PartialView的迁徙

题外话

本篇分享不能帮助你入门vue,入门的文章也是无意义的,官方文档http://cn.vuejs.org/v2/guide/ 已经写的不能再清晰了。希望我们勇敢的主动地给自己创造实践的机会。

手里有一个功能还不是很多的PC端页面,考虑到下一个版本,要把IOS,安卓和公众号上拥有的功能也要添加到PC上,便在周三开始了解Vue,周末花了些时间,做了到vue的改版。

本篇简单记录下这次经历。Vue并不是MVVM的框架,而是MVVM中的VM—ViewModel.对接口数据的获取还是要依赖于ajax,或者使用vue为我们提供的可选组件之一vue-loader。

在使用Vue之前,我自己在使用JS三层的概念,在渲染和模板方面使用了tmpl.js这个比较古老的框架,其实在关注点分离等解耦问题上,也有很明显的效果。详情可以到这个链接:http://www.cnblogs.com/tdws/p/6024916.html

在初步设计项目的时候,由于比较着急并且缺乏整体的考虑,有很多可以公用的模块没有单独提出来并封装。这次想给自己一个Vue初步入门的机会,便主动将PC改版。在模块的封装上,主要使用了Vue的组件的功能。Component是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展——摘自Vue文档。

我支持在JS代码中,各个代码块尽量不包含重复的内容,有重复的,则应采取合适的方式进行公用。下面是我的一段代码分享,体会思路就好。

这是组件的声明:

这是组件的调用:

你也许会问,为什么我声明了四个Prop,这是因为我不同接口传入的数据所使用的key名称不同。我需要在代码中手动将各个值赋给prop。

而最终我发现我有很多列表结构都是一样的,不同的是接口,和所使用的字段。所以我将其中的一个页面处理成PartialView(可惜到这已经不是Vue相关了)。

使用了如下方式,传入各个也页面特有的数据和接口Url:

在PartialView中来统一处理各个页面传入的数据:

这样一来就达到了比较高度的复用。

写在最后

在Vue的使用上,个人还是非常关注于数据绑定和组件化的处理。其在事件绑定上,给我的感觉在标签上绑定是有点理不清的感觉。然而官方的说法是认为这样的做法,减少了我们在Vue代码中的dom操作。对于Vue的使用,目前还是特别浅的。

在我即将到来的PC端2.0版本中还会不断地使用Vue,在这个过程中,我依然会持续分享,如果我的点滴分享对你有点滴帮助,欢迎点击下方红色按钮关注我的持续输出。

时间: 2024-10-25 15:09:31

一次页面从Jq到Vuejs+PartialView的迁徙的相关文章

MVC:页面提交JQ动态生成的输入框的值得解决方案:

一,动态生成JS写法 <script type="text/javascript"> var numlist = new Array(2, 3, 4, 5); function Additional() { var num = $("#AdditionalNum").val(); //定义的隐藏的保存当前在页面上存在的数量,最多五个 if (num == 5) { alert("最多加五个"); return; } var delet

jQuery框架使用,jq选择器,jq操作页面内容, jq操作类名,jq操作全局属性,jq获取盒子信息,jq获取位置信息,js/jq页面加载完毕事件,jq事件

jq选择器 // 获取所有的页面元素jq对象 $('css3选择器语法'); var $box = $(".box:nth-child(1)"); 获取的是jq对象数组 // 拿到指定的页面元素jq对象 $('css3选择器语法').eq(index); var $box = $(".box").eq(1); 获取的是jq对象数组 // jq 转 js ( jq对像就是由数组包裹的js对象 ) box1 = $box[0] 从数组里取出来 box1 = $box.g

ThinkPHP框架下,jq实现在div中添加标签并且div的大小会随之变化

php初学者,有什么不对的还请指正. 首先是在html页面中用jq实现添加标签:divAchivePersonnal是select所在的div的外层div,divselectAchivePersonnal是select的最近一层div,info内是字符串拼接,jq标签插入用append方法.接下来是调整css样式,使div会随着标签增加而加大,这里要用一个css属性overflow(亲自查),这里直接在divselectAchivePersonnal使用时不会达到你想要的效果,所以至少要有两个嵌

vuejs在不使用history的情况下,回退返回到之前滚动的位置

在vuejs里,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样(借用vuejs官方文档一句话):但是官方文档使用路由,来控制滚动行为是建立在HTML5 history模式下的(参考这里),但是本人最开始就没有使用这种模式,如果在修改项目的话,太耗时,想按现在这种非history的条件下,实现页面滚动位置的记录. 其实最核心的就是记录滚动的位置,让后保存,在页面回退的时候,让页面滚动到指定位置即可.但是需要注意的钩子函数的时候.因为这里使用了keep-alive

JQ初级

1.JQ导入 什么是jQuery? jQuery是一个简洁高效的且功能丰富的JavaScript工具库,是对原生JavaScript二次封装的工具函数集合. 优点:开源 | 简洁的选择器 | 简化的Ajax操作 | 良好的浏览器兼容 | 强大的链式操作 2.JQ选择器 // 获取满足条件的所有页面元素jq对象 $('css3选择器语法'); // 拿到指定索引的页面元素jq对象 $('css3选择器语法').eq(index); // 拿到指定索引的页面元素js对象 (jq对象转js对象) $(

jq相关操作

1事件: <div class="ele">123</div> box.onclick = function(ev){ ev:系统传入的事件对象 ele.innerText; } 鼠标事件=>clientX,clientY 键盘事件=>ctrlkey,keyCode 鼠标事件: onmouse enter|move|down|up|leave onclick|dblclick oncontextmenu 键盘事件:onkeydown|up 定时器:

回顾vue开发spa(踩坑记录)

使用vueJS开发前端页面差不多也有大半多年了.由于项目后台管理页面最早都是使用JQ进行开发的,刚开始使用vue的时候,只能是直接在页面里面引入vueJS框架进行开发,期间把项目后台的编辑页面和其他复杂页面全部改用vueJS的了(没有用到组件,只是增强了一下交互,开发更简单便捷).由于工期和个人习惯问题,期间也留下了很多坑和隐患,比如不少页面是JQ和vue混用,导致后来改功能的时候痛不欲生-- 所以最近有一个新的后台管理页面,索性使用vue全家桶(vue,vue-router,vue-cil,v

vue 使用总结

1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.component('mine',{ template:'#mineTpl', props:['name','title','city','content'] }); var v=new Vue({ el:'#vueInstance', data:{ name:'zhang', title:'this

ASP.NET WEBAPI 简单CURD综合测试(asp.net MVC,json.net,sql基础存储过程和视图,sqlhelper,json解析)

草图 真正的后端是不管前端是什么平台,用什么语言的,JSON格式的数据应该可以应对.用ASP.NET WEBAPI尝试做一个后端,实现最基本的CURD,业务逻辑和数据库操作都放在后端,前端只需要正确访问和提供必要的数据就行. 个人习惯 我喜欢先意淫一下需求,然后找出需要的实体和逻辑,而不是先设计数据库,现在EF那么牛逼,完全可以在代码上生成表和表之间的关系,各种查询语句效率并不一定比你写sql语句差.所以我在做东西的时候从来不先考虑数据的.但是今天主要是练习api和复习一下ado.net的CUR