vue基础语法--路由，css过渡与动画，vue-cli工具2.0/3.0建项，钩子函数

基础-单页应用-SPA的特点

目标 掌握SPA的特点

• 传统模式 每个页面及其内容都需要从服务器一次次请求 如果网络差, 体验则会感觉很慢
• spa模式, 第一次加载 会将所有的资源都请求到页面 模块之间切换不会再请求服务器

SPA优点

1. 用户体验好,因为前端操作几乎感受不到网络的延迟
2. 完全组件化开发 ,由于只有一个页面,所以原来属于一个个页面的工作被归类为一个个组件.

缺点

1. 首屏加载慢->按需加载 不刷新页面 之请求js模块
2. 不利于SEO->服务端渲染(node->自己写路由->express-art-template+res.render())
3. 开发难度高(框架) 相对于传统模式,有一些学习成本和应用成本

vue适合开发SPA->什么是SPA+SPA特点

SPA不利于SEO->搜索引擎排名靠前->搜素引擎机制->搜索引擎不能去找到局部刷新的网站内容

基础-单页应用-SPA-实现原理

目标 掌握前段SPA的实现原理

• SPA要实现 能够在前端自由切换模块
• SPA要能记忆当前切换的模块,并且刷新页面模块依然还在当前视图
• SPA要实现在前端切换模块时,不能引起页面刷新,否则页面内容会被重置

结论

• 可以通过页面地址的锚链接来实现
• hash(锚链接)位于链接地址 **#**之后
• hash值的改变**不会触发**页面刷新
• hash值是url地址的一部分,会存储在页面地址上 我们可以获取到
• 可以通过**事件监听**hash值得改变
• 拿到了hash值,就可以根据不同的hash值进行不同的**模块切换**

基础-路由-js实现路由

目标 掌握如何用纯js逻辑实现一个前端路由功能

• 通过上一个小节内容可以得出 采用hash值改变的特性来进行前端路由切换

任务

1. 在页面上实现4个链接,北京,上海,天津,重庆
2. 实现点击4个链接时,页面上显示对应的城市名称
3. 并且刷新页面之后,上次切换的城市还在

路径:

​ 1. 实现导航结构

​ 2. 监听hash改变

 3.  根据改变切换视图

关于具体实现参考课程提供的代码

基础-路由-vue-router-文档

目标 了解vue-router是什么

• Vue-Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌
• 实现根据不同的请求地址 而**显示不同的组件**
• 如果要使用 vue开发项目,前端路由功能**必须使用**vue-router来实现

基础-路由-vue-router-体验及使用步骤

**目标**掌握如何在页面中使用vue-router

1. 导入vue和vue-router
2. 设置HTML中的内容

<router-link to="/users">用户管理router-link>


<router-view>router-view>

3. 创建组件

// 创建组件
// 组件也可以放到单独的js文件中
var Home = {
    template: '
这是Home内容
'
};
var Users = {
    template: '
这是用户管理内容
'
};

4. 实例化路由对象,配置路由规则

// 配置路由规则
var router = new VueRouter({
  routes: [
      { name: 'home', path: '/', component: Home },
      { name: 'users', path: '/users', component: Users }
  ]
});

5. vue实例挂载router实例

var vm = new Vue({
   el: '#app',
   router
});

基础-路由-vue-router-动态路由

**目标**掌握Vue-router的动态路由如何使用

• 点击列表页 跳转到详情页时,跳转的链接需要携带参数,会导致path不同
• 当path不同却需要对应同一个组件时,需要用到动态路由这一概念

此时可以通过路由传参来实现，具体步骤如下：

1. 路由规则中增加参数，在path最后增加 :id

   { name: 'users', path: '/users/:id', component: Users },
   

2. 通过 传参，在路径上传入具体的值

   <router-link to="/users/120">用户管理router-link>
   

3. 在组件内部可以使用，this.$route 获取当前路由对象

   var Users = {
       template: '
   这是用户管理内容 {{ $route.params.id }}
   ',
       mounted() {
           console.log(this.$route.params.id);
       }
   };
   

基础-路由-vue-router-to属性赋值

