文章目录

  • 1 回顾(day01)
    • 背景
    • 关于vue基础
      • 明确下列:
      • vue的基本指令
        • (1) 基本框架
        • (2) 渲染指令
        • (3) v-vloak 指令
        • (4) v-bind 指令和class style绑定
        • (5) v-on指令以及几个常见
        • (6) 数据绑定(单,双)
        • (7) v-for 指令
        • (8) v-if v-show 指令
  • 2 案例分析和讲解
  • 3 新内容 json-server
    • 引入
      • 为什么要使用json-server?
      • 优点?
    • 讲解
      • 1 怎么使用
        • 首先创建一个list.json文件
      • CRUD
      • 结合axios进行数据访问
      • 案例:axios+json-server+bootstrap+vue实现对数据的增删改查
        • 1 引入库 vue.js, bootstrap.min.js,axios.js
        • 2 编写测试数据hero.json
        • 3 通过json-server生成接口
        • 4 页面的编写
        • 5 hero.js文件编写

1 回顾(day01)

背景

  • vue.js是目前最火的前端框架 免费
  • react.js是最流行的一个前端框架 免费
  • angular.js 是最早的一个前端框架 收费

关于vue基础

明确下列:

  • 是一套构建用户界面的框架(只关注视图层)
  • 关于MVC和MVVM的区别?(见最后)
  • 学vue的原因?
    1 提高开发效率
    2 减少不必要的DOM操作(只需要对改变的数据进行处理)
    3 双向数据绑定(程序员只需关注数据业务逻辑)
  • 库和框架的理解
    1 框架是一套完整的解决方案,对项目的入侵性较大,项目如果需要更换框架,则需要重新架构整个项目
    2 提供某一个小功能,对项目的入侵性较小,如果某个库无法完成某些需求,可以很容易切换到其他库.
    总结来说:库小而巧,框架大而全

vue的基本指令

  • (1) 基本使用
  • (2) 渲染指令
  • (3) v-vloak 指令
  • (4) v-bind 指令和class style绑定
  • (5) v-on指令以及几个常见
  • (6) 数据绑定(单,双)
  • (7) v-for 指令
  • (8) v-if v-show 指令
(1) 基本框架

步骤

  • 1 引入库
  • 2 实例化vue
  • 3 渲染数据
<div id="app">{{msg}}</div><script>// 模板:挂载点控制区域的标签//model的数据必须放在模板中// template: 显示后,将会隐藏{{msg}}信息//new Vue({el:"#app",//挂载点-->控制页面的区域data:{msg:"hello vue!"},template:'<i>hello</i>'})</script>

明确:
1 什么是template?模板,控制区域内的所有标签;显示后,将会隐藏{{msg}}信息
2 什么是挂载点?控制页面区域,在实例化vue中el上绑定
3 数据位置有什么要求?model的数据必须放到模板中,否则不会显示
4 MVVM在本案例中的体现?view:挂载点控制的区域view model:实例化后的vuemodel:data的内容(vue时刻监听data变化)
(2) 渲染指令
  • {{}} 小胡子语法 插值表达式
  • v-text
  • v-html
    <div id="app">
<!--        小胡子语法-->{{msg}}
<!--        v-text --><h1 v-text="msg"></h1><h1 v-text="info"></h1>
<!--        v-html--><h1 v-html="msg"></h1><h1 v-html="info"></h1></div><script>new Vue({el:"#app",data:{msg:"我是普通文本内容",info:"<i>我是标签文本内容</i>"}})</script>

明确:
1 插值表达值有什么问题?容易产生页面闪烁问题(下面详细)
2 三者渲染方式区别?(1)都是用来渲染页面(2)插值表达式常用  不会覆盖标签内容(3)v-text 渲染字符串 会覆盖标签内容(4)v-html将字符串解析成html再渲染 会覆盖标签内容
(3) v-vloak 指令
  • 解决页面闪烁问题
 <style>[v-cloak]{display: none;}</style><script src="../js/vue.min.js"></script>
</head>
<body><div id="app"><h1 v-cloak> {{msg}}</h1></div><script>new Vue({el:"#app",data:{msg:"hello"}})</script>
</body>

