![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue学习笔记
文章平均质量分 78
钢铁直女.
这个作者很懒,什么都没留下…
展开
-
Vue之axios网络请求21
Vue之axios选择网络模块选择网络模块传统ajax(基于XHR)配置和调用等环混乱编码问题jquery-ajaxVue-resource(基于Vue1.0)不再维护、更新axios框架浏览器中发送XHR请求在node中发送http请求支持Promise拦截请求和响应转换请求和响应数据……安装axiosnpm install axios --save模拟请求:httpbin.org接口urlhttp://123.207.32.3原创 2021-07-09 16:00:55 · 234 阅读 · 0 评论 -
Vue全家桶之Vuex20
Vuex认识VuexVuex与vue.prototype的区别状态管理单页面状态管理多界面状态管理Vuex状态管理Vuex核心概念StateGetters参数Mutation传递参数:提交风格响应规则类型常量同步函数Action基本使用Module局部状态Vuex的基本使用初始代码state的使用获取state对象获取state中的某数据getters的使用只有参数state参数state、gettersmutations的使用只有参数state参数state、payload使用常量替代 Mutation原创 2021-07-05 14:43:39 · 270 阅读 · 0 评论 -
vue之Promise19
vue之Promise认识PromisePromise的三种状态Promise链式调用认识PromisePromise是异步编程的一种解决方案。一般情况下有异步操作时,使用promise对异步操作进行封装。使用Promise可以避免回调地狱。以下都用定时器来模拟异步事件假设data是从服务器请求到的数据,console.log是处理方式 setTimeout(function () { let data = 'Hello Vue' console.log(data);原创 2021-07-03 16:09:33 · 85 阅读 · 0 评论 -
keep-alive及其属性18
xxxkeep-alive:可以使被包含的组件保留状态,或避免重新渲染router-view被包在keep-alive,所有路径匹配到的视图组件都会被缓存(不调用destroyed)补充:destroyed销毁,跳转到其他页面的时,调用原组件的destroyed方法一,失效以下函数,只有组件被保持了状态,使用keep-alive时,才有效activated,进入时调用,可以被回调的函数。先created再activateddeactivated,离开时调用,此时的this.$router指向原创 2021-06-29 15:22:56 · 1226 阅读 · 0 评论 -
vue之全局导航守卫17
vue之全局导航守卫普通的修改方法在index.js中方法一效果方法2效果同理路由对象可以加meta:{title:}导航守卫:监听路由跳转过程router.beforeEach(function(to,from,next){// form到todocument.title = to.matched[0].metatitlenext();//必须要有,且不能更名})title动态改变created生命周期函数中可以调用document.titl原创 2021-06-28 15:36:42 · 163 阅读 · 0 评论 -
vue-router之动态路由、懒加载、路由嵌套、传递参数16
vue-router之动态路由动态路由认识动态路由使用动态路由$route与$router的区别动态路由的懒加载解析打包文件认识路由懒加载路由懒加载主要作用路由懒加载的三种方法1、结合vue异步组件和webpack(现在基本不用了)2、AMD写法3、ES6 简单写法(目前常用)使用路由懒加载效果路由嵌套实现嵌套路由创建对应子组件在路由映射中配置对应的子路由在组件内使用rout-link、router-view,展示子路由对应的组件效果路由传递参数paramsquery动态路由认识动态路由动态路由:pa原创 2021-05-23 20:31:58 · 358 阅读 · 0 评论 -
vue-router的安装、使用15
vue-router的安装、使用认识[vue-router](https://router.vuejs.org/zh/)安装-router安装vue-router配置vue-router使用vue-router步骤路由的默认路径设置history模式router-link的属性补充认识vue-router目前流行的前端三大框架:Vue、React、Angular都有自己的路由实现。vue-router基于路由和组件实现路由用于设定访问路径,将路径与组件映射起来vue-router适合用于构建原创 2021-05-14 19:54:21 · 108 阅读 · 0 评论 -
认识路由及其实现的两种方法14
vue路由vue-router认识路由后端路由、前后端分离、前端路由1、后端路由2、前后端分离3、前端路由前端路由的实现改变URL的hash修改HTML5的history1、pushState,入栈,返回当前url2、replaceState,替代当前url,返回新的url3、back,返回下一个url4、forward,返回上一个url5、go,以当前位置的基准点,返回上/下第n个认识路由路由(网络工程术语),指通过互联的网络把信息从原地址传输到目的地址的活动。生活中常见的,路由器。路由器有两种机制原创 2021-05-14 15:46:32 · 487 阅读 · 1 评论 -
vue-cli的认识及使用13
vue-cli的认识及使用认识vue-clivue-cli的使用前提1. node2. webpack使用vue-cli1. 使用npm全局安装vue-cli2. 可以拉取vue-cli2进行使用3. 创建项目认识vue-clicli:Command-Line Interface,命令行界面,俗称脚手架。vue-cli是官方发布的vue.js项目脚手架。使用vue.js进行大型应用开发时,需要考虑代码目录结构、项目结构、热加载、代码单元测试……为了提高效率,可以使用vue-cli快速搭建vue开发原创 2021-05-12 17:20:58 · 189 阅读 · 0 评论 -
vue组件插槽slot12
组件插槽slot为什么在组件内使用slot同一个组件可能会在不同的地方多次使用,最好的封装方式是抽取共性,保留不同。把大部分地方都需要的相同的部分直接写在组件内,少部分不相同的地方则在预留的插槽中实现,可以更好的让使用者根据自己的需求决定slot中要插入什么内容。slot插槽作用:使封装的组件更具扩展性。slot的基本使用方法普通组件具体效果:含slot插槽的组件具体效果:slot插槽中含默认内容的组件具体效果:含具名插槽的组件具体效果:...原创 2021-03-26 15:20:55 · 1229 阅读 · 0 评论 -
vue父子组件互相访问11
父子组件互相访问原创 2021-03-22 20:37:35 · 91 阅读 · 0 评论 -
vue父子组件通信实现打印斐波那契数列10
父子组件通信实现打印斐波那契数列效果:实现代码:Fibonacci.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件通信之斐波那契数列案例</title></head><body> <div id="info"> <showfib :fnums="nums"原创 2021-03-19 19:25:42 · 181 阅读 · 0 评论 -
vue简易计算器小案例09
简易计算器小案例逻辑部分没有完全实现,主要用来练手,加强理解父子组件之间的通信过程。效果:简易计算器代码counter.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>组件通信之简易计算器小案例</title> <link rel="stylesheet" href="counter.css">原创 2021-03-19 15:30:03 · 231 阅读 · 0 评论 -
vue组件化开发08
1. 什么是组件化将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,方便页面的管理和维护,且扩展性也更强。2. 组件化的思想我们将一个完整的页面分成很多个组件。每个组件都用于实现页面的一个功能块。每一个组件又可以进行细分。Vue提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用,而任何的应用都会被抽象成一颗组件树。注册组件的基本步骤调用vue.extend创建组件构造器;在创建组件构造器时,传入template代表我们自定义组件的模板原创 2021-03-17 21:32:25 · 100 阅读 · 0 评论 -
Vue之js高阶函数07
js高阶函数之filter、map、reduce1. filterfilter中的回调函数需要返回一个boolean值。若返回true,则本次回调的元素,加入到新数组中;若返回false,则过滤掉本次回调的元素,不会加入到新数组中。数组2 = this.数组1.filter(function (i) { return true/false; })2. mapmap:对数组中的所有元素都进行操作时使用。数组2 = this.数组1.map(function原创 2021-03-11 17:44:48 · 88 阅读 · 0 评论 -
vue事件监听06
vue事件监听v-onv-on传参问题方法中只有一个形参,调用方法时传一个参数方法中的形参值为传入的参数值不传参数(不省略括号)方法中的形参为undefined不传参数(省略括号)vue默认将浏览器生成的event事件当做对象传入到方法中<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1v-on参数问题</tit原创 2021-03-08 20:03:13 · 90 阅读 · 0 评论 -
vue之ES6基础知识点补充05
ES6基础知识点补充ES5:var没有块级作用域;if、for没有块级作用域,用闭包解决应用外部变量(var变量)的问题(因为函数是一个作用域)。ES6:let:变量,块级作用域(变量在什么范围内可用)const:常量,没有块级作用域...原创 2021-03-08 09:37:47 · 213 阅读 · 1 评论 -
vue图书购物车案例小测试04
最终效果需求分析列表显示id号、书名、出版时间、价格、购买数量、删除等信息和操作按钮;点击+、-实现增加或减少购买数量,且当购买数量减少到0时隐藏’-'按钮;点击移除按钮实现从购物车删除该书的信息;计算购物车中所有书的总价实现效果显示书籍信息和总价信息增加/减少购买数量,总价也随之改变删除不想购买的书,总价也随之改变实现代码<!DOCTYPE html><html lang="en"><head> <me原创 2021-03-05 20:26:42 · 229 阅读 · 0 评论 -
vue计算属性(computed)及computed与methods的区别03
计算属性computed1、认识计算属性computedcomputed:将多个数据结合起来显示。测试代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1vue计算属性computed</title></head><body> <div id="info"> <h3原创 2021-03-03 21:29:34 · 151 阅读 · 2 评论 -
vue基础模板语法02
创建vue代码模板:编写vue代码模板2复制代码模板原创 2021-03-01 21:51:23 · 268 阅读 · 0 评论 -
Vue入门01
Vue列表展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue_列表</title></head><body> <div id="list"> <ul> <li v-for="item in songs">{{i原创 2021-01-18 17:11:13 · 86 阅读 · 1 评论