**目标**掌握 vue-router中的to的多种赋值方式

• to 有多种赋值方式

      
      
      
      
      
      
      
      
      <router-link :to="{name:'abcdefg',params:{a:1}}">体育router-link>

任务

1. 用vue-router实例化路由
2. 导航为 北京 上海
3. 分别采用四种赋值方式 将上海跳转到对应的组件
4. 在北京跳转时 实现 带参数的跳转

关于具体实现参考课程提供的代码

基础-路由-vue-router-重定向

**目标**掌握路由-vue-router-重定向

场景: 当希望某个页面被强制中转时 可采用redirect 进行路由重定向设置

{
      path: "/sport",
      redirect: "/news", // 强制跳转新闻页
      component: {
        template: `
体育
`
      }
    },

任务

1. 实例化一个vue路由
2. 导航为 bj => 北京 sh => 上海 tj => 天津
3. 实现当跳转到天津时 直接重定向到北京

关于具体实现参考课程提供的代码

基础-路由-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是可以随意命名的,

1. 路由规则中增加参数，在path最后增加 :id

注意这里的id相当于我们给路由加了参数 叫做id

{ name: 'users', path: '/users/:id', component: Users },

2. 通过 传参，在路径上传入具体的值(实参)

<router-link to="/users/120">用户管理router-link>

3. 在组件内部可以使用，this.$route 获取当前路由对象 并通过**params获取定义的参数id**

var Users = {
template: '
这是用户管理内容 {{ $route.params.id }}
',
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="{name:'abcdefg',params:{a:1}}">体育router-link>

注意：如果提供了 path，params 会被忽略，上述例子中的name并不属于这种情，你可以提供路由的 name 并手写完整的参数params：

基础-路由-vue-router-重定向

**目标**掌握路由-vue-router-重定向

场景: 当希望某个页面被**强制中转时 可采用redirect** 进行**路由重定向**设置

{
  path: "/sport",
  redirect: "/news", // 强制跳转新闻页
  component: {
    template: `
体育
`
  }
},

任务

1. 实例化一个vue路由
2. 导航为 bj => 北京 sh => 上海 tj => 天津
3. 实现当跳转到天津时 直接重定向到北京

关于具体实现参考课程提供的代码

基础-路由-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"
        });
      }

任务

1. 实例化一个导航路由
2. 导航为 A, B, C ,D
3. 实现A => B , B => C, 然后从C返回时,直接回到A
4. 实现A => B ,B => C , C =>D 从D返回时 不能返回
5. 实现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样式即可

任务

1. 实例化一个vue-router导航
2. 北京- 上海- 天津
3. 让当前路由的导航 字体48px 加粗 颜色红色

基础-路由-vue-router-嵌套路由

目标 掌握如何实现一个嵌套路由

• 如果存在**路由嵌套**,就需要提供多个视图容器
• 同时,router-link和router-view 都可以添加类名、设定样式

任务

1. 实现一个嵌套路由
2. 第一级路由为 热点 教育 社会 音乐
3. 音乐下 二级路由为 流行.古典.爵士

要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。

即

{
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 的  中
    { path: '', component: UserHome },

    // ...其他子路由
  ]
}

路径: 实现一个嵌套路由

​ 1 引入vue-router

​ 2 页面导航

​ 3 页面视图 => 子视图

​ 4 实例化router

​ 5 router选项

​ 6 挂载router

// 实例化 router
var router = new VueRouter({
routes: [
 {
   path: "/hot",
   component: {
     template: `
     
热点
     `
   }
 },
 {
   path: "/tech",
   component: {
     template: `
     
教育
     `
   }
 },
 {
   path: "/soc",
   component: {
     template: `
     
社会
     `
   }
 },
 {
   path: "/music",
   component: {
     template: `
     

      流行
      古典
      爵士
      
     
     ` // 组件中放入 嵌套的导航 和视图容器
   },
   // children承载嵌套路由对象
   children: [
     {
       path: "/music/pop",
       component: {
         template: `

         流行音乐
         
         `
       }
     },
     {
       path: "/music/tra",
       component: {
         template: `

         古典音乐
         
         `
       }
     },
     {
       path: "/music/jazz",
       component: {
         template: `

         爵士音乐
         
         `
       }
     }
   ]
 },
 {
   path: "/sport",
   component: {
     template: `
     
体育
     `
   }
 }
]
});
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状态