明确:
1 v-cloak用途?解决页面闪烁问题页面闪烁:由于网速或其他问题,页面的插值表达式的显示和隐藏
2 v-cloak原理?当vue库进入完毕后会自动的把v-cloak删除,刚好数据也解析完毕了
3 v-cloak使用?
(1)在出现插值表达式的标签上添加 v-cloak 指令
(2)在vue库引入之前添加<style>[v-cloak]{display: none;}
</style>
(4) v-bind 指令和class style绑定
  • v-bind 属性绑定
  • class绑定的五种方式
    原生 class=“bg ,color”
    数组 :class=’[“bg” ,“color”]’
    数组三元 :class=’[“bg” ,flag?“color”:""]’
    数组对象(推荐) :class=’[“bg” ,{color:true}]’
    对象 :class="{color:true,bg:false}
  • style绑定的四种
    原生 style=“background: pink;color: green”
    对象 :style="{backgroundColor:‘pink’,color:‘green’}
    数组 :style=“style” 一个
    :style="[style,style1]" 多个
<div id="app">
<!--        v-bind:属性="属性值"--><a href="" v-bind:title="title">我是test</a>
<!--        简写--><a href=""  :title="title">我是test</a></div>

<!--    原生--><h1 class="bg color"> {{msg}}</h1>
<!--    数组--><h1 :class='["bg" ,"color"]'>{{msg}}</h1>
<!--    数组三元--><h1 :class='["bg" ,flag?"color":""]'>{{msg}}</h1>
<!--    数组对象  推荐--><h1 :class='["bg" ,{color:true}]'>{{msg}}</h1>
<!--    对象--><h1 :class="{color:true,bg:false}">{{msg}}</h1>
</div>

<div id="app"><h1 style="background: pink;color: green">{{msg}}</h1><h1 :style="{backgroundColor:'pink',color:'green'}">{{msg}}</h1><h1 :style="style">{{msg}}</h1><h1 :style="[style,style1]">{{msg}}</h1>
</div>
(5) v-on指令以及几个常见
  • 绑定函数有参但没有传参,默认event
  • 绑定函数无参
  • 绑定函数有参传参,为参数
  • 阻止冒泡
  • 阻止默认(链接或者表单提交)
<div id="app"><button v-on:click="show">点击有参</button><button v-on:click="show('我是有参数的')">点击有参传参</button><button v-on:click="show2">点我无参</button></div>

 <div id="app"><div class="out" v-on:click="out">
<!--            <div class="in" v-on:click="inner">  输出in out --><div class="in" v-on:click.stop="inner"> <!-- 输出 in  阻止冒泡 --></div></div><a href="https://www.baidu.com/" v-on:click.prevent="go">去百度</a><!-- 输出 go  不能跳转  阻止默认行为--><a href="https://www.baidu.com/" v-on:click="go">去百度</a><!-- 输出 go  能跳转 --></div><script>

明确:
1 相当于原生中的什么?
(1).stop 相当于 js中 evt.stopPropagation();
(2).prevent 想当于 js中 evt.preventDefault()
(6) 数据绑定(单,双)

+单向数据绑定 :value=“值”
+双向数据绑定: v-model=“值”

<div id="app"><input type="text" :value="lay"><input type="text" v-model="lay">
</div>

明确:
1 两者区别?
(1) 单向数据绑定  model改变 view也跟着改变  反之不成立
(2) 双向数据绑定  model改变 view也跟着改变  反之成立
(7) v-for 指令
  • 遍历数组
  • 遍历对象
  • 遍历数组对象
  • 遍历数字
<div id="app"><p v-for="(el,index) in arr" :key="el.index">{{el}}-->{{index}}</p><p v-for="(el,key,index) in obj " :key="el.index">{{el}}-->{{key}}-->{{index}}</p><p v-for="(el,index) in arrObj" :key="el.index">{{el}}-->{{index}}</p><p v-for="count in 3">{{count}}</p>
</div>

明确:
1 遍历数字时,下标问题?下标从1开始.
2 在遍历是为什么要加上:key="值"表示唯一,保证前端和后端数据一致和准确性
(8) v-if v-show 指令
  • v-if 流程指令
  • v-show 页面显示和隐藏指令
<div id="app"><button @click="hidden"> 显示隐藏 </button><button @click="flag=!flag"> 显示隐藏 </button><h1 v-show="flag">{{msg}}</h1><h1 v-if="flag">{{msg}}</h1><input type="text" v-model="score"><h1 v-if="score>90">优秀</h1><h1 v-else-if="score>60&&score<90" >良好</h1><h1 v-else>不及格</h1></div><script>new Vue({el:"#app",data:{msg:"hello",flag:false,score:88},methods:{hidden(){this.flag=!this.flag;}}})</script>

