![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 70
vue基础知识学习
onjulythe17th
这个作者很懒,什么都没留下…
展开
-
Vue(路由)9.路由组件传参
vue-router文章目录vue-router路由组件传参案例默认处理对象模式的回调函数模式路由组件传参我们通常把路由直接映射(绑定)的组件称为 路由组件,也只有路由组件才能直接调用路由有关对象:$router、$route当我们一个组件即希望作为路由组件使用,又可能作为功能组件(某个页面中的一部分)去使用,这个时候路由组件传参的方式来做到这点案例我们对 item.vue 组件进行改造,当我们在 home.vue 的商品列表上移入移出,出现商品信息提示层[外链图片转存失败,源站可能有防盗链机原创 2020-08-17 09:43:38 · 103 阅读 · 0 评论 -
Vue(路由)8.重定向与别名
vue-router文章目录vue-router重定向案例组件路由配置别名404重定向有的时候,我们会根据某种需求对用户请求的页面进行重新定位案例现有一小说网站,提供了 男生频道 和 女生频道 的两个入口,用户首次进入页面的时候,会出现选择,并记住用户的选择,以后该用户进入网站直接根据记录的选择进入对应的频道组件// BookChoose.vue<template> <div> <router-link :to="{name: 'book原创 2020-08-17 09:42:15 · 117 阅读 · 0 评论 -
Vue(路由)7.嵌套路由
vue-router文章目录vue-router嵌套路由添加路由与子路由children 属性子路由视图嵌套路由一些比较复杂的应用会有多层嵌套的路由和组件组成在应用增加一个用户个人中心,用户中心又是由多个页面组成,如:[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-p7iJlTOk-1597628460142)(assets/vue-router-usercenter.png)]添加路由与子路由...import User from './views/User.原创 2020-08-17 09:41:20 · 94 阅读 · 0 评论 -
Vue(路由)6.路由守卫
vue-router文章目录vue-router路由守卫组件内守卫beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave路由守卫参数tofromnext路由独享的守卫全局守卫beforeEachbeforeResolveafterEach路由守卫当导航发生改变的时候,vue-router 会在多个不同的地方调用指定的函数,也就是与路由有关的生命周期函数,也称为:路由守卫组件内守卫路由独享守卫全局守卫组件内守卫定义在组件内的与路由有关的生命周期函原创 2020-08-17 09:40:38 · 102 阅读 · 0 评论 -
Vue(路由)5.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-08-17 09:39:52 · 370 阅读 · 0 评论 -
Vue(路由)4.动态路由
vue-router文章目录vue-router动态路由路由对象$router 对象$route 对象$route.params动态路由有的时候,我们需要把满足某种规则的路由全部匹配到同一个组件,比如不同的商品的 url/item/1/item/2/item/3...我们不可能为每一个商品都定义一个独立的组件,而是把它们都映射到同一个组件,同时 url 后面的部分为动态变化的部分,我们会在设计路由的时候进行特殊的处理...{ path: '/item/:itemId', nam原创 2020-08-17 09:38:49 · 810 阅读 · 0 评论 -
Vue(路由)3.devTools
vue-devTools文章目录vue-devToolsvue-devTools安装步骤vue-devTools为了更方便的在开发过程中对 Vue 程序进行调试,除了传统的浏览器自带的 debug 工具以外,我们还可以通过一些专门为 Vue 提供的扩展插件来进行调试参考:https://github.com/vuejs/vue-devtoolsVue.js-devtools,点击下载安装步骤1、首先进入浏览器设置,点击 扩展程序[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接原创 2020-08-17 09:38:06 · 598 阅读 · 0 评论 -
Vue(路由)2.异步请求
vue-router文章目录vue-router异步请求axios请求跨域vue.config.js跨域请求代理配置异步请求在实际的应用开发中,与后端交互,进行异步请求是很常见的需求axiosnpm i axios请求// home.vue<template> <div class="home"> Home </div></template><script>import axios from 'axios'原创 2020-08-17 09:37:10 · 363 阅读 · 1 评论 -
Vue(路由)1.vue-router
vue-router文章目录vue-router路由vue-router 的安装Vue.use()创建路由对象router-view 组件路由当应用变得复杂以后,我们就需要通过一种便捷、高效的方式来管理应用,最常见的就是通过路由路由:把 url 与 应用中的对应的组件进行关联,通过不同的 url 访问不同的组件vue-router 的安装npm i vue-router// ORyarn add vue-routerVue.use()通过前面提到的 Vue.use 方法,把 vue-r原创 2020-08-17 09:35:25 · 78 阅读 · 0 评论 -
vue-element-admin修改.eslintignore来避免Use // eslint-disable-next-line to ignore the next line.
报错:You may use special comments to disable some warnings.Use // eslint-disable-next-line to ignore the next line.Use /* eslint-disable */ to ignore all warnings in a file.有的文章说要在build中注释掉配置,好像vue-element-admin里面build是没啥文件的(就一个index),要用.eslintignore才行原创 2020-08-05 13:56:29 · 571 阅读 · 1 评论 -
Vue(一)6.过滤器
Vue.js文章目录Vue.js过滤器注册过滤器全局过滤器局部过滤器实例过滤器过滤器是一个使用在 双大括号插值 和 v-bind 中,用于过滤输出内容的函数假设有一个用于把内容转为大写的过滤器函数 toUpperCase{{content|toUpperCase}}| : 管道符,表示数据从左至右通过管道符进行传递过滤器可以有多个,执行顺序从左至右,过滤器函数第一个参数的值就是其管道符前一个的结果注册过滤器全局过滤器Vue.filter('过滤器名称', 过滤器函数);局部过滤原创 2020-08-04 14:40:44 · 163 阅读 · 0 评论 -
Vue(一)5.computed 与 watch
Vue.js文章目录Vue.jscomputed计算属性的 `getter` 与 `setter`watch多层监听深度监听computed在实际的应用中,我们会有一些原始数据,同时在应用中又会有一些数据是根据某些原始数据派生出来的,针对这样的一种情况,vue 定义了一个专门用来处理这种派生数据的选项:computed<div id="app"> <label><input type="radio" v-model="gender" value="" /> 所原创 2020-08-04 14:40:02 · 122 阅读 · 0 评论 -
Vue(一)4.组件
Vue.js文章目录Vue.js组件的注册Vue.component()全局组件与局部组件dataprops组件通信$emit()组件双绑的实现v-modelmodel 选项.syncupdate:[prop]插槽具名插槽v-slot作用域插槽props 验证非 prop 特性替换/合并已有的特性禁用特性继承组件的注册在 vue 中,我们可以通过 new Vue 来创建一个组件,不过通常它是作为整个应用的顶层根组件存在的,我们还可以通过另外的方式来注册一个更为通用的组件Vue.component()原创 2020-08-03 07:12:41 · 216 阅读 · 0 评论 -
Vue(一)3.事件
Vue.js文章目录Vue.js事件组件的 `methods` 选项通过内联方式绑定事件处理函数事件修饰符.stop.prevent.capture.self.once.passive按键修饰符.keyCode.enter.down.exact原生事件事件在 vue 中,事件通过指令 v-on 进行绑定,v-on 缩写 @<组件 v-on:事件名称="表达式" /><组件 @事件名称="表达式" />组件的 methods 选项在组件选项中,提供了一个 methods原创 2020-08-03 07:11:53 · 308 阅读 · 0 评论 -
Vue(一)2.指令
Vue.js文章目录Vue.js指令内容输出v-textv-cloakv-htmlv-oncev-pre逻辑处理v-showv-ifv-else / v-else-if循环与列表v-for:key属性绑定v-bind缩写样式styleclass单向数据流v-model表单`text` 和 `textarea``checkbox` 和 `radio``select`指令修饰符.lazy.number.trim自定义指令注册指令全局指令局部指令指令生命周期(钩子函数)案例官网的例子扩展:自定义拖拽指令指令原创 2020-08-03 07:10:06 · 167 阅读 · 0 评论 -
Vue(一)1.基础
Vue.js文章目录Vue.jsvue.js渐进式Vue 核心引入组件组件基本分类根组件的创建可复用的功能组件组件内容渲染templateelrender使用 $mount 方法延迟 `Vue` 实例的挂载组件中的数据(状态)datadata 的访问模板语法Mustache(双大括号,大胡子) 语法插值表达式数据到视图的更新检测变化的注意事项扩展使用 Vue.set 方法添加新数据vue.js[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXDNylyT-1596187原创 2020-07-31 17:22:53 · 1045 阅读 · 0 评论 -
vue-element-admin初次安装过程中的错误:spawn cmd enoent/error code elifecycle/This is probably not a problem wi
vue-element-admin按照如下步骤安装然后到npm run dev的时候就报错了。。20 error code ELIFECYCLE21 error errno 122 error vue-element-admin@4.4.0 dev: `vue-cli-service serve`22 error Exit status 123 error Failed at the vue-element-admin@4.4.0 dev script.23 error This is prob原创 2020-07-31 12:55:49 · 746 阅读 · 0 评论