【前端Vue】Vue0基础完整教程第6篇：vue指令（下）,成绩案例【附代码文档】-CFANZ编程社区

Vue从0基础到大神学习完整教程完整教程（附代码资料）主要内容讲述：vue基本概念，vue-cli的使用，vue的插值表达式，{{ gaga }}，{{ if (obj.age > 18 ) { } }}，vue指令，综合案例 - 文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通过data提供数据,通过插值表达式显示数据,安装vue开发者工具,v-bind指令,v-on指令,v-if 和 v-show,v-model,v-text 和 v-html。day-08vuex介绍,语法,模块化,小结。面经PC端-element (上)初始化,request,router,login模块,layout模块,dashboard模块（了解）。面经PC端 - Element (下)Article / list 列表,Article / add 添加,Article / del 删除,Article / upd 修改,Article / preview 预览,yarn-补充。vue指令（下），成绩案例，计算属性，属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分和平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤（两步）,使用演示。vue指令（下），成绩案例，计算属性，属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分和平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤（两步）,使用演示。组件化开发，组件通信，todo案例，作业什么是组件化开发,组件的注册,全局注册组件,组件的样式冲突 ,组件通信 - 父传子 props 传值,v-for 遍历展示组件练习,单向数据流,组件通信 - 子传父,props 校验,布局,任务组件todo,列表,删除,修改：不做了！下面代码其实就是我想让大家练习,添加,剩余数量,清空已完成,小选与大选,筛选：作业,本地存储,附加练习_1.喜欢小狗狗吗,附加练习_2.点击文字变色,附加练习_3. 循环展示狗狗,附加练习_4.选择喜欢的狗。v-model，ref 和 $refs，$nextTick，dynamic 动态组件，自定义指令，插槽，案例：商品列表v-model 语法糖,v-model给组件使用,动态组件的基本使用,自定义指令说明,自定义指令 - 局部注册,自定义指令 - 全局注册,自定义指令 - 指令的值,默认插槽 slot,后备内容 (默认值),具名插槽,作用域插槽,案例概览,静态结构,MyTag 组件,MyTable 组件。生命周期，单页应用程序与路由，vue-router研究生命周期的意义,生命周期函数(钩子函数),组件生命周期分类,SPA - 单页应用程序,路由介绍,vue-router介绍,vue-router使用,配置路由规则,路由的封装,vue路由 - 声明式（a标签转跳）导航,vue路由 - 重定向和模式,vue路由 - 编程式（JS代码进行转跳）导航,综合练习 - 面经基础版,组件缓存 keep-alive。面经 H5 端 - Vant（上）初始化,vant,axios封装,router,主题定制-了解,登录&注册。面经 H5 端 - Vant（下）列表,详情,收藏与喜欢,我的（个人中心）。Day01_vuex今日学习目标(边讲边练),1.vuex介绍,2.vuex学习内容,3.vuex例子准备,vuex-store准备,5.vuex-state数据源,【vuex-mutations定义-同步修改,【vuex-mutations使用,8.vuex-actions定义-异步修改,9.vuex-actions使用,10.vuex-重构购物车-准备Store,11.vuex-重构购物车-配置项(上午结束),vuex-getters定义-计算属性,13.vuex-getters使用,14.vuex-modules定义-分模块,15.分模块-影响state取值方式,16.分模块-命名空间,扩展: 使用Devtools调试vuex数据。

全套笔记资料代码移步：前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

生命周期

研究生命周期的意义

生命周期 => 一个事物从出生到消亡的全部过程

生命周期（Life Cycle）是指一个组件从创建-> 运行 -> 销毁的整个阶段，强调的是一个时间段

张三出生，表示这个人生命周期的开始
张三离世，表示这个人生命周期的结束
中间张三的一生，就是张三的生命周期

我们可以把每个 vue 组件运行的过程，也概括为生命周期：

vue 组件的初始化，表示生命周期的开始
vue 组件的销毁，表示生命周期的结束
vue 组件中间运行的过程，就是组件的生命周期

生命周期函数(钩子函数)

生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。

例如，组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据。

组件生命周期分类

vue 组件的生命周期函数，可以分为 3 大类：

组件初始化阶段的生命周期函数
组件运行阶段的生命周期函数
组件销毁阶段的生命周期函数

