![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue基础
Vue基础快速入门
溜_x_i_a_o_迪
本人从事过C++、MFC、Qt、asp.net、C#开发,目前从事Web前端开发,本人很菜,希望大牛们手下留情啊。。。
展开
-
vue事件修饰符的v-on:click.prevent.self与v-on:click.self.prevent区别
今天看vue文档时,事件修饰符里面有一部分看不明白,特地写了个demo测一下,一些新手心得,互相学习。疑问如下:emmm 是什么意思?v-on:click.prevent.self的demo如下: <div id="box"> <div @click="alert(1)"> <a href="/#" @click="alert(2)">a标签 ..转载 2020-08-26 22:02:14 · 675 阅读 · 0 评论 -
Vue 0基础学习路线(27)—— 图解深度详述vue路由的懒加载的使用及原理和深入原理原生js探究静态加载和懒加载、合并打包 - 把组件按组分块及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 引言1.1 项目打包1.2 加载问题深入探究2. 深入原理原生js探究静态加载2.1 example012.1.1 example01-12.1.2 example01-22.1.3 example01-33. 深入原理原生js实现懒加载3.1 example023.1.1 example02-13.1.2 example02-24. 路由懒加载4.1 官方解释5. 路由懒加载实例5.1 深入探究6. 合并打包 - 把组件按组分块7. 功能性组件懒加载1. 引言1.1 项目打包我们打包一原创 2020-08-05 12:35:23 · 413 阅读 · 0 评论 -
Vue 0基础学习路线(26)—— 图解深度详述vue路由的路由元信息的使用和通过meta属性定义需要验证的路由及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 引言2. 路由元信息3. 通过 `meta` 定义要验证的路由4. 实例4.1 example014.2 example024.2.1 example02-14.2.2 example02-21. 引言路由元信息类似鉴权,如果有些页面,不想用刚刚上一篇我们所写的savedPosition效果,如除了详情页,其他页面点击前进和后退都顶到头,这个时候怎么做呢?如果死板地去一个一个判断,是非常麻烦的。判断如果当前to的目标是view,像我们的例子,只有一个页面,还好说,如果上百个页面就没办法原创 2020-08-05 12:18:51 · 355 阅读 · 0 评论 -
Vue 0基础学习路线(25)—— 图解深度详述vue路由的滚动行为火狐浏览器等出现的问题和涉及后退/前进功能的问题和异常滚动及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 滚动行为3. 后退/前进4. 实例4.1 example014.2 example024.3 example034.4 example044.5 example055. 异常滚动1. 重点提炼滚动行为后退/前进2. 滚动行为前端路由并没有重载整个浏览器,只是通过 DOM 进行了局部更新。所以,有的时候,浏览器的一只状态会被保持,比如 滚动条,当我们在一个页面中滚动滚动条,然后跳转到另外一个页面,滚动条会保持在上一个页面中,我们其实更希望滚动条能回到页面顶部,就像重原创 2020-08-05 12:12:54 · 337 阅读 · 0 评论 -
Vue 0基础学习路线(24)—— 图解深度详述vue的路由动画效果的使用及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 路由动画效果2. 实例2.1 example011. 路由动画效果路由动画 =>利用 transition 组件,我们还可以给路由导航加上动效// App.vue<template>...<transition name="fade"> <router-view/></transition>...</template><style>.fade-enter-active { tran原创 2020-08-05 12:05:29 · 182 阅读 · 0 评论 -
Vue 0基础学习路线(23)—— 图解深度详述vue的路由数据获取和导航完成之后获取与导航完成之前获取和详述nProgress进度条第三方库的使用及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 引言3. 路由数据获取4. 导航完成之后获取5. 导航完成之前获取6. 实例6.1 example016.2 example026.2.1 example02-16.2.2 example02-27. 扩展 - nprogress7.1 如何使用7.2 安装7.3 实例1. 重点提炼数据获取导航完成之后获取导航完成之前获取nprogress2. 引言特别是在做移动端的时候,大部分都是单页面应用,在后端再把延时调回来到3s,方便使用。在线上发布项目后,从后端原创 2020-08-05 12:02:00 · 382 阅读 · 0 评论 -
Vue 0基础学习路线(22)—— 图解深度详述vue的路由组件传参和传参默认处理模式、对象模式、回调函数模式三种方式及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 路由组件传参2.1 example012.1.1 example01-12.1.2 example01-22.1.3 example01-32.1.4 example01-42.1.5 example01-52.1.6 example01-63. 案例4. 默认处理5. 对象模式的6. 回调函数模式7. example027.1 example02-17.2 example02-27.3 example02-37.4 example02-47.5 example02-57.6 e原创 2020-08-05 00:33:04 · 663 阅读 · 0 评论 -
Vue 0基础学习路线(21)—— 图解深度详述vue的路由重定向及组件、详细地路由配置和路由取别名和添加404路由页面及详细案例(附详细案例代码解析过程及版本迭代过程)- 求解决重定向高亮失效的问题
文章目录1. 重点提炼2. 重定向2.1 案例2.1.1 组件2.1.2 路由配置2.1.3 example012.1.3.1 example01-12.1.3.2 example01-22.1.3.3 example01-33. 别名3.1 官网解释3.2 example024. `404`1. 重点提炼重定向别名404页面2. 重定向有的时候,我们会根据某种需求对用户请求的页面进行重新定位。重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b:const ro原创 2020-08-05 00:16:45 · 239 阅读 · 0 评论 -
Vue 0基础学习路线(20)—— 图解深度详述vue的嵌套路由和添加路由与子路由、children属性和子路由视图及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 嵌套路由3. 添加路由与子路由3.1 children 属性4. 子路由视图5. 实例5.1 example015.2 example025.3 example035.4 example041. 重点提炼嵌套路由添加路由与子路由children 属性子路由视图2. 嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成在应用增加一个用户个人中心,用户中心又是由多个页面组成,即进入用户中心侧边栏又有导航,如:3. 添加路由与子路由...im原创 2020-08-05 00:08:15 · 535 阅读 · 0 评论 -
Vue 0基础学习路线(19)—— 图解深度详述vue的路由守卫、路由生命周期和组件内守卫、路由守卫、路由独享守卫、全局守卫和完整导航解析流程及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 引言3. 路由守卫4. 生命周期5. 完整的导航解析流程6. 组件内守卫6.1 官方解释6.2 beforeRouteEnter6.2.1 example016.2.1.1 example01-16.2.1.2 example01-26.2.1.3 example01-36.2.1.4 example01-46.2.2 关于this6.3 beforeRouteUpdate6.3.1 example026.3.1.1 example02-16.3.1.2 example02-26原创 2020-08-05 00:00:22 · 237 阅读 · 0 评论 -
Vue 0基础学习路线(18)—— 图解深度详述vue的queryString和$route.query及路由组件的复用、watch的使用及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. queryString2.1 $route.query2.2 编程式导航3. example013.1 example01-13.2 example01-23.3 example01-34. 路由组件的复用4.1 watch5. example025.1 exmaple02-15.2 exmaple02-25.3 exmaple02-31. 重点提炼queryString$route.query路由组件的复用watch2. queryString有的原创 2020-08-02 23:02:33 · 1367 阅读 · 0 评论 -
Vue 0基础学习路线-对比React(17)—— 图解深度详述vue动态路由和路由对象的使用及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 动态路由2.1 example012.1.1 example01-12.1.2 example01-23. 路由对象3.1 $router 对象3.2 $route 对象3.2.1 $route.params3.3 example023.3.1 example02-13.3.2 example02-21. 重点提炼动态路由$router$route2. 动态路由有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url/item/原创 2020-08-02 20:41:41 · 250 阅读 · 0 评论 -
Vue 0基础学习路线(16)—— 图解深度详述vue-devTools的安装和使用及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 引言2. vue-devTools3. 安装步骤4. 使用5. 实例5.1 example015.2 example025.3 优化1. 引言我们可以用浏览器的调试工具,查看请求的数据和头是否正确,但是有没有把数据赋给某个组件,我们可以借助第三方工具查看。2. vue-devTools为了更方便的在开发过程中对Vue程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试参考:https://github.com/vue原创 2020-08-02 16:43:20 · 378 阅读 · 0 评论 -
Vue 0基础学习路线(15)—— 图解深度详述Vue异步请求和跨域、正向代理本地开发及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. Koa搭建后台服务3. 异步请求3.1 axios3.2 请求3.3 example014. 跨域4.1 vue.config.js4.2 跨域请求代理配置4.3 example024.3.1 example02-14.3.2 example02-21. 重点提炼异步请求axios跨域2. Koa搭建后台服务做一个本地后端:yarn inityarn add koa koa-router这里小迪就不细说了,有问题就看小迪关于node的blog吧,我这里原创 2020-08-02 12:12:12 · 239 阅读 · 0 评论 -
Vue 0基础学习路线(14)—— 图解深度详述Vue路由组件和vue-router、创建路由对象、router-view、router-link组件及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. vue-router重点提炼2. 路由3. vue-router 的安装4. Vue.use()5. 创建路由对象6. router-view 组件7. 实例7.1 example017.2 example027.3 example037.4 example047.5 example057.6 example067.7 example077.8 example081. vue-router重点提炼vue-routerVue.use()new VueRouter(options)o原创 2020-08-01 18:51:53 · 593 阅读 · 1 评论 -
Vue 0基础学习路线(13)—— 图解深度详述Vue脚手架和vue-cli、单文件组成、本地服务搭建、自定义脚手架配置及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 脚手架—vue-cli1.1 安装1.2 创建项目1.2.1 命令行方式创建项目1.2.2 UI式交互 —基于浏览器图形界面方式创建项目1.2.3 扩展—什么是渐进式web应用?1.3 打包1.4 目录结构2. 单文件组件2.1 组成2.2 lang (language)属性2.3 src 属性2.4 有作用域的 CSS2.4.1 example012.4.1.1 example01-12.4.1.2 example01-22.4.2 混用本地和全局样式2.5 资源路径处理2.5.1 exam原创 2020-08-01 15:02:58 · 275 阅读 · 2 评论 -
Vue 0基础学习路线(12)—— 图解深度详述Vue插件和安装插件及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 引例2.1 example01-12.2 example01-23. 插件4. 安装插件5. 实例6. example026.1 example02-16.2 example02-21. 重点提炼插件Vue.use传入一个函数或者一个包含有 install 方法的对象扩展 Vue、Vue实例(组件实例)的功能mixin2. 引例其实后面要讲述的路由、状态管理都会用到插件,插件是开发过程中大概率会用到的内容。插件实际很简单,目的就是为了扩展vue功原创 2020-07-31 21:42:25 · 215 阅读 · 0 评论 -
Vue 0基础学习路线(11)—— 图解深度详述Vue动画和Vue动画触发条件及Vue动画生命周期、transition 组件、过渡类名及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 动画3. CSS3.1 example013.1.1 example03-13.1.2 example03-23.1.3 example03-34. JavaScript5. vue 中的动画处理5.1 动画生命周期5.1.1 transition 组件5.1.2 过渡类名5.1.3 vue动画深究5.1.4 example025.1.4.1 example02-15.1.4.2 example02-25.1.4.2.1 深入探究6. 小结1. 重点提炼动画cssj原创 2020-07-31 20:28:53 · 678 阅读 · 0 评论 -
Vue 0基础学习路线(10)—— 图解深度详述Vue动态组件和keep-alive组件、及其生命周期及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 动态组件3. component 组件3.1 example013.1.1 example01-13.1.2 example01-23.1.3 example01-34. keep-alive 组件5. 生命周期5.1 activated5.2 deactivated5.3 example025.3.1 example02-15.3.2 example02-21. 重点提炼动态组件<component></component><keep-原创 2020-07-31 16:59:20 · 391 阅读 · 0 评论 -
Vue 0基础学习路线-对比React(9)—— 图解深度详述Vue生命周期及创建阶段、挂载阶段和更新阶段及错误捕获、卸载阶段、ref、nextTick详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 引例3. 组件生命周期全流程4. 组件生命周期概述5. 创建阶段5.1 beforeCreate()5.2 created()6. 挂载阶段6.1 beforeMount()6.2 mounted()7. example027.1 example02-17.2 example02-27.3 example02-37.4 example02-47.5 example02-58. 更新阶段8.1 beforeUpdate()8.2 updated()9. example039.1 e原创 2020-07-31 14:46:16 · 338 阅读 · 0 评论 -
Vue 0基础学习路线-对比React(8)—— 图解深度详述Vue插槽及详述具名、作用域插槽和props验证及详述非prop特性及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 插槽2.1 example012.1.1 example01-12.1.2 example01-22.1.3 example01-32.1.4 example01-42.2 具名插槽2.2.1 v-slot2.2.2 example022.3 作用域插槽2.3.1 example032.3.1.1 example03-12.3.1.2 example03-23. props 验证3.1 example043.1.1 example04-13.1.2 example04-24. 非原创 2020-07-30 21:14:06 · 365 阅读 · 0 评论 -
Vue 0基础学习路线-对比React(7)—— 图解深度详述Vue组件使用及组件的data、组件的props和组件通信、v-model和.sync及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 组件的注册3. Vue.component()3.1 全局组件与局部组件3.2 example013.2.1 example01-13.2.2 example01-23.2.3 example01-33.2.4 example01-43.2.5 example01-54. data4.1 example024.1.1 example02-14.1.2 example02-24.1.3 example02-34.1.4 example02-44.1.5 example02-54.1原创 2020-07-30 14:13:24 · 291 阅读 · 0 评论 -
Vue 0基础学习路线(6)—— 深度详述Vue过滤器及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 过滤器3. 注册过滤器3.1 全局过滤器3.2 局部过滤器4. example014.1 example01-14.2 example01-25. 好处1. 重点提炼filterVue.filter()过滤器函数管道符过滤器比较简单,理解为函数即可。2. 过滤器过滤器是一个使用在 双大括号插值 和 v-bind 中,用于过滤输出内容的函数假设有一个用于把内容转为大写的过滤器函数 toUpperCase{{content|toUpperCase}}原创 2020-07-29 16:58:22 · 150 阅读 · 0 评论 -
Vue 0基础学习路线(5)—— 图解深度详述Vue.js计算属性computed和监视器watch及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. Vue.js计算属性和watch重点提炼2. 引例2.1 example012.1.1 example01-12.1.2 example01-23. computed3.1 计算属性的 `getter` 与 `setter`3.2 example023.2.1 example02-13.2.2 example02-23.2.3 example02-33.2.4 example02-43.2.5 example02-54. watch4.1 example034.1.1 example03-14原创 2020-07-29 16:55:45 · 336 阅读 · 0 评论 -
Vue 0基础学习路线-对比React(4)—— 图解深度详述Vue自定义指令及详述注册指令、指令使用和最为重要的指令生命周期(钩子函数)及详细案例(附详细案例代码解析过程及版本迭代过程)
文章目录1. 自定义指令重点提炼2. Vue重要概念简述3. 注册指令4. 全局指令4.1 example014.1.1 example01-14.1.2 example01-24.2 自定义指令实例5. 局部指令6. 指令生命周期(钩子函数)6.1 bind6.2 inserted6.3 update6.4 componentUpdated6.5 unbind6.6 传入参数7. 案例7.1 官网的例子7.2 example027.2.1 example02-17.2.2 example02-27.2.原创 2020-07-29 16:50:45 · 417 阅读 · 0 评论 -
Vue 0基础学习路线-对比React(3)—— 图解深度详述Vue事件基础入门及v-on和简写形式、事件绑定格式、this对象、事件对象和事件、按键修饰符(附详细案例代码解析过程及版本迭代过程)
文章目录1. 重点提炼2. 事件2.1 example012.1.1 example01-12.1.2 example01-22.1.3 example01-33. 组件的 `methods` 选项3.1 example023.1.1 example02-13.1.2 example02-24. 通过内联方式绑定事件处理函数4.1 example034.1.1 example03-14.1.2 example03-24.1.3 example03-34.1.4 example03-45. 事件修饰符5.1原创 2020-07-29 00:25:35 · 204 阅读 · 0 评论 -
2-Vue秒懂常用指令及修饰符类比React-附实例代码
文章目录1. 重点提炼2. 指令3. 内容输出3.1 v-text3.1.1 example013.1.1.1 example01-13.1.1.2 example01-23.1.1.3 example01-33.2 v-cloak3.2.1 example023.2.1.1 example02-13.2.1.2 example02-23.2.1.3 example02-33.3 v-html3.3.1 example033.3.1.1 example03-13.3.1.2 example03-23.4 v原创 2020-07-29 00:16:59 · 313 阅读 · 0 评论 -
1-Vue及组件入门类比React-附实例代码(20.8.10)
文章目录1. 重点提炼2. vue.js2.1 渐进式(诱导式)2.2 Vue 核心3. 引入4. 组件4.1 组件基本分类4.2 根组件的创建4.2.1 example014.3 可复用的功能组件5. 组件内容渲染5.1 template5.2 el5.2.1 example025.2.1.1 example02-15.2.1.2 example02-25.2.1.3 example02-35.2.1.4 example02-45.2.1.5 example02-55.2.1.6 example02-65原创 2020-07-29 00:08:57 · 187 阅读 · 0 评论