Vue
Vue知识点总结
韭菜盖饭
一名自学爪哇的小学生
展开
-
Vuex的搭建以及简单使用
一、概念在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。多个组件需要共享数据时,可以使用Vuex二、搭建Vuex首先安装npm install vuex --save2.1、创建文件:src/store/index.js//引入Vue核心库import Vue from 'vue'//引入Vueximport Vuex from 'vuex'//应用Vuex插件Vue原创 2021-08-06 11:55:14 · 571 阅读 · 0 评论 -
axios安装与使用
文章预览1、安装2、引入3、使用方式一方式二4、具体使用get方法无参数时:get方法有参数时方法一:get方法有参数时方法二:5、全局默认设置参考文章https://www.jianshu.com/p/523b0690a0031、安装npm install axios --save2、引入在main.js文件中引入(在main.js引入即为全局引入)// axios需要使用prototype将axios挂载到原型上 ,$后面是自己另起的名称,以后就可以使用该名称Vue.prototype.原创 2021-08-06 09:50:52 · 1357 阅读 · 0 评论 -
Vuex实现多组件数据共享
mapState方法:用于帮助我们映射state中的数据为计算属性computed: { //借助mapState生成计算属性:sum、school、subject(对象写法) ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性:sum、school、subject(数组写法) ...mapState(['sum','school','subjec原创 2021-08-06 15:23:13 · 126 阅读 · 0 评论 -
Vuex之模块化+命名空间
文章预览一、目的二、配置三、使用3.1、开启命名空间后,组件中读取state数据:3.2、开启命名空间后,组件中读取getters数据:3.3、开启命名空间后,组件中调用dispatch3.4、开启命名空间后,组件中调用commit一、目的让代码更好维护,让多种数据分类更加明确。二、配置修改store.js注意要开启命名空间 namespaced:trueconst countAbout = { namespaced:true,//开启命名空间 state:{x:1}, muta原创 2021-08-06 16:42:01 · 713 阅读 · 0 评论 -
Vue之基础教程
官网https://v3.cn.vuejs.org/guide/introduction.html菜鸟教程https://www.runoob.com/vue2/vue-template-syntax.html原创 2021-08-04 17:18:03 · 92 阅读 · 0 评论 -
Vue之路由守卫
一、理解路由导航守卫是为了路由跳转之前做的检查及操作比如:用户没有登录 而是直接通过修改浏览器 url 来访问网页,这种操作无疑是不安全的。路由导航守卫可以让我们对用户要跳转的路由做一次检查,符合条件后放行,不符合条件则强制用户跳转登录页面。二、分类全局守卫、独享守卫、组件内守卫2.1、全局守卫写在路由配置的地方index.js//全局前置守卫:初始化时执行、每次路由切换前执行router.beforeEach((to,from,next)=>{ console.log('befor原创 2021-08-06 18:51:38 · 698 阅读 · 2 评论 -
Vue之全局事件总线
一、理解1.1、 Vue 原型对象上包含事件处理的方法$on(eventName, listener): 绑定自定义事件监听$emit(eventName, data): 分发自定义事件$off(eventName): 解绑自定义事件监听$once(eventName, listener): 绑定事件监听, 但只能处理一次1.2、所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象所有组件对象都能看到 Vue 原型对象上的属性和方法Vue.prototype.bus=newVu原创 2021-08-05 20:43:44 · 6471 阅读 · 0 评论 -
Vue之配置代理解决跨域问题
一、介绍这里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块(这个模块相当于是node.js的一个插件)。二、代码实现2.1、配置代理可以配置多个 //vue-cli3.0 里面的 vue.config.js做配置devServer: { proxy: { '/test': { //这里最好有一个 / target: 'http://hostname:port', // 后台接口域名原创 2021-08-06 10:00:05 · 158 阅读 · 0 评论 -
Vue之组件之间的通信
文章预览前言一、父组件向子组件进行通信二、子组件向父组件传值三、兄弟组件之间相互传值前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:如上图所示,A 和 B、B 和 C、B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代)。这里以props的方式接收组件之间的通信一、父组件向子组件进行通信App.vue中的数据 users:["Henry","Bucky","E原创 2021-08-05 17:16:47 · 74 阅读 · 0 评论 -
第三方动画集成----animate.js
官网https://animate.style/原创 2021-08-06 09:00:35 · 933 阅读 · 0 评论 -
浏览器本地存储Web Storage
文章预览WebStoragelocalStoragesessionStorageWebStorage使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。Web Storage的目的是为了克服由cookie带来的一些限制,当数据需要被严格控制在客户端上时,无须原创 2021-08-05 18:27:52 · 174 阅读 · 0 评论 -
消息订阅与发布----pubsub.js
文章预览一、理解二、使用PubSubJS一、理解这种方式的思想与全局事件总线很相似它包含以下操作:(1) 订阅消息 --对应绑定事件监听(2) 发布消息 --分发事件(3) 取消消息订阅 --解绑事件监听需要引入一个消息订阅与发布的第三方实现库: PubSubJS其实有许多这种消息订阅与发布的js,每种js知识语法不同,这里以punsub.js为例二、使用PubSubJS在线文档: https://github.com/mroderick/PubSubJS下载: npm inst原创 2021-08-05 21:17:25 · 855 阅读 · 0 评论 -
Vue之安装脚手架以及使用
一、安装脚手架第一步(仅第一次执行):全局安装@vue/cli。npm install -g @vue/cli第二步:切换到你要创建项目的目录,然后使用命令创建项目vue create xxxx第三步:启动项目npm run serve二、测试...原创 2021-08-05 09:17:03 · 89 阅读 · 0 评论