![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
vue常用
vue
空投在我怀里
这个作者很懒,什么都没留下…
展开
-
vue常用之“定义全局变量constants”
1.新建原创 2022-05-29 21:30:34 · 1033 阅读 · 0 评论 -
vue常用数据操作之“字面量合并”
组件A<template> <section class="jumbotron"> <h3 class="jumbotron-heading">Search Github Users</h3> <div> <input type="text" placeholder="enter the name you search" v-model="keyWord"/> <button @cl原创 2022-04-20 09:28:08 · 332 阅读 · 0 评论 -
vue常用之axios“接口的错误拦截”
import Vue from 'vue'import App from './App.vue'import router from "./router";//如果是routersimport axios from 'axios'import Vuelazyload from 'vue-lazyload'import VueCookie from 'vue-cookie'import store from './store';// import env from './env'//1..原创 2022-03-15 10:13:39 · 1200 阅读 · 0 评论 -
vue常用路由router之“路由的两种工作模式”
对于一个url来说,什么是hash值?—— #及其后面的内容就是hash值。 hash值不会包含在 HTTP 请求中,即:hash值不会带给服务器。 hash模式: 地址中永远带着#号,不美观 。 若以后将地址通过第三方手机app分享,若app校验严格,则地址会被标记为不合法。 兼容性较好。 history模式: 地址干净,美观 。 兼容性和hash模式相比略差。 应用部署上线时需要后端人员支持,解决刷新页面服务端404的问题。 ...原创 2022-03-13 09:15:33 · 983 阅读 · 0 评论 -
vue常用路由router之“路由守卫”
作用:对路由进行权限控制 分类:全局守卫、独享守卫、组件内守卫 全局守卫: //全局前置守卫:初始化时执行、每次路由切换前执行router.beforeEach((to,from,next)=>{ console.log('beforeEach',to,from) if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制 if(localStorage.getItem('school') === 'atguigu'){ //权限控制的..原创 2022-03-14 08:09:11 · 913 阅读 · 0 评论 -
vue常用路由router之“组件被激活,与失活”生命周期钩子
作用:路由组件所独有的两个钩子,用于捕获路由组件的激活状态。 具体名字: activated路由组件被激活时触发。 deactivated路由组件失活时触发。 案列展示:1.父组件<template> <div> <h2>Home组件内容</h2> <div> <ul class="nav nav-tabs"> <li> <router-link class="l原创 2022-03-11 08:40:44 · 1630 阅读 · 0 评论 -
vue常用路由router之“缓存路由组件、后退、前进、任意跳转”
作用:让不展示的路由组件保持挂载,不被销毁。 具体编码: <keep-alive include="News"> <router-view></router-view></keep-alive> 案列展示:1.案列1:<template> <div class="col-xs-offset-2 col-xs-8"> <div class="page-header">...原创 2022-03-11 08:40:32 · 853 阅读 · 0 评论 -
vue常用路由router之“push和replace”
一、<router-link>push是追加历史记录,replace是替换当前记录作用:控制路由跳转时操作浏览器历史记录的模式 浏览器的历史记录有两种写入方式:分别为push和replace,push是追加历史记录,replace是替换当前记录。路由跳转时候默认为push 如何开启replace模式:<router-link replace .......>News</router-link>二、案列展示:1.案列1<template>原创 2022-03-11 08:40:19 · 13872 阅读 · 0 评论 -
vue常用路由router之“路由的props配置”
作用:让路由组件更方便的收到参数{ name:'xiangqing', path:'detail/:id', component:Detail, //第一种写法:props值为对象,该对象中所有的key-value的组合最终都会通过props传给Detail组件 // props:{a:900} //第二种写法:props值为布尔值,布尔值为true,则把路由收到的所有params参数通过props传给Detail组件 // props:true //第三种写法:props值为原创 2022-03-11 08:40:06 · 2487 阅读 · 0 评论 -
vue常用路由router之“路由的params参数”
配置路由,声明接收params参数 { path:'/home', component:Home, children:[ { path:'news', component:News }, { component:Message, children:[ { name:'xiangqing', path:'detail/:id/:title', //使用占位符声明接收params参数 component:Detail ..原创 2022-03-11 08:39:57 · 1832 阅读 · 0 评论 -
vue常用路由router之“命名路由”
作用:可以简化路由的跳转。 如何使用 给路由命名: { path:'/demo', component:Demo, children:[ { path:'test', component:Test, children:[ { name:'hello' //给路由命名 path:'welcome', component:Hello, } ] } ]} ..原创 2022-03-13 09:15:51 · 210 阅读 · 0 评论 -
vue常用路由router之“路由的query参数”
传递参数 <!-- 跳转并携带query参数,to的字符串写法 --><router-link :to="/home/message/detail?id=666&title=你好">跳转</router-link> <!-- 跳转并携带query参数,to的对象写法 --><router-link :to="{ path:'/home/message/detail', query:{ id:666,..原创 2022-03-11 08:39:44 · 1074 阅读 · 0 评论 -
vue常用路由router之“多级路由”
一、多级路由(多级路由) 配置路由规则,使用children配置项: routes:[ { path:'/about', component:About, }, { path:'/home', component:Home, children:[ //通过children配置子级路由 { path:'news', //此处一定不要写:/news component:News }, { path:'message',//此处一定不原创 2022-03-14 08:09:24 · 991 阅读 · 0 评论 -
vue常用之“路由router安装”
1.概念理解: 一个路由(route)就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。 前端路由:key是路径,value是组件。2.基本使用 安装vue-router,命令:npm install --save vue-router@3在vue2.0中 应用插件:Vue.use(VueRouter) 编写router配置项: //引入VueRouterimport VueRouter from 'vue-router'//原创 2022-03-11 08:39:23 · 2135 阅读 · 0 评论 -
vue常用之状态管理的vuex“getters“
概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。 在store.js中追加getters配置 ......const getters = { bigSum(state){ return state.sum * 10 }}//创建并暴露storeexport default new Vuex.Store({ ...... getters}) 组件中读取数据:$store.getters.bigSum 案列展示:..原创 2022-03-11 08:39:10 · 345 阅读 · 0 评论 -
vue常用之状态管理的vuex“4个map“
一、四个map方法的使用 mapState方法:用于帮助我们映射state中的数据为计算属性 computed: { //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性:sum、school、subject(数组写法) ...mapState(原创 2022-03-13 09:16:16 · 202 阅读 · 0 评论 -
vue常用之状态管理的“vuex“案列展示
1.在sotre/index.js//该文件用于创建Vuex中最为核心的storeimport Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备actions——用于响应组件中的动作(--传入)const actions = { /* jia(context,value){ console.log('actions中的jia被调用了') context.commit('JIA',v原创 2022-03-11 08:38:51 · 97 阅读 · 0 评论 -
vue常用之状态管理的“vuex“
1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。2.何时使用? 多个组件需要共享数据时3.搭建vuex环境 创建文件:src/store/index.js //引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue.use(Vuex)//准备act原创 2022-03-13 09:16:03 · 73 阅读 · 0 评论 -
vue常用之状态管理的vuex的“模块化编码“
一、目的:让代码更好维护,让多种数据分类更加明确。二、修改store.jsconst countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } }}const personAbout = { namespaced.原创 2022-03-14 08:10:16 · 196 阅读 · 0 评论 -
vue常用插槽之“作用域插槽“
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子组件。 分类:默认插槽、具名插槽、作用域插槽 使用方式: 作用域插槽: 理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。(games数据在Category组件中,但使用数据所遍历出来的结构由App组件决定) 具体编码:父组件中: <Category> <template scope="sc...原创 2022-03-14 08:10:04 · 165 阅读 · 0 评论 -
vue常用插槽之“具名插槽“
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子组件。 分类:默认插槽、具名插槽、作用域插槽 使用方式: 具名插槽: 父组件中: <Category> <template slot="center"> <div>html结构1</div> </template> <template v-slot:footer> <div>...原创 2022-03-14 08:09:36 · 1365 阅读 · 0 评论 -
vue常用插槽之“默认插槽“
作用:让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件 ===> 子组件。 分类:默认插槽、具名插槽、作用域插槽 使用方式: 默认插槽: 父组件中: <Category> <div>html结构1</div> </Category> 子组件中: <template> <div> <!-- 定义插槽 --> <slot...原创 2022-03-14 08:09:52 · 993 阅读 · 0 评论 -
vue常用之任意组件间通信“消息订阅与发布“
一种组件间通信的方式,适用于任意组件间通信。 使用步骤: 安装pubsub:npm i pubsub-js 引入:import pubsub from 'pubsub-js' 接收数据:A组件想接收数据,则在A组件中订阅消息,订阅的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted() { this.pid = pubsub.subscribe('xxx',this.demo)...原创 2022-03-10 14:26:26 · 127 阅读 · 0 评论 -
vue常用之获取DOM元素的“ref“
<template> <div> <h1 v-text="msg" ref="title"></h1> <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button> <School ref="sch"/> </div></template><script> //引入School组件 import School .原创 2022-03-10 14:19:01 · 328 阅读 · 0 评论 -
vue常用之“常用的生命周期“
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>引出生命周期</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- .原创 2022-03-10 14:15:15 · 110 阅读 · 0 评论 -
vue常用之“计算属性computed“
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>姓名案例_计算属性实现</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <.原创 2022-03-10 14:13:26 · 66 阅读 · 0 评论 -
Vue常用之“watch监听”
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>天气案例_监视属性_简写</title> <!-- 引入Vue --> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <.原创 2022-03-10 14:11:10 · 67 阅读 · 0 评论 -
vue常用之响应式修改值“$set“
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器--> <div id=.原创 2022-03-10 14:04:53 · 682 阅读 · 0 评论 -
Vue常用之DOM元素未更新时的回调“nextTick”
<template> <li> <label> <!-- 如下代码也能实现功能,但是不太推荐,因为有点违反原则,因为修改了props --> <!-- <input type="checkbox" v-model="todo.done"/> --> <input type="text" ref="inputTitle" v-show="todo.edit" :value=.原创 2022-03-10 13:53:37 · 1043 阅读 · 0 评论 -
Vue常用之父子组件间的通信“组件的自定义事件”
一种组件间通信的方式,适用于:子组件 ===> 父组件 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。 绑定自定义事件: 第一种方式,在父组件中:<Demo @atguigu="test"/>或<Demo v-on:atguigu="test"/> 第二种方式,在父组件中: <Demo ref="demo"/> ...... mounted(){ t...原创 2022-03-10 13:37:12 · 753 阅读 · 0 评论 -
Vue常用的复用方式“mixin(混入)”
功能:可以把多个组件共用的配置提取成一个混入对象 使用方式: 第一步定义混合: { data(){....}, methods:{....} .... } 第二步使用混入: 全局混入:Vue.mixin(xxx) 局部混入:mixins:['xxx'] 案列展示:1. 定义混入,如图所示2.在main.js使用//引入Vueimport Vue from 'vue'//引入Appimport App from './App.vue'imp...原创 2022-03-10 13:19:30 · 347 阅读 · 0 评论 -
Vue组件通信之“全局事件总线-兄弟组件间的通信”
一种组件间通信的方式,适用于任意组件间通信。 安装全局事件总线: new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的vm }, ...... }) 使用事件总线: 接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。 methods(){ demo(data){......} } ...... mounted(..原创 2022-03-10 13:01:29 · 155 阅读 · 0 评论