基础-单页应用-SPA的特点
目标掌握SPA的特点
- 传统模式 每个页面及其内容都需要从服务器一次次请求 如果网络差, 体验则会感觉很慢
- spa模式, 第一次加载 会将所有的资源都请求到页面 模块之间切换不会再请求服务器
SPA优点
- 用户体验好,因为前端操作几乎感受不到网络的延迟
- 完全组件化开发 ,由于只有一个页面,所以原来属于一个个页面的工作被归类为一个个组件.
缺点
- 首屏加载慢->按需加载 不刷新页面 之请求js模块
- 不利于SEO->服务端渲染(node->自己写路由->express-art-template+res.render())
- 开发难度高(框架) 相对于传统模式,有一些学习成本和应用成本
vue适合开发SPA->什么是SPA+SPA特点
SPA不利于SEO->搜索引擎排名靠前->搜素引擎机制->搜索引擎不能去找到局部刷新的网站内容
基础-单页应用-SPA-实现原理
目标掌握前段SPA的实现原理
- SPA要实现 能够在前端自由切换模块
- SPA要能记忆当前切换的模块,并且刷新页面模块依然还在当前视图
- SPA要实现在前端切换模块时,不能引起页面刷新,否则页面内容会被重置
结论
- 可以通过页面地址的锚链接来实现
- hash(锚链接)位于链接地址 **
#**之后- hash值的改变**
不会触发**页面刷新- hash值是url地址的一部分,会存储在页面地址上 我们可以获取到
- 可以通过**
事件监听**hash值得改变- 拿到了hash值,就可以根据不同的hash值进行不同的**
模块切换**
基础-路由-js实现路由
目标掌握如何用纯js逻辑实现一个前端路由功能
- 通过上一个小节内容可以得出 采用hash值改变的特性来进行前端路由切换
任务
- 在页面上实现4个链接,北京,上海,天津,重庆
- 实现点击4个链接时,页面上显示对应的城市名称
- 并且刷新页面之后,上次切换的城市还在
路径: 1. 实现导航结构
2. 监听hash改变
3. 根据改变切换视图
关于具体实现参考课程提供的代码
基础-路由-vue-router-文档
目标了解vue-router是什么
- Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
- 实现根据不同的请求地址 而**
显示不同的组件**- 如果要使用 vue开发项目,前端路由功能**
必须使用**vue-router来实现
基础-路由-vue-router-体验及使用步骤
**
目标**掌握如何在页面中使用vue-router
- 导入vue和vue-router
- 设置HTML中的内容
<!-- router-link 最终会被渲染成a标签，to指定路由的跳转地址 --> <router-link to="/users">用户管理</router-link> <!-- 路由匹配到的组件将渲染在这里 --> <router-view></router-view>
- 创建组件
// 创建组件 // 组件也可以放到单独的js文件中 var Home = { template: '<div>这是Home内容</div>' }; var Users = { template: '<div>这是用户管理内容</div>' };
- 实例化路由对象,配置路由规则
// 配置路由规则 var router = new VueRouter({ routes: [ { name: 'home', path: '/', component: Home }, { name: 'users', path: '/users', component: Users } ] });
- vue实例挂载router实例
var vm = new Vue({ el: '#app', router });
基础-路由-vue-router-动态路由
**
目标**掌握Vue-router的动态路由如何使用
- 点击列表页 跳转到详情页时,跳转的链接需要携带参数,会导致path不同
- 当path不同却需要对应同一个组件时,需要用到动态路由这一概念
此时可以通过路由传参来实现，具体步骤如下：
路由规则中增加参数，在path最后增加 :id
{ name: 'users', path: '/users/:id', component: Users },通过 传参，在路径上传入具体的值
<router-link to="/users/120">用户管理</router-link>在组件内部可以使用，this.$route 获取当前路由对象
var Users = { template: '<div>这是用户管理内容 { { $route.params.id }}</div>', mounted() { console.log(this.$route.params.id); } };
基础-路由-vue-router-to属性赋值
**
目标**掌握 vue-router中的to的多种赋值方式
- to 有多种赋值方式
<!-- 常规跳转 -->
<!-- <router-link to="/sport">体育</router-link> -->
<!-- 变量 -->
<!-- <router-link :to="path">体育</router-link> -->
<!-- 根据对象name跳转 -->
<!-- <router-link :to="{name:'abcdefg'}">体育</router-link> -->
<!-- 根据对象path跳转 -->
<!-- <router-link :to="{path:'/sport'}">体育</router-link> -->
<!-- 带参数的跳转 -->
<router-link :to="{name:'abcdefg',params:{a:1}}">体育</router-link>
任务
- 用vue-router实例化路由
- 导航为 北京 上海
- 分别采用四种赋值方式 将上海跳转到对应的组件
- 在北京跳转时 实现 带参数的跳转
关于具体实现参考课程提供的代码
基础-路由-vue-router-重定向
**
目标**掌握路由-vue-router-重定向场景: 当希望某个页面被强制中转时 可采用redirect 进行路由重定向设置
{ path: "/sport", redirect: "/news", // 强制跳转新闻页 component: { template: `<div>体育</div>` } },
任务
- 实例化一个vue路由
- 导航为 bj => 北京 sh => 上海 tj => 天津
- 实现当跳转到天津时 直接重定向到北京
关于具体实现参考课程提供的代码
基础-路由-vue-router-编程式导航
**
目标**掌握路由-vue-router-编程式导航
- 跳转不同的组件 不仅仅可以用router-link 还可以采用代码行为
- (Vue实例)this.$router 可以拿到当前路由对象的实例
- 路由对象的实例方法 有 push replace, go() goBack
- push 方法 相当于往历史记录里推了一条记录 如果点击返回 会回到上一次的地址
- replace方法 想相当于替换了当前的记录 历史记录并没有多 但是地址会变
- go(数字) 代表希望是前进还是回退,当数字大于0 时 就是前进 n(数字)次,小于0时,就是后退n(数字)次
- goBack() 代表返回上个页面
可以通过vue实例 获取当前的路由实例 $router
goPage() { // 跳转到新闻页面 this.$router.push({ path: "/news" }); }
基础-路由-vue-router-routerlink-tag-激活样式
目标: 掌握如何设置当前激活路由的样式
- 当前路由在导航中是拥有激活class样式的
审查导航元素,可以发现 激活样式
<a href="#/news" class="router-link-exact-active router-link-active">新闻</a>设置激活class样式即可
基础-路由-vue-router-动态路由
**
目标**掌握Vue-router的动态路由如何使用
- 点击**
列表页** 跳转到**详情页时,跳转的链接需要携带参数,会导致页面path**不同- 当**
页面path不同却需要对应同一个组件时,需要用到动态路由**这一概念此时可以通过路由传参来实现，具体步骤如下：
id是可以随意命名的,
- 路由规则中增加参数，在path最后增加 :
id
注意这里的id相当于我们给路由加了参数 叫做id{ name: 'users', path: '/users/:id', component: Users },
- 通过 传参，在路径上传入具体的值(
实参)<router-link to="/users/120">用户管理</router-link>
- 在组件内部可以使用，
this.$route获取当前路由对象 并通过**params获取定义的参数id**var Users = { template: '<div>这是用户管理内容 { { $route.params.id }}</div>', mounted() { console.log(this.$route.params.id); } };
路由规则 匹配路径 $route.params /user/:username /user/evan { username: 'evan' }/user/:username/post/:post_id /user/evan/post/123 { username: 'evan', post_id: '123' }
基础-路由-vue-router-to属性赋值
**
目标**掌握 vue-router中的to的多种赋值方式
- to 有多种赋值方式
<!-- 常规跳转 -->
<!-- <router-link to="/sport">体育</router-link> -->
<!-- 变量 -->
<!-- <router-link :to="path">体育</router-link> -->
<!-- 根据对象name跳转 -->
<!-- <router-link :to="{name:'abcdefg'}">体育</router-link> -->
<!-- 根据对象path跳转 -->
<!-- <router-link :to="{path:'/sport'}">体育</router-link> -->
<!-- 带参数的跳转 -->
<router-link :to="{name:'abcdefg',params:{a:1}}">体育</router-link>
注意：如果提供了 path，params 会被忽略，上述例子中的name并不属于这种情，你可以提供路由的 name 并手写完整的参数params：
基础-路由-vue-router-重定向
**
目标**掌握路由-vue-router-重定向场景: 当希望某个页面被**
强制中转时 可采用redirect** 进行**路由重定向**设置{ path: "/sport", redirect: "/news", // 强制跳转新闻页 component: { template: `<div>体育</div>` } },
任务
- 实例化一个vue路由
- 导航为 bj => 北京 sh => 上海 tj => 天津
- 实现当跳转到天津时 直接重定向到北京
关于具体实现参考课程提供的代码
基础-路由-vue-router-编程式导航
**
目标**掌握路由-vue-router-编程式导航
- 跳转不同的组件 不仅仅可以用router-link 还可以采用**
代码行为**- (Vue实例)this.
$router可以拿到当前**路由对象的实例**- 路由对象的实例方法 有 push replace, go()
push 方法相当于往历史记录里**推**了一条记录 如果点击返回 会回到上一次的地址- **
replace方法 想相当于替换**了当前的记录 历史记录并没有多 但是地址会变go(数字) 代表希望是前进还是回退,当**数字大于0** 时 就是前进 n(数字)次,小于0时,就是后退n(数字)次可以通过vue实例 获取当前的路由实例 $router
goPage() { // 跳转到新闻页面 this.$router.push({ path: "/news" }); }
任务
- 实例化一个导航路由
- 导航为 A, B, C ,D
- 实现A => B , B => C, 然后从C返回时,直接回到A
- 实现A => B ,B => C , C =>D 从D返回时 不能返回
- 实现A => B ,B => C , C =>D 从D返回直接返回到A 在A中直接前进到D
基础-路由-vue-router-routerlink-tag-激活样式
目标: 掌握如何设置当前激活路由的样式
- 当前路由在导航中是拥有激活class样式的
审查导航元素,可以发现 激活样式
<a href="#/news" class="router-link-exact-active router-link-active">新闻</a>设置激活class样式即可
任务
- 实例化一个vue-router导航
- 北京- 上海- 天津
- 让当前路由的导航 字体48px 加粗 颜色红色
基础-路由-vue-router-嵌套路由
目标掌握如何实现一个嵌套路由
- 如果存在**
路由嵌套**,就需要提供多个视图容器- 同时,router-link和router-view 都可以添加类名、设定样式
任务
- 实现一个嵌套路由
- 第一级路由为 热点 教育 社会 音乐
- 音乐下 二级路由为 流行.古典.爵士
要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
即
{ path:'/music', children:{ path:'/pop' //此时该条路由 就是 /pop } } // 如果想使用 /music/pop 可以这样 { path:'/music', children:{ path:'/music/pop' //此时该条路由 就是 /music/pop } } // 或者 { path:'/music', children:{ path:'pop' //此时该条路由 就是 /music/pop } }**
注意**如果一个需要给子路由一个默认的显示 可以配置一个默认的选项{ path: '/user/:id', component: User, children: [ // 当 /user/:id 匹配成功， // UserHome 会被渲染在 User 的 <router-view> 中 { path: '', component: UserHome }, // ...其他子路由 ] }路径: 实现一个嵌套路由
1 引入vue-router
2 页面导航
3 页面视图 => 子视图
4 实例化router
5 router选项
6 挂载router
// 实例化 router var router = new VueRouter({ routes: [ { path: "/hot", component: { template: ` <div>热点</div> ` } }, { path: "/tech", component: { template: ` <div>教育</div> ` } }, { path: "/soc", component: { template: ` <div>社会</div> ` } }, { path: "/music", component: { template: ` <div> <router-link to="/music/pop">流行</router-link> <router-link to="/music/tra">古典</router-link> <router-link to="/music/jazz">爵士</router-link> <router-view></router-view> </div> ` // 组件中放入 嵌套的导航 和视图容器 }, // children承载嵌套路由对象 children: [ { path: "/music/pop", component: { template: `<div> 流行音乐 </div> ` } }, { path: "/music/tra", component: { template: `<div> 古典音乐 </div> ` } }, { path: "/music/jazz", component: { template: `<div> 爵士音乐 </div> ` } } ] }, { path: "/sport", component: { template: ` <div>体育</div> ` } } ] }); var vm = new Vue({ el: "#app", data: { }, methods: { }, router }); </script>
在 CSS 过渡和动画
**
目标**掌握如何在过渡动画的应用
- 基本用法就是给我们需要动画的标签外面嵌套**
transition标签 ,并且设置name属性**(也可以不设置)- Vue 提供了
transition的封装组件，在下列元素更新,移除，新增 情形中，可以给任何元素和组件添加进入/离开过渡- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IEKYZLuQ-1582443349918)(C:\Users\1\AppData\Roaming\Typora\typora-user-images\1563292771195.png)]
<transition name="slide"> <div v-if="show" >动态显示内容</div> </transition>6中class状态
- v-enter：定义进入过渡的开始状态。
- v-enter-active：定义进入过渡生效时的状态。(需要写transtion)
- v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。
- v-leave: 定义离开过渡的开始状态。
- v-leave-active：定义离开过渡生效时的状态。
- v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。
注意 v要替换成transition组件的name属性值
**注意**先要编写元素的最终展示样式
任务
- 实现一个div 显示时 从小到大过渡
- 实现该div隐藏时 从大到小
基础-vue-cli工具介绍
,**
目标**了解vue-cli是什么东西 脚手架
- 介绍: vue-cli是一个**
辅助开发工具**=>代码编译+样式+语法校验+输出设置+ 其他 …- 作用: 可以为开发者提供一个**
标准的项目开发结构** 和配置 开发者不需要再关注- vue-cli 一个**
命令行**工具,最新版本也支持图形化操作,可快速搭建大型网页应用
基础-vue-cli安装和2-3版本解释
**
目标**掌握vue-cli的版本安装说明:vue-cli本质上是一个npm包,也需要通过npm去安装下载
npm i -g @vue/cli // 全局安装脚手架 默认安装的最新版本 3.0+安装完成后 可通过 **
vue命令**来进行检查 脚手架是否安装成功**
npm**是服务器搭建与外网 (国外),淘宝提供一种**
国内**的镜像 就是淘宝镜像# 注册淘宝镜像 $ npm install -g cnpm --registry=https://registry.npm.taobao.org # 执行完毕之后 cnpm 完全可替代npm注意 vue-cli的命令行 关键字 是vue
查看版本
vue -V // 查看脚手架版本号 or vue --version // 和上面等价
注意: 默认安装的3.0+ 版本,但是企业很多还在用2.0+版本 怎么破?执行以下命令就可以 2.0 和 3.0 兼得
2.0 和 3.0 **
创建项目**的命令不同的npm install -g @vue/cli-init // 安装桥接工具 将2.0的功能补齐到目前的脚手架上注意 vue生成的模板的有难有易
- 简单业务 => 简易模板
- 复杂业务 => 内容丰富模板
任务
- 安装vue-cli脚手架 并 将2.0版本的补丁打到当前版本
基础-vue-cli创建项目
目标学会使用vue-cli 2.0特性创建项目创建项目: 采用 cli 2.0的特性 (生成简易模板)
# heroes 创建的项目名称 $ vue init webpack-simple heroes // webpack-simple 为模板名称 固定写法 # 切换到当前目录 $ cd heroes # 在开发模式下 启动运行项目 $ npm run dev创建项目: 采用 cli 3.0 特性 (两种 默认 /选填)
# 3.0下创建项目 $ vue create heroes // create(创建) 为关键字 # 切换到当前目录 $ cd heroes # 在开发模式下 启动运行项目 $ npm run serve注意 3.0 +创建项目时 有两种模式, 一种默认模式, 一种选择模式,
默认模式:一种标准的模板
选择模式 可以根据自己的需求选择需要的工具和模式
任务
- 分别使用vue-cli 2.0 和 3.0特性创建一个叫做heroes的项目
- 分别启动运行
基础-vue-cli项目目录解释
**
目标**对2.0项目目录生成的模板文件进行识别认识node_modules => 存放包依赖文件 (不能提交)
.bablelrc=>存放 babel编译的配置信息 => ES7/ES6 => ES5 => ES3
.editorconfig => 存放编辑器的配置信息
.gitignore => git忽略文件 => 忽略**
不需要提交**的文件index.html => 单页应用的html
package.json => 用于存放依赖信息 及 其他项目信息
README.md => 项目介绍信息 github上的页面信息
webpack.config.js => wepack工具的配置文件 => webpack是一个前端工程化的工具
基础-回顾-ES6模块的导入和导出
**目标**回顾ES6的导入导出
- 正常开发过程中 一个文件就是一个组件 =>
拆解任务 - 组件嵌套 => 父组件 => 子组件 =>引入子组件 =>import 别名 from 路径(第三方 可以直接写 名称 package.json中的名称) => import 导入的前提是 ?=> 必须导出 export default 导出对象 { }
- var obj = { } => export default {} import 别名 from 路径
ES6提供import 别名 from 路径 语法 来引入 组件
提供 export default { } 语法来导出组件
上面的代码 换成import
export default vue //导出对象 vueimport vue from 'vue'扩展—
export const function fn1() { } // 方法1 export const function fn2() { } // 方法2 export const function fn3() { } // 方法3import { fn1,fn2, fn3 } from '文件'
基础-Vue-单文件组件及入口解析
目标掌握认识 Vue的单文件组件**
注意**Vue 选项中的render函数若存在，则 Vue 构造函数不会从template选项或通过el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。介绍: 在cli开发模式下, 一个*.vue文件就是**
一个组件**
template组件的页面结构 代表它的 html 结构
- 必须在里面放置一个 html 标签来包裹所有的代码
我们在其他地方写好了一个组件，然后就可以在当前template中引入
script组件的逻辑结构及数据对象export default { // 这里写你的代码,如 data:, props: // 省略 };
style组件的样式就是针对我们的 template 里内容出现的 html 元素写一些样式
注意: vue-cli的作用就是让我们把精力放在业务编码上,一切准备的工作交给vue-cli去做
任务
- 新建一个名为 Menu的组件
- 内容为 一个横向菜单 商城 团购 拼团 省钱帮
- 菜单高60px 水平居中 字体大小为20px 颜色为 red 背景色 为 #CCCCCC
- 实现组件在页面上展示
基础-示例项目效果演示
**
目标**演示示例项目的最终效果 分拆功能
基础-示例项目-导入素材处理样式
目标-任务:将项目所需样式导入到项目中
- 安装 bootstrap固定版本
- –save（装到dependencies） 和 --save–dev(装到devDependencies)
npm i [email protected]安装完成之后 ,在入口处引入js文件
import "./../node_modules/bootstrap/dist/css/bootstrap.css"; // 引入 bootstarp的样式文件 import "./assets/index.css"; // 引入index.css重启运行,发现bootstrap.css文件 运行报错
根据错误 需要在webpack.config.js增加对不识别文件的处理
{ test: /.(ttf|woff2|woff|eot)$/, loader: "file-loader", options: { name: "[name].[ext]?[hash]" } }
基础-示例项目-提取公共组件-头部-侧边栏-列表,并预览效果
目标-任务:将静态内容的 头部 侧边栏 , 列表分别封装成Vue组件 ,并在视图中显示
路径提取组件
新建vue文件
拷贝html静态内容到 template中
在app.vue中引入注册组件
注册在app.vue的组件中
在app.vue的模板中使用注册组件
基础-示例项目-提取路由模块
目标-任务 在示例项目中 提取路由模块,并应用视图
路径提取路由模块1 安装路由
npm i vue-router // 安装路由模块2 在main.js中引入 路由模块
import VueRouter from 'vue-router ' // 引用router3 使用router
Vue.use(VueRouter) // 使用router4 实例化 router
const router = new VueRouter({ routes:[] //实例化routes })5 配置理由表
const router = new VueRouter({ routes: [ { path: "/heroes", component: AppList }, { path: "/foo", component: Foo }, { path: "/bar", component: Bar } ] // 路由表 }); // 实例化router注意 一般来说 路由表 需要单独一个文件 可以将router提取成一个js文件
6 提取 三个组件 appList(主要 ) Foo(组件) Bar(组件) 完善路由表
<template> <div>Bar组件</div> </template> <script> export default { }; </script> <style> </style>7 在App.vue中假如路由承载视图
<div> <AppHeader></AppHeader> <div class="row"> <AppSilder></AppSilder> <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"> <router-view></router-view> // 加入承载视图 </div> </div> </div>
基础-示例项目-json-server-启动接口服务器
**
目标-任务**准备json-server服务器.启动实现 数据接口 增删改查的联通
路径: 启动json-server服务器1 安装json-server
注意 json-server 是一个命令行工具,和vue以及vue-cli没有任何关系 所以安装在任何位置都可以
npm i -g json-server // 安装json-server2 新建json文件
{ "heroes": [ { "name": "张三", "id": 1, "gender": "男" }, { "name": "李白", "id": 2, "gender": "女" }, { "name": "吕布", "id": 3, "gender": "男" } ] }3 启动json-server
json-server --watch db.json
基础-示例项目-列表渲染
**
目标-任务**完成英雄列表的数据加载及渲染
路径:1 安装axios 插件
npm i axios // 安装axios插件2 英雄列表组件中引入 axios ,
import axiod from 'axios' // 引入axios3 定义数据list
data() { return { list: [] }; }4 请求英雄列表的方法封装
loadData() { //restful规则 axois.get("http:localhost:3000/heros").then(result => { this.list = result.data; }); }5 在事件中加入 请求方法
// 实例完成事件 created() { //可以加 this.loadData(); },6 渲染列表list
基础-示例项目-删除功能
**
目标**实现英雄列表的删除功能路径: 删除功能
1 注册删除事件
<a href="javascript:void(0)" @click="delItem(item.id)">删除</a>2 定义删除方法 实现删除逻辑
// 定义删除方法 // id为要删除id的方法 delItem(id) { // restful规则 if (confirm("确认删除此条数据")) { axios.delete("http://localhost:3000/heroes" + id).then(result => { if (result.status === 200) { // 判断删除状态 是否成功 this.loadData(); // 刷新数据 } }); } }3 根据状态 进行刷新页面
this.loadData(); // 刷新数据
基础-示例项目-添加-渲染添加组件
**
目标-任务**添加组件功能的静态实现路径: 添加视图的实现
1 新建add.vue组件 并写入静态内容(拷贝)
<!-- 添加静态内容到template模板下 --> <div> <h2 class="sub-header">添加英雄</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <!-- 使用v-model的方式来绑定表单 --> <input v-model="formData.name" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名" /> </div> <div class="form-group"> <label for="exampleInputPassword1">性别</label> <input v-model="formData.gender" type="text" class="form-control" id="exampleInputPassword1" placeholder="请输入性别" /> </div> <!-- 给添加英雄按钮注册一个事件 --> <button type="submit" class="btn btn-success" @click="addHero">添加英雄</button> </form> </div>2 在路由表中配置添加功能的路由
{ path: "/add", component: Add } // 引入组件 配置路由3 给列表组件中的添加按钮 添加l导航 到添加功能路由的导航
<!-- 给添加功能添加路由导航 --> <a class="btn btn-success" href="#/add">添加</a>4 根据业务场景调整页面模板
<div> <h2 class="sub-header">添加英雄</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名" /> </div> <div class="form-group"> <label for="exampleInputPassword1">性别</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入性别" /> </div> <button type="submit" class="btn btn-success">添加英雄</button> </form> </div>
基础-示例项目-添加-功能实现
目标-任务实现添加英雄的功能
路径: 添加功能的实现1 定义表单数据 和 表单进行绑定
data() { return { // 定义一个数据对象 存储 姓名和性别 formData: { name: "", // 姓名 gender: "" // 性别 } }; } //定义一个数据对象2 注册添加按钮的点击事件
<!-- 给添加英雄按钮注册一个事件 --> <button type="submit" class="btn btn-success" @click="addHero">添加英雄</button>3 实现 添加的前后逻辑
// 添加英雄方法 addHero() { // 判断填报信息是否为空 if (this.formData.name && this.formData.gender) { // 该判断条件是判断 当前的姓名和 性别都不为空 // restful规则 axios .post("http://localhost:3000/heroes", this.formData) .then(result => { // 注意这里添加成功的状态码 是 201 if (result.status === 201) { // 添加成功之后 要跳转回列表页 // 编程式导航 this.$router.push({ path: "/heroes" }); } else { alert("添加失败"); } }); } else { alert("提交信息不能为空"); } }
基础-示例项目-编辑-添加编辑组件
**
目标-任务**实现英雄列表的编辑功能组件渲染路径: 编辑功能渲染
新建编辑组件
注意 由于 编辑组件和添加组件页面结构基本一致 可以 直接拷贝添加组件的内容
<!-- 添加静态内容到template模板下 --> <div> <h2 class="sub-header">添加英雄</h2> <form> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <!-- 使用v-model的方式来绑定表单 --> <input v-model="formData.name" type="text" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名" /> </div> <div class="form-group"> <label for="exampleInputPassword1">性别</label> <input v-model="formData.gender" type="text" class="form-control" id="exampleInputPassword1" placeholder="请输入性别" /> </div> <!-- 给添加英雄按钮注册一个事件 --> <button type="submit" class="btn btn-success" @click="editHero">编辑英雄</button> </form> </div>
基础-示例项目-编辑-显示编辑数据
**
目标-任务**实现英雄列表的编辑功能
路径: 实现编辑的显示数据
- 添加编辑路由 注意 由于需要拿到编辑数据的标识 所以需要动态路由
{ path: "/edit/:id", component: Edit } // 编辑组件 动态路由
- 编辑按钮添加跳转路由的属性
<a class="btn btn-success" href="#/edit">添加</a>
- 定义加载英雄方法 注意 通过 $router.params来获取参数
// 加载英雄 loadHero() { const { id } = this.$route.params; // 通过参数获取id if (id) { //判断id axios.get("http://localhost:3000/heroes/" + id).then(result => { this.formData = result.data; // 获取数据并赋值给表单对象 }); } }
- 在初始化事件中 调用loadHero 方法
// 实例完成事件 created() { this.loadHero(); // 加载英雄 }
基础-示例项目-编辑-表单处理
**
目标-任务**实现英雄列表编辑数据的提交
路径:实现编辑方法定义实现编辑提交方法
// 编辑英雄 editHero() { if (this.formData.name && this.formData.gender) { const { id } = this.$route.params; //restful规则 axios .put("http://localhost:3000/heroes/" + id, this.formData) .then(result => { if (result.status === 200) { this.$router.push({ path: "/heroes" }); } else { alert("编辑失败"); } }); } else { alert("提交内容不能为空"); } }
基础-示例项目-优化-axios统一导入
**
目标-任务**实现axios的统一导入
路径: axios的统一导入 和使用1 在入口main.js文件中引入axios,并给全局Vue对象的原型链赋值
Vue.prototype.$http = Axios; //所有的实例都直接共享拥有了 这个方法2 调用接口时 采用 实例.属性的方式即可调用
addHero() { // 判断填报信息是否为空 if (this.formData.name && this.formData.gender) { // 该判断条件是判断 当前的姓名和 性别都不为空 // restful规则 this.$http .post("http://localhost:3000/heroes", this.formData) .then(result => { // 注意这里添加成功的状态码 是 201 if (result.status === 201) { // 添加成功之后 要跳转回列表页 // 编程式导航 this.$router.push({ path: "/heroes" }); } else { alert("添加失败"); } }); } else { alert("提交信息不能为空"); } }
基础-示例项目-优化-设置baseUrl
**
目标-任务通过配置baseUrl**将所有的请求地址进行优化
路径: axios中配置统一的**请求路径头**
- 给axios中的baseUrl设置常态值
Axios.defaults.baseURL = "http://localhost:3000"; // 设置共享的方法
- 改造所有的的请求
this.$http.put("heroes/" + id, this.formData).then(result => { if (result.status === 200) { this.$router.push({ path: "/heroes" }); } else { alert("编辑失败"); } });
基础–示例项目-优化-目录划分-统一设置激活样式
**
目标-任务**将组件的目录进行整理划分,并统一当前路由的激活样式路径: 左侧导航激活样式 目录划分
1 统一激活样式
linkActiveClass: "active", // active为bootstrap中的 一个class样式2 整理目录 分门别类
注意同一类 组件放入同一个文件夹下 修改引用地址
给切换路由增加过渡效果 (扩展)
**
目标-任务**实现项目中的路由切换过渡
路径: 给路由切换加入 过渡效果1 用过渡组件包裹路由视图
<transition name="slide"> <router-view></router-view> </transition>2 编写 过渡效果
.slide-enter, .slide-leave-to { opacity: 0; } .slide-enter-to, .slide-leave { opacity: 1; } .slide-enter-active { transition: all 1s; }
钩子函数
目标掌握Vue的生命周期及其钩子函数
- 生命周期是指Vue实例或者组件从诞生到消亡经历的每一个阶段，在这些阶段的前后可以设置一些函数当做事件来调用。
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s3bPq9kC-1582443349921)(assets/lifecycle.png)]
- beforeCreate (实例被创建前) -->没啥用
- created(实例被创建后) —>一般在这里加载数据
- beforeMount(文档被挂载前) 可以查数据 但是不能获取元素 用在当不销毁实例的时候 —>不咋用
- mounted(文档被挂载后) 只执行一次 可以操作dom 用来开启定时器
- beforeUpdate(数据变化 页面更新前)不是执行有一次,数据变换就会执行 --> 不咋用
- watch 用来监听就好了
- updated(数据变化 页面更新后) ---->不咋用
- beforeDestory(视图销毁前) ---->如果组件销毁,定时器没有销毁,但在这要清除定时器 clearTimeout
- destoryed(视图销毁后) -->没啥用