Vue-基础-06-重点

Vue-基础-day06-重点

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

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

1. 新建router.js

2. 导出router

3. 在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-案例-列表渲染

1. npm i axios

2. 导入axios

3. axios.get()->请求成功后 this.list=res.data

4. v-for="(item,i) in list" :key="i"

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

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

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

1. applist.vue 绑定事件+编程式导航->name="add"

2. 新建add.vue

3. router.js 配置路由add

4. 调整add.vue的template内容

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

1. 点击添加->渲染组件

2. 点击add.vue中的btn->发送post请求

add.vue

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n70" 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-案例-编辑-渲染编辑组件

1. 新建edit.vue (和add.vue一样)

2. applist.vue 编程式导航 -> 修改标识

3. router.js 导入edit.vue + 配置路由

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

applist.vue

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n89" 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.route.params.id
params: { id: ID }
});
},</pre>

router.js

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n92" 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="n95" 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="n101" 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.router.push({
name: "list"
});
});
},</pre>

编辑功能:

1. 显示页面

2. 显示要编辑的数据

3. 发送put请求

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

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

main.js

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n121" 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
​</pre>

其他组件的js代码

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n124" 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;">
this.$http.get/post()</pre>

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

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

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

main.js

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n135" 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="n138" 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-案例-优化-目录划分-统一设置激活样式

1. 目录拆分->便于管理

2. 统一设置激活routerlink的类名

<pre class="md-fences md-end-block" lang="js" contenteditable="false" cid="n150" 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元素时 都可以使用过度

1. 自己写样式(6个类名)

2. 结合animate.css 使用过度效果

步骤:

1. 给希望有过度的元素外层包裹transition组件

2. 在6个类名中设置过度样式代码或者使用第三方动画库的类名

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

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

1. created(){} vm创建完毕 ->获取首屏的数据 this.getData()

2. mounted(){} 挂载完毕-> 操作dom元素

3. 02-其他资源/.png要求记住!(面试问!)

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

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

1. created -> 有data数据 没有el

2. mounted -> data/el/data中的msg全都有