![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue、JQuery
学习为主,逐步以案例深入学习前端知识
还不起来学习?
这个作者很懒,什么都没留下…
展开
-
vue3前端工程搭建过程
vue3前端工程搭建过程1.先安装Node.js,自行官网下载,win10建议安装12及以上版本,我这里安装的是14,安装完成后查看版本号node -v2.安装淘宝镜像加速器,安装命令:npm install -g cnpm --registry=https://registry.npm.taobao.org3.安装vue前端工程脚手架vue-cli3,安装命令:npm install -g @vue/cli4.安装完成后使用 vue -V 指令检测是否安装成功5.在磁盘上为自原创 2021-02-18 14:19:58 · 187 阅读 · 1 评论 -
Vue.js读取本地json文件并分页显示
Vue.js读取本地json文件并分页显示1.功能实现通过axios异步加载技术读取本地的json文件内容,并通过vue.js处理数据在h5页面分页显示(这里以3行数据分页)2.student.json数据如下[ {"stuId":1,"stuName":"李华","stuSex":"男","stuAge":20}, {"stuId":2,"stuName":"张国伟","stuSex":"男","stuAge":22}, {"stuId":3,"stuName":"刘艳","stuSe原创 2020-12-24 22:44:39 · 2201 阅读 · 0 评论 -
Vue.js实现购物车功能
Vue.js实现购物车功能1.功能实现以表格的形式将存放在后端的购物信息展示在前端页面,实现步骤如下:使用axios技术异步读取json文件里的数据,结合Vue.js的v-for指令将信息逐条迭代存放在表格中,在表格中展示“商品名称”、“商品单价”、“商品数量”等信息,并能对商品进行数量的增加、减少,清除此项订单信息的功能,订单总价随着商品数量的增加和减少实时更新。2.order.json数据如下[ { id:1, name:'华为Mate40',原创 2020-12-24 20:07:39 · 2830 阅读 · 2 评论 -
js使用图片加载技术实现图片切换
js使用图片加载技术实现图片切换1.功能实现点击“上一张”按钮,切换上一张图片,点击“下一张”按钮,切换至下一张,到达图片末尾会弹出相应提示框,通过Image对象来预加载图片。2.代码如下<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">原创 2020-12-15 17:41:58 · 225 阅读 · 0 评论 -
JQuery+Axios+JSON实现将JSON中的数据读取出来并显示在前端表格中
JQuery+Axios+JSON实现将JSON中的数据读取出来并显示在前端表格中1.任务需求页面中给出学生姓名、年龄、手机号、家庭住址等表头,信息项为空,点击“加载数据”按钮,触发加载数据函数,通过axios异步请求json文件中的数据,并显示在页面上,按钮点击完后设置为失效状态,即不允许重复加载数据。2.首先准备"student.json"文件,自定义若干数据,格式如下[{"userName":"","age":,"phoneNum":" ","address":""}, {"userName原创 2020-12-21 21:06:21 · 1168 阅读 · 0 评论 -
Vue.js实现简单的表格
Vue.js实现简单的表格1.代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <原创 2020-12-11 18:27:22 · 8442 阅读 · 3 评论