明确:
1 v-if和v-show区别?(1)v-if 通过js控制dom元素的添加和删除  适合流程控制(2)v-show 通过css控制元素的显示和隐藏  适合频繁点击操作(3)都能控制页面上元素的消失和隐藏

2 案例分析和讲解

  • 跑马灯
    见day01
  • 换肤优化
    见day01

3 新内容 json-server

引入

为什么要使用json-server?
  • 对前端人员来说,写接口是一个比较头疼的事,并且对json数据的遍历也是特别不方便的,json-server帮我们解决这种头疼的问题
优点?
  • 帮前端测试人员将json数据生成接口,提高开发效率

讲解

  • 使用
  • CRUD
  • 结合axios进行数据访问
  • 案例:axios+json-server+bootstrap+vue实现对数据的增删改查
1 怎么使用
  • 下载 全局安装
npm i json-server -g
  • 使用
json-server list.json
  • 使用案例
首先创建一个list.json文件

注意:这个json文件里面的数据一定是一个对象

{"user": [{"id": 1,"name": "lay","age": 20},{"id": 2,"name": "sheep","age": 27},{"id": 3,"name": "xing","age": 23}]
}

执行:

$ json-server list.json\{^_^}/ hi!Loading list.jsonDonehttp://localhost:3000/userHomehttp://localhost:3000Type s + enter at any time to create a snapshot of the database

访问:

CRUD
  • C create
  • R read
  • U update
  • D delete
结合axios进行数据访问
  • 获取数据
    axios.get(" http://localhost:3000/user")
  • 插入数据
    axios.post(" http://localhost:3000/user",obj)
  • 更改数据
    axios.put(" http://localhost:3000/user"+id,obj)
  • 删除数据
    axios.delete(" http://localhost:3000/user"+id)
  • 分页操作
    axios.get(" http://localhost:3000/user?_page=m,_limit=n")
