Vue-基础-day06-重点

01-基础-heroes-案例-提取路由模块

把入口文件中的router代码提取单独的模块

新建router.js
导出router
在main.js导入

02-基础-heroes-案例-json-server-启动接口服务器

json-server -p 3000 --watch db.json

接下来可以发送请求

applist.vue

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n25" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">data/methods/mounted</pre>

03-基础-heroes-案例-列表渲染

npm i axios
导入axios
axios.get()->请求成功后 this.list=res.data
v-for="(item,i) in list" :key="i"

04-基础-heroes-案例-删除功能

根据item.id删除数据->成功后更新视图this.getData()

05-基础-heroes-案例-添加-渲染添加组件

applist.vue 绑定事件+编程式导航->name="add"
新建add.vue
router.js 配置路由add
调整add.vue的template内容

06-基础-heroes-案例-添加-表单处理

点击添加->渲染组件
点击add.vue中的btn->发送post请求

add.vue

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n68" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
data-> 提供formdata:{name:"",gender:""}
template 使用了v-model绑定数据 ="formdata.name"等
methods->addHere(){axios.post}->请求成功->this.$router.push({name:"list"})</pre>

07-基础-heroes-案例-编辑-渲染编辑组件

新建edit.vue (和add.vue一样)
applist.vue 编程式导航 -> 修改标识
router.js 导入edit.vue + 配置路由

08-基础-heroes-案例-编辑-显示编辑数据

applist.vue

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n87" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
showEditHtml(ID) {
// 将来edit.vue中使用id
this. $router.push({ name: "edit", // 在路由配置生效时传递id //$ route.params.id
params: { id: ID }
});
},</pre>

router.js

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n90" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
{
name: "edit",
// 接收动态参数
// /edit/4
path: "/edit/:id",
component: Edit
}</pre>

edit.vue

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n93" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
methods: {
getHeroById() {
axios
.get("http://localhost:3003/heroes/" + this.$route.params.id)
.then(res => {
// console.log(res);
this.formdata = res.data;
});
}
}</pre>

09-基础-heroes-案例-编辑-表单处理

edit.vue/methods

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n99" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
// 编辑 - 表单处理
editHero() {
axios
.put(
"http://localhost:3003/heroes/" + this. $route.params.id, this.formdata ) .then(res => { // console.log(res); // 修改成功回到列表组件 this.$ router.push({
name: "list"
});
});
},</pre>

编辑功能:

显示页面

显示要编辑的数据

发送put请求

10-基础-heroes-案例-优化-axios 统一导入

axios包每个组件都要用->main.js统一导入

main.js

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n119" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">import axios from "axios"
Vue.prototype. $http = axios; // -> 任何一个Vue实例对象this都可以this.$ http
</pre>

其他组件的js代码

11-基础-heroes-案例-优化-设置 baseUrl

每个请求的url中有一部分是一样->统一一次性设置公共url->

发请求时,统一设置url->看axios特性/功能有没有这个功能

main.js

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n133" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
axios.defaults.baseURL = 'http://localhost:3003/';
</pre>

其他组件.js

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n136" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
deleHero(ID) {
if (confirm("Sure?")) {
// 发送delete请求
this.$http.delete("heroes/" + ID).then(res => {
// console.log(res);
this.getData();
});
}
},</pre>

关于axios 未完待续

12-基础-heroes-案例-优化-目录划分-统一设置激活样式

目录拆分->便于管理
统一设置激活routerlink的类名

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n148" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 0.9em; white-space: pre; text-align: left; break-inside: avoid; display: block; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(221, 221, 221); border-radius: 3px; padding: 8px 1em 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
linkExactActiveClass: "active",
</pre>

active这个类名的样式在assets/css/index.css中

13-基础-过渡-文档分析-代码演示

Vue插入/更新/移除DOM元素时都可以使用过度

自己写样式(6个类名)
结合animate.css 使用过度效果

步骤:

给希望有过度的元素外层包裹transition组件
在6个类名中设置过度样式代码或者使用第三方动画库的类名

注意: 通过transition的name属性可以修改类名前缀

14-基础-钩子函数-文档分析

created(){} vm创建完毕 ->获取首屏的数据 this.getData()
mounted(){} 挂载完毕-> 操作dom元素
02-其他资源/.png要求记住!(面试问!)

eg: 生命周期(1~100岁)钩子函数

15-基础-钩子函数-代码演示

created -> 有data数据没有el
mounted -> data/el/data中的msg全都有