![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
文章平均质量分 63
frontEndSmallWhite
前端在学,欢迎交流
展开
-
vue3中的setup
1、setup是vue3中的一个,值为一个;2、setup是所有(组合API)的基础,组件中所用到的等都需要在setup中进行配置;原创 2022-07-31 22:54:39 · 9655 阅读 · 1 评论 -
Vue3简介
1、性能得到了显著的提升;(打包大小减少了41%、初次渲染提速55%、更新渲染提速133%、内存减少54%)2、源码的升级①、使用Proxy代替defineProperty实现响应式;②、重写虚拟DOM的实现和Tree-Shaking;3、Vue3能够;①、CompositionAPI(组合API)setup配置、ref和reactive、watch和watchEffect、provide和inject等;②、新的内置组件Fragment、Teleport、Suspense等;...原创 2022-07-31 21:49:52 · 313 阅读 · 0 评论 -
vue-router 路由
vue中的一个插件库,专门用来实现SPA应用;原创 2022-07-30 20:24:48 · 418 阅读 · 1 评论 -
vue中的一个重要插件——vuex
概念专门在vue中实现集中式状态(数据)管理的一个vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间的通讯方式,且适用于任意组件间通讯;原创 2022-07-20 15:23:07 · 1670 阅读 · 0 评论 -
vue中的三种插槽类型
让父组件可以向子组件指定位置,也是的一种方式,适用于;原创 2022-07-18 19:28:28 · 1296 阅读 · 0 评论 -
vue脚手架配置代理
当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端服务器);配置简单,请求资源的时候直接发送给前端即可(8080);不能配置多个代理,不能灵活控制请求是否使用代理;缺点配置略微繁琐,请求资源时必须加前缀;,而且可以灵活控制请求是否走代理;...原创 2022-07-18 19:05:06 · 338 阅读 · 0 评论 -
vue中的动画效果与过渡效果
动画与过渡效果添加的1、进入的整个过程都能响应的样式2、离开的整个过程都能响应的样式3、进入的起点4、离开的起点5、进入的终点6、离开的终点。原创 2022-07-15 20:43:58 · 665 阅读 · 0 评论 -
任意组件间通信的两种方法
全局事件总线、消息的订阅与发布、$nextTick原创 2022-07-15 18:16:27 · 290 阅读 · 0 评论 -
组件中定义以及解绑自定义事件
1、自定义事件是一种组件间的通讯方式,适用于:子组件==>父组件;2、使用场景:A是父组件,B是子组件,B想给A传递数据,那么就要在A中给B绑定自定义事件(事件的回调是在A中);3、绑定自定义事件:第一种方式:在父组件中或第二种方式:使用ref ps:如果想让自定义事件只触发一次,可以使用once修饰符或$once方法;4、触发自定义事件:this.$emit('atguigu',this.test);5、解绑自定义事件:this.$off('atguigu');6、组件上也可以绑定原生DOM事原创 2022-07-14 10:59:32 · 353 阅读 · 0 评论 -
浏览器本地存储
localStorage.setItem方法用于添加一个本地缓存数据,接收两个参数,为key-value类型;①、当value数据类型为数字类型时,会自动转换为字符串类型进行存储;②、当value中的数据类型为对象类型时,需要使用JSON.stringify()函数将其转换为字符串类型进行存储;localStorage.getItem()方法接收一个参数key,用于读取数据;JSON.parse()方法用于将对象字符串转换为对象类型;localStorage.removeItem()方法接收一个原创 2022-07-14 09:43:58 · 1752 阅读 · 0 评论 -
组件化编码流程--Todo-list案例
组件按照功能点进行拆分,命名不要与html元素冲突;考虑好数据的存放位置,数据是一个组件在使用,还是一些组件在使用; 放在组件自身即可;放在他们共同的父组件上(状态提升)从绑定事件开始;(1)父组件==>子组件进行通信;(2)子组件==>父组件进行通信(要求父组件先给子组件传递一个函数);(1)v-model绑定的值不能是props传过来的值,因为props是不可以修改的;(2)props传过来的若是对象类型的值,修改对象中的属性时Vue不会报错,但是不推荐这样子做;...原创 2022-07-12 16:59:47 · 672 阅读 · 0 评论 -
vue中的插件与scoped样式
能够实现很多强大的功能,例如:定义过滤器、定义自定义指令、定义混入、给原型上添加方法等,只需要在插件文件中定义,并在main.js中引入插件;功能:用于增强vue本质:包含install方法的一个对象,install可以接收多个参数,第一个参数为vue,第二个以后的参数是插件使用者传递的参数;对象.install = function(vue,option){ ... }Vue.use()...原创 2022-07-10 19:59:29 · 207 阅读 · 0 评论 -
单文件组件
一个文件中只包含1个组件,例:school.vue;需要使用ES6模块化的知识,将vue文件暴露一个接口可供其他文件调用;(1)分别暴露:export const school = Vue extend({ ... })(2)统一暴露:const school = Vue extend({ .... }) export {school} const school = Vue extend({ ... }) export default school,可简写为: export de原创 2022-07-10 15:50:16 · 567 阅读 · 0 评论 -
组件化编程之组件基础
1、实现应用中局部功能的代码和资源的集合;2、每一个功能模块都是组件,每一个组件包括html、css、js三个文件;1、组件没有el属性,初始定义的时候没有确定专门为哪个容器服务,可以随时被其他组件或vm调用,“组件就是一块砖,哪里需要哪里搬”也就是说一个html中包含有多个组件;在script标签中编写,可以包含template属性用于添加显示在页面的html结构,例:template:` ... `,例:const school = Vue.extend({ ... })data要写成函数式;原理:因为原创 2022-07-10 15:17:36 · 329 阅读 · 0 评论 -
vue的生命周期
1、生命周期又名 生命周期回调函数、生命周期函数、生命周期钩子;2、是vue在特殊时期(挂载完毕)为我们调用的一些函数;3、生命周期函数的名字是固定不可修改的;4、生命周期函数的this值指的是 vm 或 组件实例对象;完成初始化(数据代理、数据监测)之前调用,无法通过vm访问到data中的数据、methods中的方法;是数据代理、数据监测的创建之前,不是vm的创建之前,这里的this为vm;完成初始化,能够通过vm访问data中的数据、methods中的方法;完成模板的解析,生成虚拟DOM,但是还未生成真原创 2022-07-10 08:41:12 · 147 阅读 · 0 评论 -
vue中的自定义指令
在vue实例中使用该属性申明自定义指令,在directives中申明自定义指令有两种方法,一种就是使用函数的形式(更加简单便捷),另一种就是使用对象的形式(能够定义更加精细);(1)第一个参数为element:实质上为使用该属性的真实DOM;(2)第二个参数为binding:是一个对象,包含value属性值等;(1)指令与元素成功绑定时调用:实质上就是对象形式的bind函数;(2)令所在模板(例:id为root中)发生重新解析时:实质上就是对象形式的update函数;指令与元素成功绑定时调用指令原创 2022-07-10 08:41:23 · 515 阅读 · 0 评论 -
vue中的内置指令
单向绑定解析表达式,v-bind:xxx简写为:xxx双向数据绑定,v-model:xxx简写v-model遍历数组、对象、字符串;绑定事件监听,可简写为@,例:@click="..."条件渲染(动态控制节点是否存在)条件渲染(动态控制节点是否展示)向其所在的节点中渲染文本内容与插值语法的区别:如果文本中原本存在内容,则会替换掉原本的内容,而插值语法不会ps:text是new Vue中定义的一个变量能够向指定节点中渲染html结构的内容,与v-text类似,都能够替换节点原创 2022-07-10 08:40:57 · 538 阅读 · 0 评论 -
vue中过滤器的使用
Vue.filter(name,callback) 或 new Vue({ filter:{...} }){{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"使用管道符 | 进行分割,直接使用data中的数值,管道符后再接过滤器进行操作{{time | setTime}}:time是传入的时间参数,setTime是过滤器的名字,它会将time作为参数val传入到过滤器setTime(val)中,最后将return结果替换掉整个插值语法;当调用的时候传入了参数,第一原创 2022-07-10 08:40:26 · 545 阅读 · 0 评论 -
收集表单数据
使用v-model收集表单的数值,实现双向绑定,默认收集的就是value值,type为checkbox复选框的时候,默认收集的是布尔值,表示是否选中;收集value值,用户输入即为value值;收集到的是value值,要给标签属性设置value值当未设置value值:收集到的是多选框是否选中的布尔类型数值,即true或false当设置value值:(1)初始值为非数组类型:收集到的是布尔类型,true或false;(2)初始值为数组类型:收集到的是value的值组成的数组; 二、v-原创 2022-07-09 15:30:49 · 317 阅读 · 0 评论 -
vue实现数据监测(响应式)
前期没有的数据变量,想在后期添加并且使其跟其他变量一样都是响应式的,也就是说:跟其他变量一样存在set和get方法,可以使用Vue.set或vm.$set实现。响应式:修改元素的值,页面会重新更新显示新的数据;(1)用于实现后期在页面添加一个响应式的数据;(2)接收三个参数:目标对象target,添加元素的key,添加元素的value;(3)注意:目标对象不能是vm或vm._data,只能给_data中的对象添加;例:vm.$set(vm.student,"sex","男"); //给vm下的一个stude原创 2022-07-09 15:02:46 · 400 阅读 · 0 评论 -
vue中的列表渲染
使用v-for实现循环遍历列表获取的每一个值循环列表中每一项的唯一值,可以是设置的唯一值(id),也可以是索引值(1)使用变量p接收所遍历数组的每一个元素;(2)使用p和index接收所遍历数组的每一个元素和索引值; 使用value和key接收对象的数值和key 使用char和index接收字符串的字符和索引 1、vue实现代码转化为DOM的过程中,是先将代码转换为虚拟DOM,再将虚拟DOM转换为真实DOM;2、而将虚拟DOM转为真实DOM的过程中,会对比key相同的两个节点虚拟DO原创 2022-07-09 11:31:43 · 251 阅读 · 0 评论 -
vue实现条件渲染
使用v-show和v-if实现条件渲染,使用的优先级为:如果节点显示隐藏的变化频率很快,就使用v-show,因为v-if会不停的删除创建节点,影响速度底层实现是使用了display:none取值为true 或 false,默认为true,取值也可以使用表达式(1===1),只要表达式的最终结果为布尔类型例: 取值与v-show类似,可以取true或false,取值为false时,会完全删除,而不是设置display例:......原创 2022-07-09 10:29:43 · 474 阅读 · 0 评论 -
:class修改样式
可以将需要动态绑定的样式和不需要动态绑定的样式分开定义,分别使用:class和class关键字定义;后接一个字符串为表达式,能够获取到在data中定义的变量,可以实现通过修改变量修改样式; (1):class后接一个字符串,适用于要绑定样式的类名不确定,需要动态指定;(2):class后面的字符串表示的是一个表达式(定义在data中),可以通过methods中定义方法修改data定义的表达式实现class属性的修改;后接一个数组名,适用于要绑定的样式个数和名字都不确定,使用一个数组存储样式 适用于绑定的样原创 2022-07-09 10:18:26 · 931 阅读 · 0 评论 -
vue中的监视属性
如果刚开始确定监视对象,在vue中可以直接使用watch属性实现监视 监视属性中的函数,能够通过获取newValue和oldValue的值,进行监视到属性改变后的一些操作;接收两个参数:newValue:表示新的值oldValue:表示改变前的值实现初始化的时候调用一次监视函数handler,默认为false如果刚开始不确定监视的对象,就可以后续再使用这个实现监视 watch默认监视单层属性的改变,想实现监测多层结构需要使用deep属性watch:{ "numbers.a":{ ... } } //numb原创 2022-07-09 09:59:37 · 2738 阅读 · 0 评论 -
vue中的计算属性
1、computed中存储计算属性,要通过已有的属性计算得来,计算属性使用一个对象存储,包含get和set方法;2、计算属性中的get和set方法中的this都是vm;3、计算属性是一个属性,当使用插值语法调用它时,不可以加括号(因为它不是一个方法)第一次调用之后会进行缓存1、初次读取计算属性的时候;2、当get中用到的数据发生改变的时候;当手动修改计算属性时,调用set方法,例:vm.fullName="李-四"确定计算属性只需要调用get方法,而不需要调用set方法手动修改;......原创 2022-07-09 09:08:31 · 2692 阅读 · 0 评论 -
vue中的事件处理
(1)、使用v-on:xxx绑定事件,或者@xxx 绑定事件,例:@click=“函数名”,函数写在vue实例的methods中(2)、函数后面加括号可以直接传参,默认传参event,手动传参需要使用$event占位,不然会默认不传参event (1)、通过methods调用的函数最终会成为vm的一个属性,但是没有get和set方法,因为函数定义之后就不需要修改了;(2)、methods中定义的函数this指向为vm 或 组件实例化对象 ( 箭头函数除外,箭头函数指向为window )用于阻止默认行为例:@原创 2022-07-09 07:22:25 · 655 阅读 · 0 评论 -
Vue中的数据代理
通过一个对象,代理对另一个对象的改变 接收三个参数:操作的对象名、添加的属性名(key)、添加的属性值对象(1)、value 属性的数值(2)、enumerable 是否能够枚举(遍历),默认为false,添加的属性不可以遍历;改为true就能够实现遍历(3)、writable 是否能够被修改,默认为false(4)、configurable 控制属性是否能够被删除,默认为false 通过设置第三个参数对象中添加get和set方法实现get:funct原创 2022-07-09 07:00:44 · 161 阅读 · 0 评论 -
Vue基础知识
渐进式:自底向上,简单的可以仅引入核心库,复杂的可以引入丰富的插件1、采用组件化模式,提高代码复用率,且代码更好维护2、声明式编码:提高代码复用率,开发人员不需要直接操纵DOM(与之相对的命令式编码)3、使用虚拟DOM+优秀的Diff算法,尽可能的复用DOM节点1、new一个Vue实例与容器是一一对应的关系,而且开发中只能有一个vue实例,但是会配合组件一起使用(也就是说可以定义多个组件);2、{{xxx}}中的xxx只能写表达式(是一个能够赋值给变量的数据),且能够读取到data中的所有属性;3、一旦da原创 2022-07-09 06:45:01 · 207 阅读 · 0 评论