- 博客(21)
- 收藏
- 关注
RSS订阅原创 vue：mockjs的使用
vue：mockjs的使用1、在src目录下创建mock文件夹，创建XXX.json的文件，文件里面配置对应的json格式的虚拟数据，注意里面的数据不能包含空格，必须是键值对的形式[{ "id": "1" }, { "id": "2" }]2、mock文件夹下面创建mockServer.js文件，安装mockjs插件，并且引入mockjs和json文件，使用Mock.mock(url,{data:XXX,code:200})/* 利用mo
2021-12-21 11:17:39
542
原创 vue：NavigationDuplicated错误解决以及原理分析
vue：NavigationDuplicated错误解决以及原理分析路由跳转有两种形式：声明式跳转、编程式跳转声明式跳转不存在此问题，原因使vue-router底层已经处理好了编程式跳转会出现此问题的原因是因为vue-router版本^3.5.3引入了promise，有返回值解决方案:在vue-router中添加如下代码Vue.use(VueRouter)//先保存router原型对象的pushlet origin = VueRouter.prototype.push//第一个参数：告诉pu
2021-12-17 10:15:44
641
原创 vue：传参的三种方式以及props的三种写法以及传参的注意事项
vue：传参的三种方式字符串： this.$router.push("/search/" + this.keyword + "?k=" + this.keyword.toUpperCase()）模板： /search/${this.keyword}?k=+${this.keyword.toUpperCase()}对象：this.$router.push({name: "search",params: {keyword: this.keyword, }, query: {k: this.keyword
2021-12-16 18:11:58
1045
原创 vue3：新特性
vue3：新特性直接操作对象reactive，底层基本类型数据ref，操作数据需要.value，通过object.defineProperty()的get和set方法来实现响应式(数据劫持)reactive通过使用proxy来实现响应式(数据劫持)，并通过reflect操作源对象内部的数据所有的方法定义在setup函数中...
2021-12-14 18:03:28
519
原创 vue：组件之间四种通信方式
vue：组件之间的通信方式：props：仅限于父—子之间数据传递subpub：消费订阅，任意组件之间数据传递bus总线：可用于任意组件之间数据传递provide和inject：提供和注入，用于祖孙组件之间通信(vue3新特性)，子组件也可以拿到数据，但是父子组件常用props...
2021-12-14 16:34:59
914
原创 vue：router路由相关
vue：router路由相关vue的插件库，专门用来实现SPA(单页面)应用，整个页面只有一个完整的页面，点击连接中的导航不会刷新页面，只会做页面的局部更新，数据需要通过ajax请求获取两种模式：历史模式、默认模式路由：一个路由就是一组映射关系(key-value)，key为路径，value可能是函数也可能是组件<router-link>：实现路由的切换<router-view>：指定展示的位置注意点pages文件通常放置路由组件，compone
2021-12-13 09:33:15
456
原创 vue：vuex相关
vue：vuex相关最大的好处：就是复用，逻辑层次变得更加清晰，一目了然使用步骤：npm i vueximport Vuex from ‘vuex’Vue.use(Vuex)src下创建文件夹store，再store下再创建index.js文件，操作相关内容vuex：对共享数据/状态的集中式管理，适用于任何组件之间通信store：负责管理actions、mutations、stateactions：动作的处理，事件请求等mutations：数据的处理等state：共享数据的存储
2021-12-08 18:16:46
158
原创 vue：插槽的分类、使用
vue：插槽的分类、使用默认插槽：<vc1><img ><vc1 /> 组件中配置一个<slot>，图片显示位置就是该标签的位置具名插槽：有多个插槽，通过slot属性定义，<vc1 slot=’demo’><img ><vc1 /> ，在需要使用的组件中，<slot name='demo' >，作用域插槽：<template scope='data'> <vc1><img s
2021-12-08 09:19:42
682
原创 vue：消息订阅与发布
vue：消息订阅与发布组件之间通信的一种方式使用：安装第三方插件：例如npm i pubsub-js，在需要使用组件中 import pubsub from ‘pubsub-js’API：订阅消息：this.pubid = pubsub.subscribe('demo',methodName)发布消息：pubsub.publish('demo',data)，如果传输的data中是多个参数pubsub.publish('demo',{k1:v1,k2:v2,...})，那么接收必须用一个对象，met
2021-12-06 16:27:16
441
原创 vue：事件总线
vue：事件总线定义： 组件间的通信方式，可以用于任意组件之间的通信安装全局事件总线：newVue{beforeCreate(){Vue.prototype.$bus=this}}使用事件总线：A组件接收数据，methods:{ a(data){}} mounted(){this.$on('demo',this.a)}B组件传输数据，methods:{this.$bus.$emit('demo',this.data)}在destryBefore钩子中解绑该组件用到的事件this.$bus.$o
2021-12-06 10:55:15
153
原创 vue：相关命令
vue：相关命令npm install -g @vue/cli：全局安装vue脚手架vue create xxx：创建vue项目npm run serve：运行项目npm build：打包项目npm view webpacknpm view webpack version：查看当前版本，versions：查看所有的版本...
2021-12-06 10:06:49
252
原创 vue：组件自定义事件、绑定、解绑事件
vue：组件自定义事件、绑定、解绑事件自定义组件绑定事件：使用方法：在引入组件中的methods定义一个回调方法，在组件标签中使用如下两种方式自定义事件，去到引入的组件的中，使用 this.$emit("eventName",this.val,...)1.<componentName ref="componentName"></componentName>ref这种方法更加灵活，但是必须在钩子方法mounted()中定义，mounted(){this.$refs.c
2021-12-04 16:20:27
555
原创 js：浏览器存储相关知识
js：浏览器存储相关知识1.loaclStorage：直接存储在硬盘，大小5M，存储空间不同浏览器有所区别方法：loaclStorage：set(key,value),get(key),remove(key),clear()关闭浏览器不会清除内容2.sessionStorage：直接存储在浏览器的缓存中，关闭浏览器数据就清空了，使用和方法与localStorage一样注意：存储的数据一定都是字符串，不管是数字、对象等，使用的时候需要使用，拿数据的时候用JSON.parse()、存储数据的时
2021-12-04 09:58:47
550
原创 vue：render函数、props、ref、mixin等属性使用
vuerender函数vue.js与vue.runtime.XXX.js文件的区别：vue.js文件是完整的vue，包含完整的核心功能和模板解析器vue.reuntime.xxx.js只包含核心功能，不包含模板解析器，是残缺的vue，所以不能使用template,需要使用render函数接收到的createdelement函数去指定具体内容ref：用在真实的标签上，获取该dom元素，放在组件标签上获取该组件实例对象，this.$refsprops:让组件接收从外部传过来的数据：只接收：
2021-12-02 18:10:13
1308
原创 vue：component组件
使用组件三步：组件是实现局部功能的代码集合和资源集创建组件，分为全局组件和局部组件，组件中data必须写成函数，而不是对象，否则会报错注册组件添加组件标签组件的好处：复用性好，层次结构清晰组件命名注意：不能使用标签名大驼峰命名会报错component组件(vc)理解：本质是一个vc的构造函数，是Vue.extend生成的每一个组件都有一个全新的对应的vc我们只需要配置组件名，vue会帮我们创建组件的实例对象this的指向：组件中的data、methods、watch、co
2021-12-02 14:28:57
482
原创 vue：生命周期
VUE生命周期又名生命周期函数、钩子函数、回调函数vue再特殊时期调用的特殊的函数周期函数名称不可更改钩子函数中的this指向vm或者组件实例对象生命周期：总共11个函数，重点以及常用的关注两个：mounted、beforeDistroy，mounted：开启定时器、发送网络请求、订阅消息、绑定自定义事件、 订阅消息等，beforeDistroy：清除定时器、解绑自定义事件、取消订阅消息等摧毁Vue实例：开发者工具看不到任何信息、自定义事件失效，但是原生dom事件依然有效...
2021-12-02 08:49:48
73
原创 vue：指令
vue指令v-bind：单项绑定解析表达式；v-on：绑定事件指令，简写 @；v-model：双向数据绑定；v-for：遍历数组、对象、字符串；v-if、v-else、v-show：条件渲染(动态控制节点是否展示)v-text：绑定文本，没有插值表达式灵活v-html：可以解析结构性标签，不安全的指令v-cloak：特殊标签属性，没有值，配合css语法，[v-cloak]{display:none} 可以解决网速过慢，页面展示{{xxx}}的问题，只要加载vue了，就会自动删除该属性v-
2021-12-01 15:40:49
502
原创 vue：filters过滤器的使用
filters过滤器的使用1、过滤器分为局部过滤器和全局过滤器2、过滤器只可以配合v-bind使用，不能配合v-model的使用3、过滤器可以通过管道符链式使用，添加多个过滤器，用于处理比较简单的业务4、过滤器不会改变原来的数据5、全局过滤器的注册：Vue.filter(‘myfilter’,callback),局部过滤器：new Vue{fileters:{myfilter(val){return }}}6、使用过滤器：v-bind:x=msg | filterName,可以传参filter
2021-12-01 10:49:23
484
原创 vue：计算属性和监视属性的区别和内在联系
前端初级学习总结1.<button onclick="click()">点我</button> 其中click命名的自定义函数不会生效，而且不会报错，click是js中的原有函数，不可以用作自定义函数名2.计算属性computed：两个因素：基于计算依赖的的data中的数据属性；？；。简化格式必须只有读取数据而没有写数据的情况才可以，相对methods来说性能更好，有缓存机制，第一次读取数据的时候，会通过getter从data中取数据，然后会自动加载进缓存，第二次读取，只要数据没
2021-12-01 09:32:24
212
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人