vue
shaojia_
软件开发工程师一枚,有需要网站、小程序、业务系统等开发可以加我QQ:271720559
展开
-
Vue之发起ajax请求
Vue之发起ajax请求今天来看看前端框架Vue怎么发起ajax请求。我们都知道在jquery框架发起ajax请求很简单,只需要$.ajax即可发起http请求。其实vue也很简单,不过需要用到插件axios。官方有提供安装,可以通过npm安装(npm install axios -S )axios是一个基于Promise的HTTP请求客户端。格式:methods:{ send(...原创 2018-07-10 00:54:26 · 1304 阅读 · 2 评论 -
element-ui踩坑记录之el-pagination分页
element-ui踩坑记录之el-pagination分页使用el-pagination为表格分页显示时,出现一个bug.每页设置显示7条明明数据有多于21但是分页后只有3页.如下图:查了一圈才发现原来是 分页控件没设置 每页显示的数量: :page-size设置后即可正常显示出数据.这里再记录一个:当跳转到第二页后再次查询...原创 2019-03-10 15:59:27 · 17957 阅读 · 2 评论 -
Vue之路由
Vue之路由今天来看看vue怎么实现路由功能。我们在vue-cil脚手架搭建好的基础上来实现路由功能。如果搭建完初始化项目时没有路由功能则需在npm安装路由。命令:npm install vue-router然后在main.js中引用路由文件import router from './rou...原创 2018-09-12 00:58:33 · 234 阅读 · 0 评论 -
Vue之下载所有选中连接
Vue之下载所有选中连接 最近在项目中有需求是要求能下载所有连接,当时是用.net的后台处理和jquery一起实现的。今天来看看怎么用Vue来实现这个。效果图: 点击下载所有链接就会把勾选的记录里面的链接复制到剪切板,在迅雷或者其他下载软件即可一起下载。实现思路:如果有多少需要下载的链接就写对应的隐...原创 2018-08-21 23:04:18 · 909 阅读 · 0 评论 -
Vue之图片轮播
Vue之图片轮播今天来看看vue怎么实现图片轮播,个人实现方式,如果你有更好的实现方式,欢迎来沟通,嘿嘿。效果图:由于没有素材就随便找了123456来代替选中的圆点。实现思路:首先绑定数据源,循环出每个图片,在通过isShow字段来判断是否显示图片。在图片元素写这两个 v-bind:src="...原创 2018-08-23 01:02:26 · 5857 阅读 · 0 评论 -
Vue之小目标列表实现
Vue之小目标列表实现今天来实现一个简单的小目标列表功能。效果图:功能:可以添加目标添加后自动显示在最下面,如果勾选了就说明是已完成的目标。1.创建一个文本框用于添加目标。并绑定键盘回车事件@keyup.13='addList' 调用添加目标方法。文本框的值则绑定addText data属性。2.实现...原创 2018-08-07 23:36:38 · 1381 阅读 · 1 评论 -
Vue之改变布局
Vue之改变布局我们在购物的网站经常会看物品列表可以切换显示模式。也就是有两种布局可以来回切换,看用户喜欢哪种来选择。今天我们来看看vue怎么实现简单的布局切换。效果图:点击图形就只显示图片,点击图形加文字就多显示出文字。其实实现起来很简单,绑定一个数据集,里面有图片路径和图片文字。用两个div显示...原创 2018-08-14 23:29:10 · 6976 阅读 · 0 评论 -
Vue之导航栏
Vue之导航栏今天我们来用vue实现简单的导航栏。效果图:根据点击的tab来展示对应的内容。其实很简单,用到了vue的v-show和绑定class。首先创建一个属性“shouDiv” 用来判断显示哪一个tab页。再为每一个连接注册点击事件:@click="showDiv=1"分别让sho...原创 2018-08-07 00:47:50 · 4735 阅读 · 0 评论 -
Vue之简单的统计功能
Vue之简单的统计功能今天我们来看看vue怎么实现简单的统计价格功能。效果图:最后的价格自动根据选择的项目来计算最终价格。1.首先绑定每个项目绑定class 如果选中则增加样式active,改变背景颜色 :class="{'active':item.active}"2.写计算事件,过滤掉集合中未选中的项...原创 2018-08-10 00:35:47 · 4259 阅读 · 0 评论 -
Vue之简单购物车功能
Vue之购物车功能今天来看看vue怎么实现简单的购物车功能。效果图: 我们都知道vue是数据驱动和组件化的模式。意思就是只要绑定的数据改变其他的变化由vue去完成,无须再去操作dom。我们来看看简单的购物车功能怎么实现:1.先完成数据绑定代码:html:<tr v-for=...原创 2018-08-06 00:57:29 · 20874 阅读 · 6 评论 -
解决页面刷新后vuex数据丢失
解决页面刷新后vuex数据丢失在vue项目中使用vuex来记录一些状态时发现按F5刷新页面后vuex里面的数据会丢失.因为js运行的代码都是存储在内存中.刷新页面内存会被释放,所以这些数据都会丢失,只能用h5提供的api:localStorage或者sessionStorage来记录页面刷新前的vuex状态.两者大致区别是:l...原创 2019-03-10 16:10:20 · 803 阅读 · 0 评论