Vue.js
CSDN_GMC
这个作者很懒,什么都没留下…
展开
-
Vue.js -- vuex
vuex文章目录vuex1、为什么要用 vuex ?2、通信解决方案3、vuex 是什么?4、vuex 的工作流5、安装 vuex6、引入 vuex7、从 Store 开始7-1、创建一个 Store8、核心概念8-1、state8-1-1、state 的创建8-1-2、在组件中使用 store8-1-3、store 配置8-1-4、使用辅助函数 `mapState`8-1-5、使用扩展运算符组合9、getters9-1、getters 函数9-2、通过属性访问9-3、通过方法访问9-4、使用辅助函数 `原创 2020-05-31 17:46:11 · 222 阅读 · 0 评论 -
Vue.js路由 -- 路由懒加载
vue-router 之 路由懒加载路由懒加载路由懒加载当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了import Vue from 'vue'import Router from 'vue-router'import NProgress from 'nprogress'import 'nprogress/nprogress.css'// import Home f原创 2020-05-31 17:43:39 · 208 阅读 · 0 评论 -
Vue.js路由 -- 路由元信息
vue-router路由元信息通过 `meta` 定义要验证的路由路由元信息定义路由的时候可以配置 meta 字段通过 meta 定义要验证的路由const router = new Router({ routes: [ { path: '/user', component: User, children: [ { path: '', name: 'user', compone原创 2020-05-31 17:42:24 · 165 阅读 · 0 评论 -
Vue.js路由 -- 滚动行为
vue-router 之 滚动行为滚动行为后退/前进滚动行为前端路由并没有重载整个浏览器,只是通过 DOM 进行了局部更新。所以,有的时候,浏览器的一个状态会被保持,比如 滚动条,当我们在一个页面中滚动滚动条,然后跳转到另外一个页面,滚动条会保持在上一个页面中,我们其实更希望滚动条能回到页面顶部,就像重载了整个页面一样const router = new VueRouter({ routes: [...], scrollBehavior: () => ({ y: 0 })});后退原创 2020-05-31 17:41:10 · 452 阅读 · 0 评论 -
Vue.js路由 -- 路由动效
vue-router 之 路由动效路由动效路由动效利用 transition 组件,我们还可以给路由导航加上动效// App.vue<template>...<transition name="fade"> <router-view/></transition>...</template><style>.fade-enter-active { transition: opacity .5s;}.fade原创 2020-05-31 17:39:08 · 159 阅读 · 0 评论 -
Vue.js路由 -- 路由数据获取
vue-router 之 路由数据获取1. 数据获取1.1 导航完成之后获取1.2 导航完成之前获取1.3 扩展 - nprogress安装1. 数据获取有的时候,进入某个路由以后,我们需要从服务端获取数据,比如 /item/:itemId ,通常,我们有两种方式来实现导航完成之后获取:先完成导航,然后在接下来的组件生命周期钩子中获取数据,在数据获取期间显示加载中之类的 loading 提示导航完成之前获取: 导航完成之前,在路由进入的守卫中获取数据,在数据获取成功以后执行导航。这两种方式都没原创 2020-05-31 17:35:43 · 900 阅读 · 0 评论 -
Vue.js路由 -- 路由组件传参
vue-router文章目录vue-router路由组件传参案例默认处理对象模式的回调函数模式路由组件传参我们通常把路由直接映射(绑定)的组件称为 路由组件,也只有路由组件才能直接调用路由有关对象:$router、$route当我们一个组件即希望作为路由组件使用,又可能作为功能组件(某个页面中的一部分)去使用,这个时候路由组件传参的方式来做到这点案例我们对 item.vue 组件进行改造,当我们在 home.vue 的商品列表上移入移出,出现商品信息提示层[外链图片转存失败,源站可能有防盗链机原创 2020-05-31 17:32:18 · 201 阅读 · 0 评论 -
Vue.js路由 -- 重定向与别名
vue-router文章目录vue-router重定向案例组件路由配置别名404重定向有的时候,我们会根据某种需求对用户请求的页面进行重新定位案例现有一小说网站,提供了 男生频道 和 女生频道 的两个入口,用户首次进入页面的时候,会出现选择,并记住用户的选择,以后该用户进入网站直接根据记录的选择进入对应的频道组件// BookChoose.vue<template> <div> <router-link :to="{name: 'book原创 2020-05-31 17:30:28 · 220 阅读 · 0 评论 -
Vue.js路由 -- 嵌套路由
vue-router 之 嵌套路由嵌套路由1. 添加路由与子路由children 属性2. 子路由视图嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成在应用增加一个用户个人中心,用户中心又是由多个页面组成,如:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ceXcESA-1590917235040)(assets/vue-router-usercenter.png)]1. 添加路由与子路由...import User from './views/User原创 2020-05-31 17:28:53 · 182 阅读 · 0 评论 -
Vue.js路由 -- 路由守卫
vue-router文章目录vue-router路由守卫组件内守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave路由守卫参数tofromnext路由独享的守卫全局守卫beforeEachbeforeResolveafterEach路由守卫当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函原创 2020-05-31 17:24:21 · 512 阅读 · 0 评论 -
Vue.js路由 -- queryString
vue-router文章目录vue-routerqueryString$route.query编程式导航路由组件的复用watchqueryString有的时候,我们可能也会用到 queryString<select v-model="sort"> <option value="desc">从高到低</option> <option value="asc">从低到高</option></select>$route.q原创 2020-05-31 17:19:39 · 889 阅读 · 0 评论 -
Vue.js路由 -- 动态路由
vue-router文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params动态路由有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url/item/1/item/2/item/3...我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 url 后面的部分为动态变化的部分,我们会在设计路由的时候进行特殊的处理...{ path: '/item/:itemId', nam原创 2020-05-31 17:15:43 · 654 阅读 · 0 评论 -
Vue.js路由 -- devTools
Vue.js 之 devToolsvue-devTools安装步骤vue-devTools为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试参考:https://github.com/vuejs/vue-devtoolsVue.js-devtools,点击下载安装步骤1、首先进入浏览器设置,点击 扩展程序[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-reAyA原创 2020-05-31 17:11:27 · 285 阅读 · 0 评论 -
Vue.js路由 -- 异步请求
vue-router 之 异步请求1. 异步请求1.1 axios1.2 请求2. 跨域2.1 vue.config.js2.2 跨域请求代理配置1. 异步请求在实际的应用开发中,与后端交互,进行异步请求是很常见的需求1.1 axiosnpm i axios1.2 请求// home.vue<template> <div class="home"> Home </div></template><script>原创 2020-05-31 17:08:46 · 319 阅读 · 0 评论 -
Vue.js路由 -- vue-router
vue-router路由1. vue-router 的安装2. Vue.use()3. 创建路由对象4. router-view 组件路由当应用变得复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由路由:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件1. vue-router 的安装npm i vue-router// ORyarn add vue-router2. Vue.use()通过前面提到的 Vue.use 方法,把 vu原创 2020-05-31 17:05:25 · 151 阅读 · 0 评论 -
Vue.js -- 动画
Vue.js -- 动画动画1. CSS2. JavaScript3. vue 中的动画处理动画生命周期transition 组件过渡类名动画在 vue 中给组件或元素添加动画的方式可以分为多种,但总体无非还是通过 css 和 JavaScript 来进行处理1. CSS通过 css 添加动画的方式特别的简单,只需要利用 css 中的 transition 就可以做到<!DOCTY...原创 2020-05-31 16:53:07 · 201 阅读 · 0 评论 -
Vue.js -- 插件
Vue.js -- 插件插件安装插件实例插件插件通常是用来给 vue 提供扩展功能的一种方式给 Vue 添加属性和方法给 Vue 实例 添加属性和方法添加全局资源:指令、过滤器、组件等添加配置选项安装插件通过全局方法 Vue.use() 使用插件。它需要在调用 new Vue() 启动应用之前完成Vue.use(插件);如果插件是一个对象,必须提供 install 方法。...原创 2020-05-31 16:51:15 · 213 阅读 · 0 评论 -
Vue.js -- 动态组件
Vue.js -- 动态组件动态组件1. component 组件2. keep-alive 组件3. 生命周期activated`deactivated`动态组件有的时候,我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if 来处理,但是会比较麻烦,vue 提供了一个更方便的方式来处理这种情况1. component 组件component 是 vue 内置的一个组件,它提供...原创 2020-05-31 16:50:13 · 208 阅读 · 0 评论 -
Vue.js -- 组件生命周期
组件生命周期一、组件生命周期1.创建阶段beforeCreate()created()2.挂载阶段beforeMount()mounted()3.更新阶段beforeUpdate()updated()4.卸载阶段beforeDestroy()destroyed()errorCaptured()二、ref 与 $refsref$refs三、nextTick一、组件生命周期组件生命周期指的是组件从...原创 2020-05-31 16:48:42 · 471 阅读 · 0 评论 -
Vue.js -- 单文件组件
vue 单文件组件单文件组件1. 组成2. lang 属性3. src 属性4. 有作用域的 CSS混用本地和全局样式5. 资源路径处理绝对路径前缀相对路径前缀特殊前缀单文件组件vue 的单文件组件是官方提供的一种用来组织组件代码的形式,该文件以 .vue 为后缀,该文件会被 vue-cli 内置的 webpack 解析生成对应的 javascript、html、css 文件https://vue-loader-v14.vuejs.org/zh-cn/start/spec.html1. 组成<原创 2020-05-31 16:47:25 · 372 阅读 · 0 评论 -
Vue.js -- cli
vue-clivue-cli安装创建项目命令行方式创建项目基于浏览器图形界面方式创建项目运行打包项目目录结构文件说明vue-clihttps://cli.vuejs.org/zh/vue-cli 是 vue 提供的一个用于自动化构建和开发项目的工具,也称为:脚手架,它是一系列工具的集合,它主要有:根据配置选项自动构建项目,并安装所需要的依赖启动一个本地开发服务器,通过这个服务器可以基于...原创 2020-05-27 16:13:38 · 151 阅读 · 0 评论 -
Vue.js -- 过滤器
Vue.js文章目录Vue.js过滤器注册过滤器全局过滤器局部过滤器实例过滤器过滤器是一个使用在 双大括号插值 和 v-bind 中,用于过滤输出内容的函数假设有一个用于把内容转为大写的过滤器函数 toUpperCase{{content|toUpperCase}}| : 管道符,表示数据从左至右通过管道符进行传递过滤器可以有多个,执行顺序从左至右,过滤器函数第一个参数的值就是其...原创 2020-05-27 16:08:43 · 124 阅读 · 0 评论 -
Vue.js -- computed 与 watch
Vue.js文章目录Vue.jscomputed计算属性的 `getter` 与 `setter`watch多层监听深度监听computed在实际的应用中,我们会有一些原始数据,同时在应用中又会有一些数据是根据某些原始数据派生出来的,针对这样的一种情况,vue 定义了一个专门用来处理这种派生数据的选项:computed<div id="app"> <label>...原创 2020-05-27 16:08:00 · 238 阅读 · 0 评论 -
Vue.js -- 事件
Vue.js -- 事件Vue.js事件组件的 `methods` 选项通过内联方式绑定事件处理函数事件修饰符.stop.prevent.capture.self.once.passive按键修饰符.keyCode.enter.down.exact原生事件Vue.js文章目录Vue.js事件组件的 `methods` 选项通过内联方式绑定事件处理函数事件修饰符.stop.prevent.cap...原创 2020-04-26 19:08:10 · 200 阅读 · 0 评论 -
Vue.js -- 指令部分02
Vue.js -- 指令 第二部分Vue.js7. 表单`text` 和 `textarea``checkbox` 和 `radio``select`8. 指令修饰符.lazy.number.trim9. 自定义指令注册指令全局指令局部指令指令生命周期(钩子函数)案例官网的例子扩展:自定义拖拽指令Vue.js7. 表单针对一般元素,比如 div、span、p、img 等,采用的是单向绑定:v...原创 2020-04-26 11:39:20 · 661 阅读 · 0 评论 -
Vue.js -- 指令部分01
Vue.js -- 指令Vue.js1. 指令2.内容输出2.1 v-text2.2 v-cloak2.3 v-html2.4 v-once2.5 v-pre3. 逻辑处理3.1 v-show3.2 v-if3.3 v-else / v-else-if4. 循环与列表4.1 v-for4.2 :key5. 属性绑定5.1 v-bind缩写5.2 样式5.2.1 style5.2.2 class6....原创 2020-04-20 15:05:29 · 291 阅读 · 0 评论 -
Vue.js -- 基础部分
Vue.js基础Vue.js1. vue.js1.1 vue 核心2. 引入3. 组件3.1 组件基本分类3.2 根组件的创建3.3 可复用的功能组件4. 组件内容渲染4.1 el:挂载点4.2 template:模板(最终形成ui的 原始结构)4.3 render4.4 使用 $mount 方法延迟 `Vue` 实例的挂载5. 组件中的数据(状态)5.1 data:数据5.2 data 的访问6...原创 2020-04-20 15:00:41 · 656 阅读 · 0 评论