美文网首页
Vue-基础-06-重点

Vue-基础-06-重点

作者: 这是这时 | 来源:发表于2019-05-07 14:27 被阅读0次

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.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="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.route.params.id, this.formdata ) .then(res => { // console.log(res); // 修改成功 回到列表组件 this.router.push({
name: "list"
});
});
},</pre>

编辑功能:

  1. 显示页面
  1. 显示要编辑的数据
  1. 发送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 = axios; // -> 任何一个Vue实例对象this都可以this.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全都有

相关文章

  • Vue-基础-06-重点

    Vue-基础-day06-重点 01-基础-heroes-案例-提取路由模块 把入口文件中的router代码提取单...

  • Vue-基础-05-重点

    Vue-基础-day05-重点 01-基础-路由-vue-router-嵌套路由 children用法和route...

  • Vue-基础-03-重点

    Vue-基础-day03-重点 01-基础-实例选项-计算属性-基本使用 场景:b依赖a b就是computed...

  • Vue-基础-day06-重点

    Vue-基础-day06-重点 01-基础-heroes-案例-提取路由模块 把入口文件中的router代码提取单...

  • Vue-基础-04-重点

    Vue-基础-day04-重点 01-基础-组件-局部组件 组件: 封装html+css+js 两类+三步 定义 ...

  • vue-路由基础

    router-link和router-view组件