摘要：Vue UI 组件库：https://element.eleme.cn 移动端常用UI组件库 Vant：https://youzan.github.io/vant Cube UI：https://didi.github.io/cube-ui Mint UI：https://mint-ui.githu
阅读全文
随笔分类 - Vue
Vue学习笔记
摘要：histroy模式+hash模式
阅读全文
摘要：路由守卫简介 作用：用于对路由进行权限控制 分类：全局守卫(前置路由守卫 + 后置路由守卫)、独享守卫、组件内守卫 全局--前置路由守卫 + 后置守卫 示例 1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 import H
阅读全文
摘要：activated + deactivated 注：生命周期学习可参考学习笔记33 两个新的生命周期钩子 作用：路由组件所独有的两个构造，用于捕获路由组件的激活状态 具体名称：activated--路由组件被激活时触发 + deactivated--路由组件失活时触发 示例如下所示： 1 <temp
阅读全文
摘要：缓存路由组件 作用：让不展示的路由组件保持挂载、不被销毁(eg：常用于，缓存录入的数据) 具体实现： <!-- include="News" 组件名，如果不添加配置，则缓存router-view中展示的组件 --> <keep-alive include="News"> <router-view><
阅读全文
摘要：编程式路由导航 示例一： Message.vue 1 <template> 2 <div> 3 <h3>Message page</h3> 4 <ul> 5 <li v-for="m in messageList" 6 :key="m.id"> 7 <!-- <router-link :to="{
阅读全文
摘要：常用插件安装指令 安装脚手架(学习笔记39) 第一步：(仅第一次执行--新环境执行，创建过项目的话，从第二步开始)：全局安装@vue/cli (command line interface) 查看镜像：npm config get registry 安装钱建议先设置镜像==》npm config s
阅读全文
摘要：一：路由简介 路由就是一组key-value的对应关系 多个路由，需经过路由器进行管理 SPA应用：single page web application(单页面web应用) Vue-router 一：相关理解 vue-router：vue的一个插件库(需安装--npm install vue-ro
阅读全文
摘要：vuex模块化 + namespace 示例一： 目录结构如下所示 main.js 1 // 引入Vue 2 import Vue from 'vue' 3 // 引入App 4 import App from './App.vue' 5 // 配置提示 6 Vue.config.productio
阅读全文
摘要：nanoid--用于生成唯一主键id 使用操作步骤 第一步：npm install nanoid 第二步：import { nanoid } from 'nanoid' 第三步：id:nanoid(), //也可以指定生成字符串的长度，如nanoid(5) uuid--用于生成唯一主键id 第一步：
阅读全文
摘要：原始实现 <template> <div> <h3>当前求和*10为：{{ bigSum }}</h3> <h3>当前求和为：{{ sum }}</h3> <h3>我在：{{ school }}，学习:{{subject }}</h3> <select v-model.number="selectN
阅读全文
摘要：示例一：通过计算属性 src/store/index.js // 该文件用于创建vuex中最为核心的store // 引入Vue import Vue from 'vue' // 引入vuex import Vuex from 'vuex' // 使用插件 Vue.use(Vuex) /* 准备ac
阅读全文
摘要：store(getters) 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工 在store.js(src/store/index.js)中追加getters配置 // 准备getters--用于将state中的数据进行加工 const getters = { bigSu
阅读全文
摘要：vuex 专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。 Github地址：https://github.com/vuejs/vuex 什么时候使用Vuex 多个组件依赖于同一状
阅读全文
摘要：插槽总结： 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件之间通信的方式，适用于--父组件==》子组件。 分类：默认插槽、具名插槽、作用域插槽 使用方式 默认插槽 父组件中： <Category> <div>html结构</div> </Category> 子组件中： <templ
阅读全文
摘要：vue常用Ajax库 ： 1.vue-resource插件库 npm i vue-resource 使用方式略，不建议使用，vue1.x使用广泛，官方已不维护 2.axios 通用的Ajax请求库，官方推荐，使用广泛 axios在Vue项目中可以用来向后台发送请求（调接口API），获取响应信息的一个
阅读全文
摘要：vue脚手架配置代理 方式一：在vue.config.js中添加如下配置 devServer:{ proxy:"http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发送给前端(8080)即可 缺点：不能配置多个代理，不能灵活的控制请求是否走代理 工作方式：若按照上
阅读全文
摘要：动画效果 注：多个动画可使用 name 属性处理<transition name='test'>,则需使用test-enter-active替换v-enter-active 示例一： Test.vue——主要代码文件 <template> <div> <button @click="isShow=!
阅读全文
摘要：消息订阅与发布 1.订阅消息(需要数据的人)：消息名称 2.发布消息(提供数据的人)：消息内容 注： 1.订阅名称和发布名称一致 2.需要数据的人--订阅消息；提供数据的人--发布消息 示例一： 第一步：安装支持库 安装第三方支持库：pubsub.js(退出项目运行后执行以下命令，安装库文件) np
阅读全文
摘要：Vue全局事件总线：一种组件之间通信的方式，适用于任意组件之间通信。 1.所有组件，即VueComponent所有的组件实例对象vc 2.每次使用VueComponent都是new一个新的vc 3.Vue.prototype=VueComponent.prototype.__proto__(可以让组
阅读全文