1. v-enter：定义进入过渡的开始状态。
2. v-enter-active：定义进入过渡生效时的状态。(需要写transtion)
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。
4. v-leave: 定义离开过渡的开始状态。
5. v-leave-active：定义离开过渡生效时的状态。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。

注意 v要替换成transition组件的name属性值

**注意**先要编写元素的最终展示样式

任务

1. 实现一个div 显示时 从小到大过渡
2. 实现该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生成的模板的有难有易

• 简单业务 => 简易模板
• 复杂业务 => 内容丰富模板

任务

1. 安装vue-cli脚手架 并 将2.0版本的补丁打到当前版本

基础-vue-cli创建项目

目标 学会使用vue-cli 2.0特性创建项目

创建项目: 采用 cli 2.0的特性 (生成简易模板)

vue/cli2.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 +创建项目时 有两种模式, 一种默认模式, 一种选择模式,

默认模式:一种标准的模板

选择模式 可以根据自己的需求选择需要的工具和模式

任务

1. 分别使用vue-cli 2.0 和 3.0特性创建一个叫做heroes的项目
2. 分别启动运行

基础-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 //导出对象 vue

import vue from 'vue'

扩展—

export const function  fn1() {} // 方法1
export const function  fn2() {} // 方法2
export const function  fn3() {} // 方法3

import { 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去做
任务

1. 新建一个名为 Menu的组件
2. 内容为 一个横向菜单 商城 团购 拼团 省钱帮
3. 菜单高60px 水平居中 字体大小为20px 颜色为 red 背景色 为 #CCCCCC
4. 实现组件在页面上展示

基础-示例项目效果演示

**目标**演示示例项目的最终效果 分拆功能

基础-示例项目-导入素材处理样式

目标-任务:将项目所需样式导入到项目中

• 安装 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组件 ,并在视图中显示

路径 提取组件

1. 新建vue文件

2. 拷贝html静态内容到 template中

3. 在app.vue中引入注册组件

4. 注册在app.vue的组件中

5. 在app.vue的模板中使用注册组件

基础-示例项目-提取路由模块

目标-任务 在示例项目中 提取路由模块,并应用视图

路径 提取路由模块

1 安装路由

npm i vue-router // 安装路由模块

2 在main.js中引入 路由模块

import VueRouter from 'vue-router ' // 引用router

3 使用router

Vue.use(VueRouter) // 使用router

4 实例化 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-server 

2 新建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' // 引入axios

3 定义数据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组件 并写入静态内容(拷贝)

<div>
<h2 class="sub-header">添加英雄h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名label>

<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("提交信息不能为空");
}
}

基础-示例项目-编辑-添加编辑组件

**目标-任务**实现英雄列表的编辑功能组件渲染

路径: 编辑功能渲染

新建编辑组件

注意 由于 编辑组件和添加组件页面结构基本一致 可以 直接拷贝添加组件的内容

<div>
<h2 class="sub-header">添加英雄h2>
<form>
<div class="form-group">
<label for="exampleInputEmail1">用户名label>

<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>

基础-示例项目-编辑-显示编辑数据

**目标-任务**实现英雄列表的编辑功能

路径: 实现编辑的显示数据

1. 添加编辑路由 注意 由于需要拿到编辑数据的标识 所以需要动态路由

{ path: "/edit/:id", component: Edit } // 编辑组件 动态路由

2. 编辑按钮添加跳转路由的属性

<a class="btn btn-success" href="#/edit">添加a>

3. 定义加载英雄方法 注意 通过 $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; // 获取数据并赋值给表单对象
});
}
}

3. 在初始化事件中 调用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中配置统一的**请求路径头**

1. 给axios中的baseUrl设置常态值

Axios.defaults.baseURL = "http://localhost:3000"; // 设置共享的方法

2. 改造所有的的请求

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(视图销毁后) -->没啥用