![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
文章平均质量分 85
无
我爱布朗熊
目前是个学生,仍然在学习阶段
展开
-
Vue-——UI组件库使用
在我们上面引入组件的时候,是将组件全部引入,但是这些组件我们不会全部使用,所以上面的做法还是有一些坏处的,下面我们就来改进一下。如果babel.comfig.js文件按照他们的要求写了,样式他们会自己分析,我们不用担心。下面的这几段代码直接删除!在main.js文件中添加下面三行代码。原创 2022-09-23 19:20:26 · 668 阅读 · 0 评论 -
Vue——路由守卫(全局前置路由守卫beforeEach、全局后置路由守卫router.afterEach、独享路由守卫beforeEnter、组件内路由守卫 )
作用:对路由进行权限控制分类:全局守卫、独享守卫、组件内守卫。原创 2022-09-22 20:00:51 · 11494 阅读 · 1 评论 -
vue-router
query:{id:m.id,}}">原创 2022-09-22 16:10:28 · 593 阅读 · 0 评论 -
vuex---$store案例、getters配置项、引入mapState、mapGettes、mapActions、mapMutations
这个地方像极了我们之前学的computed计算属性,其实这个地方用计算属性也可以实现,但是我们为什么不用计算属性呢? 因为我们用计算属性的话只能在单一组件中使用,我们使用getters配置项,只要是此项目中的组件都可以调用原创 2022-09-19 21:42:06 · 1923 阅读 · 0 评论 -
Vue插槽---默认插槽、具名插槽、作用域插槽
让父组件可以向子组件指定位置插入html结构,也是一种组件间通信的方式,适用于父组件===》子组件分类:默认插槽、具名插槽、作用域插槽使用:1.默认插槽2.具名插槽3.作用域插槽作用域插槽也可以有名字理解:数据在组件的自身,但根据数据生成的结构需要组件的使用者来决定。原创 2022-09-17 20:15:10 · 568 阅读 · 0 评论 -
Vue脚手架配置代理、安装axios
优点:配置简单,请求资源时直接发给前端(8080)即可缺点:不能配置多个代理,不能灵活的控制请求是否走代理工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)原创 2022-09-16 20:26:18 · 473 阅读 · 0 评论 -
Vue---$nextTick、$set、$ref、$event、$bus详细理解
不用$nextTick有时候会导致什么问题?导致执行的代码顺序不对,造成功能失败!原创 2022-09-15 00:54:48 · 641 阅读 · 0 评论 -
Vue—动画效果、过渡效果、多个元素过度(transition-group)、集成第三方库
目录总结一、动画效果二、过渡效果三、多个元素过度transition-group四、集成第三方动画动画库安装 引入 使用 当我们点击按钮之后,这个黄色的条幅会隐藏 效果图和上面一模一样 修改代码,我们再放一个标签于transition中,我们发现会报错,此标签中只能放单个标签 我们再修改一下代码其他代码和上面一个样 需要什么动画可以在里面复制 Animate.css | A cross-browser library of CSS animations.摇原创 2022-09-14 21:17:00 · 627 阅读 · 0 评论 -
Vue---任意组件间消息订阅与发布(pubsub)
任意组件间通信原创 2022-09-13 19:42:01 · 205 阅读 · 0 评论 -
Vue---全局事件总线(实现任意组件间通信)
目录总结一、实现 main.js 重要代码:school.vue重要代码student.vue重要代码 案例:由student.vue 向school.vue传输数据 其两文件之间的关系是兄弟关系 重要代码:重要代码重要代码原创 2022-09-13 18:32:16 · 228 阅读 · 0 评论 -
16.Vue - 组件自定义事件、子->父组件通信
组件间通信①第一种方式,在父组件中: 或②第二种方式,在父组件中:③若想让自定义事件只能触发一次,可以使用once修饰符,或$once方法。-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据(第一种写法:使用@或v-on) -->原创 2022-09-12 20:36:58 · 2613 阅读 · 0 评论 -
15.Vue - webStorage浏览器本地存储
1. 存储内容大小一般支持5MB左右(不同浏览器可能还不一样)2.浏览器端通过 Window.sessionStorage和Window.localStorage属性来实现本地存储机制。该方法接受一个键和值作为参数,会把键值对添加到存储中,如果键名存在,则更新其对 应的值。该方法接受一个键名作为参数,返回键名对应的值。该方法接受一个键名作为参数,并把该键名从存储中删除。该方法会清空存储中的所有数据。原创 2022-09-11 17:43:33 · 936 阅读 · 0 评论 -
14.Vue - Todo_list案例 - 自我任务复选框
①拆分静态组件:组件要按照功能点拆分,命名不要与html冲突②实现动态组件:考虑好数据存放位置,数据是一个组件在用,还是一些组件在用一个组件用:放在组件自身即可一些组件用:放在他们共同的父组件上(状态提升)③实现交互:从绑定事件开始。原创 2022-09-11 16:51:37 · 486 阅读 · 0 评论 -
13.Vue - ref属性、props配置、mixin混入、插件、scoped样式
1.被用来给元素或子组件注册引用信息(id的替代者)2.应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)3.使用方式:打标识: .... 或获取:this.$refs.xxx具体看下图代码。原创 2022-09-08 19:43:37 · 1076 阅读 · 0 评论 -
12.Vue - 脚手架初使用
vue.js与vue.runtime.xxx.js的区别vue.js是完整版的Vue,包含:核心功能+模板解析器vue.runtime.xxx.js是运行版的Vue,只包含:核心功能,没有解析器vue.runtime.xxx.js没有模板解析器,所以不能使用template配置项,需要使用render函数接收到createElement函数去指定具体内容。原创 2022-09-08 14:37:16 · 432 阅读 · 0 评论 -
11.Vue - 组件——组件名、非单文件组件、单文件组件
1.定义组件(创建组件)2.注册组件3.使用组件(写组件标签)使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有差别区别:1.el不写 ---- 最终所有的组件都要经过一个vm管理,由vm中的el决定服务哪个容器2.data必须写成函数 -----避免组件被复用时,数据存在引用关系(比如a,b同时用了data数据,a改了数据,那b得到的数据就是a改了之后的数据)原创 2022-09-06 20:07:17 · 1330 阅读 · 2 评论 -
10.Vue - 生命周期与钩子函数
又名:生命周期回调函数、生命周期函数、生命周期钩子Vue在关键时刻帮我们调用的一些特殊名称的函数生命周期函数的名字不可更改,但函数的具体内容是程序员根据需求编写的生命周期函数中的this指向的是vm或组件实例对象下图mountedbeforeMount:此时页面呈现的内容Vue还没有编译,比如{{name}},就会呈现这个,并不会呈现name的值对于beforeDestroy:我们应该做一些收尾性的工作(具体查看图)原创 2022-09-05 19:33:24 · 1173 阅读 · 0 评论 -
9.Vue - 内置指令、自定义指令(详细)、全局指令与局部指令
初识vue--引入vue 引入之后,全局就多了一个vue这个构造函数-->当前的n值是:放大10倍后的n值是:点我n+1原创 2022-09-04 18:54:42 · 1330 阅读 · 0 评论 -
8.Vue - 收集表单数据、过滤器
过滤器:定义:对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)语法:1.注册过滤器:Vue.filter(name,callback) 或 new Vue{ filters:{} }2.使用过滤器:{xxx | 过滤器名} 或 v-bind:属性="xxx | 过滤器名 "备注:1.过滤器也可以接受额外参数、多个过滤器也可以串联2.并没有改变原本的数据,是产生新的对应的数据。原创 2022-09-04 13:36:09 · 630 阅读 · 0 评论 -
7.Vue - 监测数据的原理、Vue.set、vm.$set
初识vue年龄+1岁添加性别属性,默认值:男在列表首位添加一个朋友原创 2022-09-03 17:35:22 · 1767 阅读 · 0 评论 -
6.Vue - 渲染、列表中key的原理和作用、列表排序
key是虚拟对象的标识,当数据发生变化时,Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。原创 2022-09-02 20:34:34 · 2471 阅读 · 0 评论 -
5.Vue - 绑定class样式、style样式
绑定样式1.class样式写法:class=“xxx” xxx可以使字符串、对象、数组字符串法:适用于类名不确定,要动态获取对象法:适用于要绑定多个样式,个数不确定,名字不确定,但要动态决定用不用数组法: 适用于要绑定多个样式,个数确定,名字确定,但不确定用不用2.style样式:style=“{fontSize:xxx}” 其中xxx是动态值:style="[a,b]" 其中ab是样式对象,如下。...原创 2022-08-31 22:07:45 · 6347 阅读 · 0 评论 -
4.Vue-计算属性、监视属性、深度监视、计算属性与监视属性对比
②如果计算属性要被修改,那必须写set函数去响应修改且set中要引起计算时依赖的数据发生改变。开启深度监视,当number中的任何一个配置变了之后,就会运行handler函数。Vue自身可以检测对象内部值的改变,但Vue提供的watch默认不可以!Vue中的watch默认不监测对象内部值的改变(一层)定义:要用的属性不存在,要通过已有的属性计算得来。最终实现的效果如下,当我们点击“切换天气”的时候,就会改变。因为这才是正统的写法,没有引号的那种是简写形式。监视number中的a的变化。......原创 2022-08-31 14:31:35 · 1189 阅读 · 5 评论 -
3.Vue—绑定事件、事件修饰符、键盘事件(详细)
我们单击按钮的时候,通常情况下不论我们点击几次,都会出现弹框,但是当我们加了@click.once之后,这个按钮只能单击一次,第二次及其以后不再出现弹窗。当我们添加.self的,我们再点击按钮,只会出现一个,那就是按钮所绑定的函数运行,上面那个div便不会再运行(这个.self也可以说变相的阻止了冒泡)但是我们添加了@click.capture之后,我们会发现当我们在捕获box1的时候,也完成了box1的冒泡,最终控制台上的输出内容是先1再2。否则this就不是vm了。右 right。...原创 2022-08-28 19:25:38 · 1490 阅读 · 0 评论 -
2.Vue — 模板语法、数据绑定、el与data的写法、数据代理
我们要把我们的模板root交给Vue实例进行解析,解析完之后将内容放到(挂载到)页面上指定位置展示。原创 2023-10-28 20:00:19 · 448 阅读 · 0 评论 -
1.Vue—简介、实例与容器、MVVM模型
官方网站Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)Vue是一套用户构建用户界面的渐进式JavaScript框架简单的说就是怎么把数据变成界面渐进式:Vue可以自底向上逐层的应用。简单应用:我们只需要引入一个轻量小巧的核心库即可复杂应用:引入Vue插件容器与Vue实例之间的关系是一对一1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法。原创 2023-10-28 16:17:55 · 386 阅读 · 0 评论