1. beforeCreate：data数据初始化之前，组件还没有数据
2. created: data数据初始化之后，可以获取到组件的数据
3. beforeMount：DOM渲染之前，DOM还没渲染
4. mounted：DOM渲染之后，可以操作DOM了
5. beforeUpdate: 数据更新，DOM更新前
6. updated: 数据更新，DOM更新后
7. beforeDestroy: 组件销毁前
8. destroyed: 组件销毁后

单页应用程序与路由

SPA - 单页应用程序

SPA： Single Page Application 单页面应用程序
MPA : Multiple Page Application多页面应用程序

[SPA ](

[网易云音乐](

优势

传统的多页面应用程序，每次请求服务器返回的都是一整个完整的页面
单页面应用程序只有第一次会加载完整的页面
以后每次请求仅仅获取必要的数据，减少了请求体积，加快页面响应速度，降低了对服务器的压力
SPA更好的用户体验，运行更加流畅

缺点

开发成本高 (需要学习路由) vue-router react-router
不利于 SEO 搜索引擎优化谷歌浏览器在解决这个问题 ssr:服务端渲染 server side rendering

路由介绍

路由 : 是浏览器 URL 中的哈希值( # hash) 与 展示视图内容(组件) 之间的对应规则
- 简单来说,路由就是一套映射规则(一对一的对应规则), 由开发人员制定规则.-
- 当 URL 中的哈希值( # hash) 发生改变后,路由会根据制定好的规则, 展示对应的视图内容(组件)
为什么要学习路由?
- 渐进式 =>vue => vuer-router (管理组件之间的跳转)
- 在 web App 中, 经常会出现通过一个页面来展示和管理整个应用的功能.
- SPA 往往是功能复杂的应用,为了有效管理所有视图内容,前端路由应运而生.
vue 中的路由 : 是 hash 和 component 的对应关系, 一个哈希值对应一个组件

目标: 设备和ip的映射关系

目标: 路径和组件的映射关系

vue-router

vue-router介绍

目标: 如何在Vue项目中集成路由

官网:

路由 - 组件分类

目标: .vue文件分2类, 一个是页面组件, 一个是复用组件

.vue文件本质无区别, 方便大家学习和理解, 总结的一个经验

src/views(或pages) 文件夹和 src/components文件夹

页面组件 - 页面展示 - 配合路由用
复用组件 - 展示数据/常用于复用

总结: views下的页面组件, 配合路由切换, components下的一般引入到views下的vue中复用展示数据

vue-router使用

目标: 学会vue官方提供的vue-router路由系统功能模块使用

App.vue - 页面标签和样式准备(==可复制继续写==)

<template>
  <div>
    <div class="footer_wrap">
      <a rel="nofollow" href="#/find">发现音乐</a>
      <a rel="nofollow" href="#/my">我的音乐</a>
      <a rel="nofollow" href="#/part">朋友</a>
    </div>
    <div class="top">
      
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.footer_wrap {
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  width: 100%;
  text-align: center;
  background-color: #333;
  color: #ccc;
}
.footer_wrap a {
  flex: 1;
  text-decoration: none;
  padding: 20px 0;
  line-height: 20px;
  background-color: #333;
  color: #ccc;
  border: 1px solid black;
}
.footer_wrap a:hover {
  background-color: #555;
}
.top {
  padding-top: 62px;
}
</style>

[vue-router文档](

安装

yarn add vue-router@3.5.3

导入路由 main.js中

import VueRouter from 'vue-router'

使用路由插件

// 在vue中，使用使用vue的插件，都需要调用Vue.use()
Vue.use(VueRouter)

创建路由对象

const router = new VueRouter({
})

关联到vue实例

new Vue({
  router
})

==效果：地址栏中自动增加了 #==

配置路由规则

// 4. 创建一个路由对象
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      // 组件
      path: '/find',
      component: Find,
    },
    {
      path: '/my',
      component: My,
    },
    {
      path: '/friend',
      component: Friend,
    },
  ],
})

==必须指定路由的出口==

<div class="top">
  <!-- 路由的出口 -->
  <router-view></router-view>
</div>

路由的封装

新建文件router/index.js

import Vue from 'vue'
// 2. 导入VueRouter
import VueRouter from 'vue-router'

import Find from '../views/Find'
import My from '../views/My'
import Friend from '../views/Friend'

// 3. 使用vue插件  vue的插件想要生效必须调用一个方法  Vue.use(XXXX)
Vue.use(VueRouter)

// 4. 创建一个路由对象
const router = new VueRouter({
  // 路由的规则
  // route: 一条路由规则
  routes: [
    {
      // 路径 锚点
      // 组件
      path: '/find',
      component: Find,
    },
    {
      path: '/my',
      component: My,
    },
    {
      path: '/friend',
      component: Friend,
    },
  ],
})

export default router

main.js中

import router from './router'

new Vue({
  // 5. 关联路由对象和vue实例 data methods
  render: (h) => h(App),
  router,
}).$mount('#app')

vue路由 - 声明式（a标签转跳）导航

声明式导航 - 基础使用

目标: 可用全局组件router-link来替代a标签

vue-router提供了一个全局组件 router-link
router-link实质上最终会渲染成a链接 to属性等价于提供 href属性(to无需#)
router-link提供了声明式导航高亮的功能(自带类名)

<template>
  <div>
    <div class="footer_wrap">
      <router-link to="/find">发现音乐</router-link>
      <router-link to="/my">我的音乐</router-link>
      <router-link to="/part">朋友</router-link>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
/* 省略了 其他样式 */
.router-link-exact-active,
.router-link-active {
  background-color: #555 !important;
}
</style>

总结: 链接导航, 用router-link配合to, 实现点击切换路由

导航高亮

RouterLink会自动给当前导航添加两个类名

<!-- 
  RouterLink会自动给当前的链接添加两个类名
    router-link-active: 激活的导航链接   模糊匹配
    router-link-exact-active:  激活的导航链接 精确匹配

    exact: 必须要精确匹配
  -->
 <RouterLink to="/" exact>发现音乐</RouterLink>
<RouterLink to="/my">我的音乐</RouterLink>
<RouterLink to="/friend">朋友</RouterLink>

可以修改默认高亮的类名

const router = new VueRouter({
  linkActiveClass: 'aa',
  linkExactActiveClass: 'aa',
  // route: 一条规则
}

声明式导航 - 跳转传参

目标: 在跳转路由时, 可以给路由对应的组件内传值

在router-link上的to属性传值, 语法格式如下

/path?参数名=值
/path/:id – 需要路由对象提前配置 path: “/path/参数名”

对应页面组件接收传递过来的值

$route.query.参数名
$route.params.参数名

创建components/Part.vue - 准备接收路由上传递的参数和值

<template>
  <div>
      <p>关注明星</p>
      <p>发现精彩</p>
      <p>寻找伙伴</p>
      <p>加入我们</p>
      <p>人名: {{ $route.query.name }} -- {{ $route.params.username }}</p>
  </div>
</template>

路由定义

{
    path: "/friend",
    component: Friend
  },
  {
    path: "/friend/:username", // 有:的路径代表要接收具体的值
    component: Friend
  },

导航跳转, 传值给Friend.vue组件

<router-link to="/friend?name=小传">朋友-小传</router-link>
<router-link to="/friend/小智">朋友-小智</router-link>

vue路由 - 重定向和模式

路由 - 重定向

目标: 匹配path后, 强制切换到目标path上

网页打开url默认hash值是/路径
redirect是设置要重定向到哪个路由路径

例如: 网页默认打开, 匹配路由"/", 强制切换到"/find"上

const routes = [
  {
    path: "/", // 默认hash值路径
    redirect: "/find" // 重定向到/find
    // 浏览器url中#后的路径被改变成/find-重新匹配数组规则
  }
]

总结: 强制重定向后, 还会重新来数组里匹配一次规则

路由 - 404页面

目标: 如果路由hash值, 没有和数组里规则匹配

默认给一个404页面

语法: 路由最后, path匹配*(任意路径) – 前面不匹配就命中最后这个, 显示对应组件页面

创建NotFound页面

<template>
  <img src="images/5854cc19-a9ca-400e-9dca-2207617394fa-1709969176.png" alt="">
</template>

<script>
export default {

}
</script>

<style scoped>
    img{
        width: 100%;
    }
</style>

在main.js - 修改路由配置

import NotFound from '@/views/NotFound'

const routes = [
  // ...省略了其他配置
  // 404在最后(规则是从前往后逐个比较path)
  {
    path: "*",
    component: NotFound
  }
]

总结: 如果路由未命中任何规则, 给出一个兜底的404页面

路由 - 模式设置

目标: 修改路由在地址栏的模式

hash路由例如:

history路由例如: (以后上线需要服务器端支持)

[模式文档](

router/index.js

const router = new VueRouter({
  routes,
  mode: "history" // 打包上线后需要后台支持, 模式是hash
})

vue路由 - 编程式（JS代码进行转跳）导航

编程式导航用JS代码跳转

声明式导航用a标签

编程式导航 - 基础使用

目标: 用JS代码来进行跳转

语法:

this.$router.push({
    path: "路由路径", // 都去 router/index.js定义
    name: "路由名"
})

main.js - 路由数组里, 给路由起名字

{
    path: "/find",
    name: "Find",
    component: Find
},
{
    path: "/my",
    name: "My",
    component: My
},
{
    path: "/part",
    name: "Part",
    component: Part
},

App.vue - 换成span 配合js的编程式导航跳转

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="btn('/part', 'Part')">朋友</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - js方式跳转路由
// 语法:
// this.$router.push({path: "路由路径"})
// this.$router.push({name: "路由名"})
// 注意:
// 虽然用name跳转, 但是url的hash值还是切换path路径值
// 场景:
// 方便修改: name路由名(在页面上看不见随便定义)
// path可以在url的hash值看到(尽量符合组内规范)
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    }
  }
};
</script>

编程式导航 - 跳转传参

目标: JS跳转路由, 传参

语法 query / params 任选一个

this.$router.push({
    path: "路由路径"
    name: "路由名",
    query: {
    	"参数名": 值
    }
    params: {
		"参数名": 值
    }
})

// 对应路由接收   $route.params.参数名   取值
// 对应路由接收   $route.query.参数名    取值

==格外注意: 使用path会自动忽略params==

App.vue

<template>
  <div>
    <div class="footer_wrap">
      <span @click="btn('/find', 'Find')">发现音乐</span>
      <span @click="btn('/my', 'My')">我的音乐</span>
      <span @click="oneBtn">朋友-小传</span>
      <span @click="twoBtn">朋友-小智</span>
    </div>
    <div class="top">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// 目标: 编程式导航 - 跳转路由传参
// 方式1:
// params => $route.params.参数名
// 方式2:
// query => $route.query.参数名
// 重要: path会自动忽略params
// 推荐: name+query方式传参
// 注意: 如果当前url上"hash值和?参数"与你要跳转到的"hash值和?参数"一致, 爆出冗余导航的问题, 不会跳转路由
export default {
  methods: {
    btn(targetPath, targetName){
      // 方式1: path跳转
      this.$router.push({
        // path: targetPath,
        name: targetName
      })
    },
    oneBtn(){
      this.$router.push({
        name: 'Part',
        params: {
          username: '小传'
        }
      })
    },
    twoBtn(){
      this.$router.push({
        name: 'Part',
        query: {
          name: '小智'
        }
      })
    }
  }
};
</script>

综合练习 - 面经基础版

备用：

yarn add core-js -D

配置一级路由

配置首页和详情页两个一级路由

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout
    },
      
      
      
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

