2021年01月_Jyann~

01月

原创 Vue(五)——vue-router(路由元信息)_全局守卫中通过路由元信息进行鉴权

路由元信息定义路由的时候可以配置 meta 字段。一、通过 meta 定义要验证的路由const router = new Router({ routes: [ { path: '/user', component: User, children: [ { path: '', name: 'user', component: Profile, met

2021-01-29 15:59:08 407

原创 Vue(五)——vue-router(路由守卫)_组件内守卫实现商品价格排序/全局守卫实现鉴权

路由守卫当导航发生改变的时候，vue-router 会在多个不同的地方调用指定的函数，也就是与路由有关的生命周期函数，也称为：路由守卫组件内守卫路由独享守卫：写在某个路由配置里全局守卫：写在整个路由对象里一、组件内守卫定义在组件内的与路由有关的生命周期函数（守卫）beforeRouteEnter beforeRouteUpdate beforeRouteLeave1.1beforeRouteEnter当路由解析完成，并中指定的组件渲染之前（组件 beforeCreate.

2021-01-29 15:54:03 456

原创 Vue(五)——vue-router(queryString)_商品价格排序

一、queryString有的时候，我们可能也会用到 queryString。queryString即 ?sort=desc这种形式。大批量数据都是通过后端进行处理，除非数据量很少。此处后端通过参数sort进行排序。  <select v-model="sort"> <option value="desc">从高到低</option> ...

2021-01-29 15:39:11 1372

原创 Vue(五)——vue-router(动态路由)_显示商品详情页

动态路由有的时候，我们需要把满足某种规则的路由全部匹配到同一个组件，比如不同的商品的 url/item/1/item/2/item/3...我们不可能为每一个商品都定义一个独立的组件，而是把它们都映射到同一个组件，同时 url 后面的部分为动态变化的部分，我们会在设计路由的时候进行特殊的处理...{ path: '/item/:itemId', name: 'item', component: Item}...其中 :itemId 表示匹配的 url 中动态.

2021-01-29 11:11:09 4169

原创 Vue(五)——调试

一、console输出到控制台如果Vue项目中，使用了eslint-loader（代码规范：空格，缩进，console等测试语句）的话，就没法使用console二、网页network中直接js打断点三、debuggervue的模板文件，在网页中不好直接调试，使用debugger可以自动帮我们定位到断点位置debugger 语法function fn() { debugger; // to do sth...}四、vscode4.1 vscode中安装 Debugg

2021-01-28 10:25:38 5388

原创 Vue(四)——vue-router（异步请求）

一、异步请求在实际的应用开发中，与后端交互，进行异步请求是很常见的需求1.1axiosnpm i axios1.2请求// home.vue<template> <div class="home"> Home </div></template><script>import axios from 'axios';export default { name: 'home', data() {

2021-01-27 15:38:02 1700

原创 Vue(四)——vue-router

路由当应用变得复杂以后，我们就需要通过一种便捷、高效的方式来管理应用，最常见的就是通过路由路由：把 url 与应用中的对应的组件进行关联，通过不同的 url 访问不同的组件一、vue-router的安装npm i vue-router// ORyarn add vue-router二、Vue.use()通过前面提到的 Vue.use 方法，把 vue-router 安装到指定的 Vue 实例中import Vue from 'vue'import Router fro

2021-01-27 15:34:25 308

原创 Vue(四)——vue-devTools

vue-devTools为了更方便的在开发过程中对 Vue 程序进行调试，除了传统的浏览器自带的 debug 工具以外，我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试参考：https://github.com/vuejs/vue-devtoolsVue.js-devtools，点击下载一、安装步骤1.1、首先进入浏览器设置，点击扩展程序1.2、开启开发者模式，点击加载已解压的扩展程序或者直接拖拽已解压的扩展程序注：已解压的扩展程序就是上面下载的 Vue.

2021-01-27 11:12:44 522

原创 Vue(四)——单文件组件

单文件组件vue 的单文件组件是官方提供的一种用来组织组件代码的形式，该文件以 .vue 为后缀，该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascript、html、css 文件https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html一、组成单文件组件把一个组件所包含的结构、样式、行为分别通过 template、style、script 进行分离包含，然后统一组织在一个文件中一个单文件组件最少必须包含

2021-01-27 09:57:49 1240

原创 Vue(四)——vue-cli

vue-clihttps://cli.vuejs.org/zh/vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具，也称为：脚手架，它是一系列工具的集合，它主要有：根据配置选项自动构建项目，并安装所需要的依赖启动一个本地开发服务器，通过这个服务器可以基于服务器环境访问本地项目，同时提供了跨域代理服务项目的自动编译、打包项目测试（单元测试、e2e测试）一、安装npm install -g @vue/cli# ORyarn global add @vue/c

2021-01-27 09:56:50 189

原创 Vue(四)——动画

动画在 vue 中给组件或元素添加动画的方式可以分为多种，但总体无非还是通过 css 和 JavaScript 来进行处理一、CSS通过 css 添加动画的方式特别的简单，只需要利用 css 中的 transition 就可以做到<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="wid

2021-01-26 16:55:42 232

原创 Vue(四)——插件

插件插件通常是用来给 vue 提供扩展功能的一种方式给 Vue 添加属性和方法给 Vue 实例添加属性和方法添加全局资源：指令、过滤器、组件等添加配置选项一、安装插件通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成Vue.use(插件);如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入MyPlugin.ins

2021-01-26 16:21:41 278

原创 Vue(四)——动态组件

动态组件有的时候，我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理，但是会比较麻烦，vue 提供了一个更方便的方式来处理这种情况一、component组件component 是 vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="vi

2021-01-26 15:38:54 901

原创 Vue(四)——组件生命周期、ref与$refs、nextTick

一、组件生命周期组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法基本生命周期函数有下面几个阶段：创建阶段挂载阶段更新阶段卸载阶段每一个阶段都对应着之前和之后两个函数1.1创建阶段1.1.1 beforeCreate()初始化阶段，应用不多1.1.2 created()在实例创建完成后被立即调用，该阶段完成了对 data 中的数据的 observer，该阶段可以处理一些异步任务1.2挂载阶段

2021-01-26 11:12:22 3344 1

原创 Vue(三)——组件

组件的注册在 vue 中，我们可以通过 new Vue 来创建一个组件，不过通常它是作为整个应用的顶层根组件存在的，我们还可以通过另外的方式来注册一个更为通用的组件一、Vue.component()Vue.component('组件名称', {组件选项})组件名称遵循自定义组件命名规范：全小写、连字符（虽然驼峰式一般也没问题）组件选项与 new Vue 选项配置基本一致（也有一些细节的不同） 1.1全局组件与局部组件通过 Vue.component 注册的组件，我们称为全.

2021-01-22 16:26:40 301

原创 Vue(三)——过滤器

一、注册过滤器过滤器是一个使用在双大括号插值和 v-bind 中，用于过滤输出内容的函数假设有一个用于把内容转为大写的过滤器函数 toUpperCase{{content|toUpperCase}}| : 管道符，表示数据从左至右通过管道符进行传递过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果1.1全局过滤器Vue.filter('过滤器名称', 过滤器函数);1.2局部过滤器Vue.component('组件', {.

2021-01-21 17:17:56 432

原创 Vue(三)——computed和watch

一、computed计算属性在实际的应用中，我们会有一些原始数据，同时在应用中又会有一些数据是根据某些原始数据派生出来的，针对这样的一种情况，vue 定义了一个专门用来处理这种派生数据的选项：computed<div id="app"> <label><input type="radio" v-model="gender" value="" /> 所有</label> <label><input type="radio" v

2021-01-21 17:03:51 333

原创 Vue(二)——事件

事件在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @<组件 v-on:事件名称="表达式" /><组件 @事件名称="表达式" />一、组件的methods选项在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问，函数方法中也可以通过this访问data中的数据。二、通过内联方式绑定事件处理函数<组件 @事件名称="fn" /&

2021-01-20 17:42:46 897

原创 Vue(二)——指令

一、指令表达式的值除了可以出现内容中，也可以使用在其它位置，比如：属性。但是不能使用 {{}} 语法，而是需要指令在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的表达式，不同的指令有不同的作用，vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令内容输出循环逻辑属性绑定事件其它二、内容输出通过 {{}} 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现

2021-01-20 16:04:00 219

原创 Vue(二)——基础

一、Vue.jsvue.js 是一套用于构建用户界面的渐进式框架1.1渐进式核心：声明式渲染-->组件系统第三方库：基于客户的端路由（React Router、Vue Router）：如果需要构建相对较复杂的系统，就需要借鉴路由系统。状态管理器（React的Redux、Vue的Vuex）：随着应用需求的扩展，还需要借鉴相当于大数据管理的状态管理器。构建系统（Vue-cli，create-react-app）：包含我们熟知的各种构建工具，与前后端交互的各种框架：如ax

2021-01-19 16:52:41 252

原创 Vue(一)——脚手架工具及单文件组件

一、脚手架Vue 提供了一个脚手架工具，帮助我们快速搭建本地项目：vue-clihttps://cli.vuejs.org/zh/1.1安装npm install -g @vue/cli# ORyarn global add @vue/cli1.2创建项目vue-cli 提供了两种使用方式命令行 UI# 命令行vue create 项目名称# UIvue ui运行命令以后，根据提示进行选择- node_modules/- public/- ..

2021-01-18 18:05:03 263

原创 Vue(一)——基础(组件)

一、引入Vue先通过 <script> 的方式来引入 vue<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>vue 的基础是组件，它提供了两种方式来创建组件：Vue实例组件和Vue模板语法。创建一个根组件，核心是渲染（模板+数据），并返回一个实例对象。二、Vue实例组件通过 vue 提供的构造函数：Vue 实例化一个组件对象，作为整个应用的根组件l..

2021-01-18 15:50:45 732 2