案例:axios+json-server+bootstrap+vue实现对数据的增删改查
1 引入库 vue.js, bootstrap.min.js,axios.js
2 编写测试数据hero.json
{"hero": [{"cname": "鲁班七号5","title": "机关造物","hero_type": 5,"skin_name": "机关造物|木偶奇遇记|福禄兄弟|电玩小子|星空梦想","id": 112},{"id": 113,"cname": "庄周","title": "逍遥梦幻","new_type": 0,"hero_type": 6,"hero_type2": 3,"skin_name": "逍遥幻梦|鲤鱼之梦|蜃楼王|云端筑梦师"},{"id": 114,"cname": "刘禅","title": "暴走机关","new_type": 0,"hero_type": 6,"hero_type2": 3,"skin_name": "暴走机关|英喵野望|绅士熊喵|天才门将"},{"id": 115,"cname": "高渐离","title": "叛逆吟游","new_type": 0,"hero_type": 2,"skin_name": "叛逆吟游|金属狂潮|死亡摇滚"},{"id": 116,"cname": "阿轲","title": "信念之刃","new_type": 0,"hero_type": 4,"skin_name": "信念之刃|爱心护理|暗夜猫娘|致命风华|节奏热浪"},{"id": 117,"cname": "钟无艳","title": "野蛮之锤","new_type": 0,"hero_type": 1,"hero_type2": 3,"skin_name": "野蛮之锤|生化警戒|王者之锤|海滩丽影"},{"id": 118,"cname": "孙膑","title": "逆流之时","new_type": 0,"hero_type": 6,"hero_type2": 2,"skin_name": "逆流之时|未来旅行|天使之翼|妖精王"},{"id": 119,"cname": "扁鹊","title": "善恶怪医","new_type": 0,"hero_type": 2,"skin_name": "善恶怪医|救世之瞳|化身博士|炼金王"},{"id": 120,"cname": "白起","title": "最终兵器","new_type": 0,"hero_type": 3,"skin_name": "最终兵器|白色死神|狰|星夜王子"},{"id": 152,"cname": "王昭君","title": "冰雪之华","new_type": 0,"hero_type": 2,"skin_name": "冰雪之华|精灵公主|偶像歌手|凤凰于飞|幻想奇妙夜"},{"id": 153,"cname": "兰陵王","title": "暗影刀锋","new_type": 0,"hero_type": 4,"skin_name": "暗影刀锋|隐刃|暗隐猎兽者"},{"id": 154,"cname": "花木兰","title": "传说之刃","new_type": 0,"hero_type": 1,"hero_type2": 4,"skin_name": "传说之刃|剑舞者|兔女郎|水晶猎龙者|青春决赛季|冠军飞将|瑞麟志"},{"id": 156,"cname": "张良","title": "言灵之书","new_type": 0,"hero_type": 2,"skin_name": "言灵之书|天堂福音|一千零一夜|幽兰居士"},{"id": 157,"cname": "不知火舞","title": "明媚烈焰","new_type": 0,"hero_type": 2,"hero_type2": 4,"skin_name": "明媚烈焰"},{"id": 162,"cname": "娜可露露","title": "鹰之守护","new_type": 0,"hero_type": 4,"skin_name": "鹰之守护"},{"id": 163,"cname": "橘右京","title": "神梦一刀","new_type": 0,"hero_type": 4,"hero_type2": 1,"skin_name": "神梦一刀"},{"id": 166,"cname": "亚瑟","title": "圣骑之力","pay_type": 11,"new_type": 0,"hero_type": 1,"hero_type2": 3,"skin_name": "圣骑之力|死亡骑士|狮心王|心灵战警"},{"id": 167,"cname": "孙悟空","title": "齐天大圣","new_type": 0,"hero_type": 4,"hero_type2": 1,"skin_name": "齐天大圣|地狱火|西部大镖客|美猴王|至尊宝|全息碎影|大圣娶亲"},{"id": 168,"cname": "牛魔","title": "精英酋长","new_type": 0,"hero_type": 3,"hero_type2": 6,"skin_name": "精英酋长|西部大镖客|制霸全明星"},{"id": 187,"cname": "东皇太一","title": "噬灭日蚀","new_type": 0,"hero_type": 3,"skin_name": "噬灭日蚀|东海龙王|逐梦之光"},{"id": 182,"cname": "干将莫邪","title": "淬命双剑","new_type": 0,"hero_type": 2,"skin_name": "淬命双剑|第七人偶|冰霜恋舞曲"},{"id": 189,"cname": "鬼谷子","title": "万物有灵","new_type": 0,"hero_type": 6,"skin_name": "万物有灵|阿摩司公爵|幻乐之宴"},{"id": 193,"cname": "铠","title": "破灭刃锋","new_type": 0,"hero_type": 1,"hero_type2": 3,"skin_name": "破灭刃锋|龙域领主|曙光守护者|青龙志"},{"id": 196,"cname": "百里守约","title": "静谧之眼","new_type": 0,"hero_type": 5,"hero_type2": 4,"skin_name": "静谧之眼|绝影神枪|特工魅影|朱雀志"},{"id": 195,"cname": "百里玄策","title": "嚣狂之镰","new_type": 0,"hero_type": 4,"skin_name": "嚣狂之镰|威尼斯狂欢|白虎志"},{"id": 194,"cname": "苏烈","title": "不屈铁壁","pay_type": 10,"new_type": 0,"hero_type": 3,"hero_type2": 1,"skin_name": "不屈铁壁|爱与和平|坚韧之力|玄武志"},{"id": 198,"cname": "梦奇","title": "入梦之灵","new_type": 0,"hero_type": 3,"skin_name": "入梦之灵|美梦成真|胖达荣荣"},{"id": 179,"cname": "女娲","title": "至高创世","new_type": 0,"hero_type": 2,"skin_name": "至高创世|尼罗河女神"},{"id": 501,"cname": "明世隐","title": "灵魂劫卜","new_type": 0,"hero_type": 6,"skin_name": "灵魂劫卜|占星术士|虹云星官"},{"id": 199,"cname": "公孙离","title": "幻舞玲珑","new_type": 0,"hero_type": 5,"skin_name": "幻舞玲珑|花间舞|蜜橘之夏"},{"id": 176,"cname": "杨玉环","title": "霓裳风华","new_type": 0,"hero_type": 2,"hero_type2": 6,"skin_name": "风华霓裳|霓裳曲|遇见飞天"},{"id": 502,"cname": "裴擒虎","title": "六合虎拳","new_type": 0,"hero_type": 4,"hero_type2": 1,"skin_name": "六合虎拳|街头霸王|梅西"},{"id": 197,"cname": "弈星","title": "天元之弈","pay_type": 10,"new_type": 0,"hero_type": 2,"skin_name": "天元之弈|踏雪寻梅"},{"id": 503,"cname": "狂铁","title": "战车意志","new_type": 0,"hero_type": 1,"skin_name": "战车意志|命运角斗场|御狮"},{"id": 504,"cname": "米莱狄","title": "筑城者","pay_type": 10,"new_type": 0,"hero_type": 2,"skin_name": "筑城者|精准探案法|御霄"},{"id": 125,"cname": "元歌","title": "无间傀儡","new_type": 0,"hero_type": 4,"skin_name": "无间傀儡|午夜歌剧院"},{"id": 510,"cname": "孙策","title": "光明之海","new_type": 0,"hero_type": 3,"hero_type2": 1,"skin_name": "光明之海|海之征途|猫狗日记"},{"id": 137,"cname": "司马懿","title": "寂灭之心","new_type": 0,"hero_type": 4,"hero_type2": 2,"skin_name": "寂灭之心|魇语军师"},{"id": 509,"cname": "盾山","title": "无尽之盾","new_type": 0,"hero_type": 6,"skin_name": "无尽之盾|极冰防御线"},{"id": 508,"cname": "伽罗","title": "破魔之箭","new_type": 0,"hero_type": 5,"skin_name": "破魔之箭|花见巫女"},{"id": 312,"cname": "沈梦溪","title": "爆弹怪猫","new_type": 0,"hero_type": 2,"skin_name": "爆弹怪猫|棒球奇才"},{"id": 507,"cname": "李信","title": "谋世之战","new_type": 0,"hero_type": 1,"skin_name": "谋世之战|灼热之刃"},{"id": 513,"cname": "上官婉儿","title": "惊鸿之笔","new_type": 0,"hero_type": 2,"hero_type2": 4,"skin_name": "惊鸿之笔|修竹墨客"},{"id": 515,"cname": "嫦娥","title": "寒月公主","new_type": 0,"hero_type": 2,"hero_type2": 3,"skin_name": "寒月公主|露花倒影"},{"id": 511,"cname": "猪八戒","title": "无忧猛士","new_type": 0,"hero_type": 3,"skin_name": "无忧猛士|年年有余"},{"id": 529,"cname": "盘古","title": "破晓之神","new_type": 0,"hero_type": 1,"skin_name": "破晓之神"},{"id": 505,"cname": "瑶","title": "鹿灵守心","new_type": 0,"hero_type": 6,"skin_name": "森"},{"id": 506,"cname": "云中君","title": "流云之翼","pay_type": 10,"new_type": 0,"hero_type": 4,"hero_type2": 1,"skin_name": "荷鲁斯之眼"},{"id": 522,"cname": "曜","title": "星辰之子","new_type": 0,"hero_type": 1,"skin_name": "归虚梦演"},{"id": 518,"cname": "马超","title": "冷晖之枪","new_type": 0,"hero_type": 1,"hero_type2": 4},{"id": 523,"cname": "西施","title": "幻纱之灵","new_type": 0,"hero_type": 2,"skin_name": "幻纱之灵|归虚梦演"},{"id": 525,"cname": "鲁班大师","title": "神匠","new_type": 0,"hero_type": 6,"skin_name": "神匠|归虚梦演"},{"id": 524,"cname": "蒙犽","title": "烈炮小子","new_type": 0,"hero_type": 5,"skin_name": "烈炮小子|归虚梦演"},{"id": 531,"cname": "镜","title": "破镜之刃","new_type": 0,"hero_type": 4,"skin_name": "破镜之刃|冰刃幻境"},{"id": 527,"cname": "蒙恬","title": "秩序统将","new_type": 0,"hero_type": 1,"skin_name": "秩序统将|秩序猎龙将"}]
}
3 通过json-server生成接口
$ json-server herolist.json\{^_^}/ hi!Loading herolist.jsonDoneResourceshttp://localhost:3000/heroHomehttp://localhost:3000Type s + enter at any time to create a snapshot of the database
4 页面的编写
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="lib/axios.min.js"></script><script src="lib/vue.js"></script><link rel="stylesheet" href="./lib/bootstrap.min.css"><script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body><div id="app"><div class="container "><header><h1 >用户管理 </h1><button class="btn btn-primary btn-success" data-toggle="modal" data-target="#myModal">添加英雄</button><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">添加英雄</h4></div><div class="modal-body"><form><div class="input-group"><span class="input-group-addon">英雄名称:</span><input type="text" class="form-control" placeholder="请输入英雄名称" v-model="cname"></div><br><div class="input-group"><span class="input-group-addon">英雄描述:</span><input type="text" class="form-control" placeholder="请输入英雄描述" v-model="title"></div><br><div class="input-group"><span class="input-group-addon">英雄类型:</span><input type="text" class="form-control" placeholder="请输入英雄类型" v-model="hero_type"></div><br><div class="input-group"><span class="input-group-addon">英雄皮肤名称:</span><input type="text" class="form-control" placeholder="请输入英雄皮肤名称" v-model="skin_name"></div><br></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" @click="addHero">确定添加</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div></header><table class="table table-hover  table-bordered table-striped"><thead><tr><th>英雄id</th><th>英雄名称</th><th>英雄描述</th><th>英雄类型</th><th>英雄皮肤</th><th>英雄操作</th></tr></thead><tbody><tr v-for="(hero,index) in heros" :key="hero.id"><td>{{hero.id}}</td><td>{{hero.cname}}</td><td>{{hero.title}}</td><td>{{hero.hero_type}}</td><td>{{hero.skin_name}}</td><td><button class="btn btn-info" data-toggle="modal" data-target="#update" @click="getId(hero.id,hero.cname,hero.title,hero.hero_type,hero.skin_name)">编辑</button><div class="modal fade" id="update" tabindex="0" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" >编辑英雄</h4></div><div class="modal-body"><form ><div class="input-group"><span class="input-group-addon">英雄ID:</span><input type="text" class="form-control" placeholder="请输入英雄ID" v-model="selectedId"></div><br><div class="input-group"><span class="input-group-addon">英雄名称:</span><input type="text" class="form-control" placeholder="请输入英雄名称" v-model="cname1"></div><br><div class="input-group"><span class="input-group-addon">英雄描述:</span><input type="text" class="form-control" placeholder="请输入英雄描述" v-model="title1"></div><br><div class="input-group"><span class="input-group-addon">英雄类型:</span><input type="text" class="form-control" placeholder="请输入英雄类型" v-model="hero_type1"></div><br><div class="input-group"><span class="input-group-addon">英雄皮肤名称:</span><input type="text" class="form-control" placeholder="请输入英雄皮肤名称" v-model="skin_name1"></div><br></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary" @click="update(selectedId)">确定修改</button></div></div><!-- /.modal-content --></div><!-- /.modal --></div><button class="btn btn-danger" @click="deleteHero(hero.id)">删除</button></td></tr></tbody></table></div>
</div>
<script src="js/hero.js">
</script></body>
</html>
5 hero.js文件编写
new Vue({el:"#app",data:{heros:[],id:0,cname:"",title:"",hero_type:"",skin_name:"",selectedId:0,cname1:"",title1:"",hero_type1:"",skin_name1:"",},created(){this.getHero();},methods:{//得到所有英雄async  getHero(){const res=await axios.get(" http://localhost:3000/hero");this.heros=res.data;},//添加英雄async addHero(){let obj={cname:this.cname,title:this.title,hero_type:this.hero_type,skin_name:this.skin_name,}const res=await axios.post(" http://localhost:3000/hero",obj);this.getHero();},//删除英雄async deleteHero(id){const res=await axios.delete(" http://localhost:3000/hero/"+id);this.getHero()},//修改英雄async getId(id,name,title,type,skin){this.selectedId=id;this.cname1=name;this.title1=title;this.hero_type1=type;this.skin_name1=skin;},async update(id){// console.log(id)console.log(id);let updateData={cname:this.cname1,title:this.title1,hero_type:this.hero_type1,skin_name:this.skin_name1}const res=await  axios.put(" http://localhost:3000/hero/"+id, updateData)this.getHero()}}
})

6 访问和效果

vue day02 笔记(回顾+json-server用法)相关推荐

  1. vue学习笔记-接口调用fetch用法

    一,fetch概述 二,fetch基本用法 第一个then是fetch的一部分,返回一个promise对象,于是可以继续用then来处理返回的结果ret. 这段代码是服务器的代码: //这是在创建服务 ...

  2. Vue学习笔记：axios 拦截器的用法

    Vue学习笔记:axios 拦截器的用法 什么是axios 拦截器? 拦截器就是拦截每一次的请求和响应,然后进行相应的处理.请求拦截器,它可以统一在你发送请求前在请求体里加上token:响应拦截器,是 ...

  3. Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决

    文章目录 一.参考资料 二.运行环境 三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名 四.GitHu ...

  4. Vue学习笔记（三） —— 前后端交互

    简介 本文主要是为了介绍前端交互的相关知识,而严格来讲,这也不算是Vue的专属知识,但是却是必须要指定的.本文开始简单说了ajax.jquery 的方式,但是随着SPA开发模式的大火,相继出现了一些新 ...

  5. 【Vue】Vue学习笔记——UI组件库和常用插件

    文章目录 6. UI组件库和常用插件 6.1 Element-ui 6.2 Vue-router 6.2.1 基本用法 6.2.2 跳转 6.2.3 路由嵌套 6.2.4 路由参数传递 6.3 Axi ...

  6. 2022年最新《谷粒商城开发教程》：2 - vue 简要笔记

    Java工程师的进阶之路 代码地址 1 - 构建工程篇 2 - vue 简要笔记 3 - 商品服务-API-三级分类 4 - 商品服务-API-品牌管理 5 - 商品服务-API-属性分组 目录 一. ...

  7. Vue学习笔记1-什么是Vue

    Vue学习笔记1-什么是Vue 一.什么是 Vue? 渐进式 JavaScript 框架,一款用于构建 Web 界面,易学易用,性能出色且功能丰富的框架. Vue (发音为 /vjuː/,类似 vie ...

  8. 菜鸟Vue学习笔记（三）

    菜鸟Vue学习笔记(三) 本周使用了Vue来操作表单,接下来说下Vue中双向绑定表单元素的用法. Vue中双向绑定是使用的v-model,所谓的双向绑定即改变变量的值,表单元素的值也会改变,同样的,改 ...

  9. Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue

    Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...

  10. Vue学习笔记入门篇——数据及DOM

    本文为转载,原文:Vue学习笔记入门篇--数据及DOM 数据 data 类型 Object | Function 详细 Vue 实例的数据对象.Vue 将会递归将 data 的属性转换为 getter ...

最新文章

  1. R语言使用caret包的preProcess函数进行数据预处理：对所有的数据列进行独立成分分析ICA（Independent components analysis）、设置method参数为ica
  2. 建模大师怎么安装到revit中_「Revit技巧」插件挤满了、冲突了，怎么办？
  3. 通俗易懂的sys.argv[]的用法
  4. Hive中JOIN操作
  5. 深入理解 SAP Fiori Elements 工作原理系列之二：如何给 SAP Fiori Elements 应用添加自定义按钮
  6. 计算机网络按拓扑结构可分为三种基本型,2012年计算机三级网络技术基本概念与名词解释（3）...
  7. 成都python数据分析师职业技能_Python+大数据分析师
  8. （九）演员-评论员算法
  9. JS权威指南阅读笔记
  10. opencv imread 读入图像为空
  11. 中介者模式(Mediator) 笔记
  12. 南昌二中高考2021成绩查询,南昌二中2019高考成绩喜报、一本二本上线人数情况...
  13. luogu P1724 东风谷早苗
  14. 微软Excel 2007 框里打钩/打钩的方框选择
  15. Hololens2开发 登录设备网页第三方观看忘记密码怎么办
  16. 设置windows开机隐藏启动，隐藏欢迎界面
  17. 图解蓝牙 BR/EDR 和BLE的区别
  18. oracle索引的一些实践
  19. 程序员如何通过造轮子走向人生巅峰？
  20. Java三大特性/四大特性简单理解

热门文章

  1. php论坛首页一般是什么,bbs是什么
  2. 国庆长假自驾游推荐路线
  3. 消费评价网 | 线上保险消费调查报告 虚假宣传多 捆绑销售坑人
  4. 朴素贝叶斯解决凉鞋问题
  5. 私募基金相关知识介绍（一）——TOT
  6. python 存根_如何用Python编写类方法的存根
  7. Unix时间戳一天是多少？
  8. UBuntu安装CGI环境
  9. 图像处理零件尺寸测量matlab,题目基于数字图像处理技术的零件几何尺寸测量.doc...
  10. WebSocket实现简单多人聊天