配置二级嵌套路由

配置自动导入：

目标: 在现有的一级路由下, 再嵌套二级路由

从《教学资料》 views 目录中， CV 四个二级路由组件，到我们的目录中

利用 children 配置二级路由

router/index.js

import Article from '@/views/Article.vue';
import ArticleDetail from '@/views/ArticleDetail.vue';
import Collect from '@/views/Collect.vue';
import Like from '@/views/Like.vue';
import User from '@/views/User.vue';

import Layout from '@/views/Layout.vue';


import Vue from 'vue'
import VueRouter from "vue-router";
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: '/user', component: User },
      ]
    },
    {
      path: '/detail',
      component: ArticleDetail
    }
  ]
})

export default router

配置导航链接, a 标签替换成 router-link

views/Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">
      <router-view></router-view>
    </div>
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>

动态渲染首页

1 安装 axios

npm i axios

2 接口文档说明：

请求地址: 
请求方式: get

3 data中提供数据， created 中发送请求，获取数据

src/views/Article.vue

<script>
import axios from 'axios';
export default {
  name: 'ArticlePage',
  data() {
    return {
      articles: []
    };
  },
  async created() {
    const { data } = await axios.get(
      '
    );
    this.articles = data.result.rows;
  },
};
</script>

4 结合数据动态渲染

src/views/Article.vue

<template>
  <div class="article-page" v-if="articles">
    <div
      v-for="item in articles"
      :key="item.id"
      class="article-item">
      <div class="head">
        <img :src="item.creatorAvatar" alt="" />
        <div class="con">
          <p class="title">{{ item.stem }}</p>
          <p class="other">{{ item.creatorName }} | {{ item.createdAt }}</p>
        </div>
      </div>
      <div class="body">{{ item.content }}</div>
      <div class="foot">点赞 {{ item.likeCount }} | 浏览 {{ item.views }}</div>
    </div>
  </div>
</template>

跳转传参到详情页

1 修改详情页路由，改成动态路由

router/index.js

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Layout,
      children: [
        { path: '/article', component: Article },
        { path: '/collect', component: Collect },
        { path: '/like', component: Like },
        { path: '/user', component: User },
      ]
    },
    {
      path: '/detail/:id',
      component: ArticleDetail
    }
  ]
})

2 注册点击事件，跳转传递参数

src/views/Article.vue

<div
  v-for="item in articles"
  :key="item.id"
  class="article-item"
  @click="$router.push(`/detail/${item.id}`)"
>

3 获取解析参数

src/views/ArticleDetail.vue

export default {
  name: 'ArticleDetailPage',
  created() {
    console.log(this.$route.params.id)
  }
};

4 点击返回键，返回上一页

src/views/ArticleDetail.vue

<span class="back" @click="$router.back()">&lt;</span>

动态渲染详情页

接口文档说明：

请求地址: 
请求方式: get

1 发送请求获取数据

src/views/ArticleDetail.vue

import axios from 'axios';
export default {
  name: 'article-detail-page',
  data() {
    return {
      article: {}
    };
  },
  async created() {
    this.article = {}
    const { data } = await axios.get(
      `
    );
    this.article = data.result;
  },
};

2 页面渲染

src/views/ArticleDetail.vue

<template>
  <div class="article-detail-page" v-if="article.id">
    <nav class="nav"> <span class="back" @click="$router.back()">&lt;</span> 面经详情</nav>
    <header class="header">
      {{article.stem}}
      <p>{{article.createdAt}} | {{article.views}} 浏览量 | {{article.likeCount}} 点赞数</p>
      <p><img :src="article.creatorAvatar" alt=""> <span>{{article.creatorName}}</span> </p>
    </header>
    <main class="body"> {{article.content}} </main>
  </div>
</template>

组件缓存 keep-alive

基本语法

思考：从面经点到收藏，又点回面经，面经的数据需要重新加载么？不需要，希望缓存下来！

如果希望组件被缓存下来，可以在外面包一个 keep-alive 组件 ~

src/views/Layout.vue

<template>
  <div class="h5-wrapper">
    <div class="content">
       
      <keep-alive>
        <router-view></router-view>
      </keep-alive>
    </div>
    <nav class="tabbar">
      <router-link to="/article">面经</router-link>
      <router-link to="/collect">收藏</router-link>
      <router-link to="/like">喜欢</router-link>
      <router-link to="/user">我的</router-link>
    </nav>
  </div>
</template>

keep-alive对应的两个钩子

当组件被keep-alive管理时，会多出两个生命周期钩子，activated / deactivated

src/views/Article.vue

export default {
  name: 'ArticlePage',
  data() {
    return {
      articles: []
    };
  },
  async created() {
    const { data } = await axios.get(
      '
    );
    this.articles = data.result.rows;
    console.log(this.articles)
  },
  activated() {
    console.log('缓存组件被激活')
  },
  deactivated() {
    console.log('缓存组件被隐藏')
  }
};

【前端Vue】Vue0基础完整教程第6篇：vue指令（下）,成绩案例【附代码文档】

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

生命周期

研究生命周期的意义

生命周期函数(钩子函数)

组件生命周期分类

单页应用程序与路由

SPA - 单页应用程序

优势

缺点

路由介绍

vue-router

vue-router介绍

路由 - 组件分类

vue-router使用

配置路由规则

路由的封装

vue路由 - 声明式（a标签转跳）导航

声明式导航 - 基础使用

导航高亮

声明式导航 - 跳转传参

vue路由 - 重定向和模式

路由 - 重定向

路由 - 404页面

路由 - 模式设置

vue路由 - 编程式（JS代码进行转跳）导航

编程式导航 - 基础使用

编程式导航 - 跳转传参

综合练习 - 面经基础版

配置一级路由

配置二级嵌套路由

动态渲染首页

跳转传参到详情页

动态渲染详情页

组件缓存 keep-alive

基本语法

keep-alive对应的两个钩子

未完待续， 同学们请等待下一期

全套笔记资料代码移步： 前往gitee仓库查看

感兴趣的小伙伴可以自取哦，欢迎大家点赞转发~

全套笔记资料代码移步：前往gitee仓库查看

未完待续，同学们请等待下一期

全套笔记资料代码移步：前往gitee仓库查看