![](https://img-blog.csdnimg.cn/46b11c112ee5488eb9fc078d0af60e13.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Vue.js
文章平均质量分 95
Vue基础
DantinZhang
学习只是一种习惯
展开
-
Vue3(二):Vue3生命周期、自定义hook、其他API、Suspense等组件
这个其实和React类似,也和vue2中的mixin类似,hook本质是一个函数,用use开头,把setup函数中使用的Composition API进行了封装。可以更方便我们去复用处理数据的逻辑let sum = ref(0) 处理数据的逻辑 ... ... 各种Composition API ... ... return sum }setup() {sum } }优势:把setup函数中使用的Composition API进行了封装。原创 2023-06-03 14:17:16 · 781 阅读 · 0 评论 -
Vue3(一):创建vue3工程、setup、vue3响应式原理、computed和watch
这个setup函数其实有两种返回值:1、返回一个对象 2、返回一个渲染函数,用的最多的就是返回一个对象,把用到的所有属性、方法都返回出去,方便在模板中使用(当然,现在有了setup语法糖,后面再说)如果这种情况的话和上面类似,不同的是第一个参数写成数组,且每个元素是箭头函数,返回的new和old值也是相对应的值构成的数组。其实和上面的情况四是一样的,如果简单数据类型直接.value,那么监视的就是一个写死的值。,而setup则是组合式API表演的舞台,组件中所有的数据和方法都写在setup函数中。原创 2023-05-25 17:31:07 · 2293 阅读 · 1 评论 -
Vue2(十四):replace属性、编程式路由导航、缓存路由组件、两个新钩子、路由守卫、history与hash
在这里再搞一遍,搞在News组件里,循环变化透明度,但是你想离开这个选项卡时让定时器停,就要走销毁流程,但是News里面的input输入框数据要保留,又不能被销毁。注意:缓存的名字是组件名!必须通过路由规则进入(你得点啊),写组件标签进入不行,而且是进入路由组件时调用(相当于前置路由守卫),to为当前组件。你得触发路径的变化,前端浏览器监测到了才允许你离开,时离开组件时调用这个函数,在后置路由守卫之后。使用下面的api,有三个参数,分别是to到哪里去,from从哪里来,next下一步(放行)原创 2022-09-05 16:21:55 · 2181 阅读 · 1 评论 -
Vue2(十三):路由的使用及注意点、嵌套路由、路由的query和params参数、props配置
vue-rooter:是vue的一个插件库,专门用来实现SPA应用1、路由就是一组映射关系(key - value),多个路由需要路由器(router)进行管理。2、key 为路径, value 可能是 function 或 component组件3、vue 的一个插件库(vue-router),专门用来实现 SPA 应用。原创 2022-09-01 22:01:39 · 2202 阅读 · 0 评论 -
Vue2(十二):Vuex环境搭建、Vuex工作原理、几个配置项、多组件共享数据、Vuex模块化
安装:注意Vue2一定要安装vuex3,如果是vue3可以直接安装的是vuex4,可以去文件里看下vue的版本是啥,千万别输错了,不然会陷入痛苦的报错……创建文件:在此文件中引入插件并使用vuex插件,使用vuex插件必须在引入store之前,如果在main.js中引入和使用vuex的话,由于js文件里所有的import语句都会提升到最开始执行,所以会报错滴。总结:引入store必须在之后3.main.js引入storeJS执行的时候会把import提升到顶部,与摆放顺序无关,如果放在main.js原创 2022-08-31 21:58:43 · 2277 阅读 · 1 评论 -
Vue2(十一):脚手架配置代理、github案例、插槽
先在脚手架文件目录下安装一下子axios跨域就是违反同源策略,同源策略就是协议、域名、端口号三个必须完全一样解决跨域请求数据问题,要么让后端加上那个,要么用jsonp的script的src属性,但这两种用的不多,我们还有第三种方式,那就是借助一个代理服务器,其端口号和请求端口号一致(这里以8080举例)如下图,url为的前端应用要请求服务器的数据,这属于跨域请求,咋办?可以利用vue-cli搞一个中间的代理服务器,其url也是(vue项目服务器和代理服务器是一台服务器8080),代理服务器8080和50原创 2022-08-29 22:26:38 · 1062 阅读 · 1 评论 -
Vue2(十):全局事件总线、消息订阅与发布、TodoList的编辑功能、$nextTick、动画
因为接收数据的组件A中定义的回调函数和自定义事件是绑定的,而这个用来接收数据的组件实例A都销毁了,回调函数也没了,那这个xxxx自定义事件也就没用了,你留着会污染全局环境(这块儿有点迷糊)这玩意儿用的不多,和全局事件总线写法差不多,但是全局事件总线更好,因为是在Vue身上操作,但是这个的话要引入第三方库,库有很多,比如pubsub-js。,那每次点击编辑按钮,都会添加一次isEdit属性,这样是不太好的,所以要加个判断,添加过了就改成true,没添加过就添加个true。,而且原来的span要隐藏。...原创 2022-08-25 17:01:03 · 946 阅读 · 0 评论 -
Vue2(九):浏览器本地存储、组件自定义事件、TodoList自定义事件
1、一种组件间通信的方式,适用于:子组件 ===> 父组件2、使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B的标签绑定自定义事件(事件的回调在A中,用来接收数据)。3、绑定自定义事件:(1) 第一种方式,在父组件中: 或 < Demo v-on: atguigu = " test " />="原创 2022-08-24 16:02:35 · 750 阅读 · 0 评论 -
Vue2(八):TodoList案例(初级版)
(1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2)实现动态组件:考虑好数据的存放位置,数据是一个组件在用,还是一些组件在用:一个组件在用:放在组件自身即可。一些组件在用:放在他们共同的父组件上(状态提升)。(3)实现交互:从绑定事件开始。原创 2022-08-22 21:55:37 · 1554 阅读 · 1 评论 -
Vue2(七):配置脚手架、render函数、ref属性、props配置项、mixin(混入)、插件、scoped样式
定义在另一个js文件中,这里定义在mixin.js中console . log('混合里的mounted优先调用');} }可以在另一个js中配置插件,然后通过import引入到main.js中看看下面的代码,复习复习之前的知识//第一个参数是Vue构造函数 console . log(x , y , z);//后面的参数是使用者传进来的东西123 //1.定义一个全局过滤器 Vue . filter('mySlice' , function(val) {//返回值别忘了 });原创 2022-08-19 15:32:03 · 2055 阅读 · 5 评论 -
Vue2(六):使用组件的三大步、组件的嵌套、Vuecomponent构造函数、单文件组件
使用创建,其中options和时传入的那个options几乎一样,但也有点区别;1、school组件本质是一个名为的构造函数,且不是程序员定义的,是Vue.extend生成的。2、我们只需要写或,Vue解析时会帮我们创建school组件的实例对象。3、特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent构造函数,而不是返回VueComponent的实例。......原创 2022-08-17 22:45:33 · 1628 阅读 · 0 评论 -
Vue2(五):收集表单数据、过滤器、自定义指令、Vue的生命周期
若:普通输入框,则v-model收集的是value值,用户输入的就是value值。若:单选框,则v-model收集的是value值,且要给标签配置value值。若:多选框1、没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)2、配置input的value属性:(1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)(2)v-model的初始值是数组,那么收集的的就是value组成的数组一句话,想正确收集,那么要原创 2022-08-16 21:40:54 · 1087 阅读 · 0 评论 -
Vue2(四):Vue监测数据的原理
如果我要点击按钮实现更新冯万宁儿的信息,那么如果一个属性一个属性地改,可以修改成功,并且Vue也会检测到并更新到页面。但是我如果直接把整个对象改了,可以修改成功,但是Vue监测不到并且不更新到页面,这是为啥捏?请君慢慢往下阅读2.原生js模拟Vue监视data对象中的数据用原生js写一个Vue监视data数据改变的效果代码自己琢磨琢磨,有点儿意思。可以看出,Vue监视数据的原理,就是靠如果不理解,想想前边讲Object.defineProperty时那个number这只是个模拟,实际上Vue做了更原创 2022-08-12 20:36:09 · 2378 阅读 · 0 评论 -
Vue2(三):绑定样式、条件渲染(v-if,v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序
写法:class=“xxx” xxx可以是字符串、对象、数组。字符串写法适用于:类名不确定,要动态获取。对象写法适用于:要绑定多个样式,个数不确定,名字也不确定。数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用。2.绑定style样式其中xxx是动态值。其中a、b是样式对象。二、条件渲染1.v-if写法:(1).v-if=“表达式”(2).v-else-if=“表达式”(3).v-else=“表达式”适用于:切换频率较低的场景。(因为会动DOM树,节点删来删去不原创 2022-08-12 10:10:53 · 2046 阅读 · 0 评论 -
Vue2(二):计算属性、监视属性、二者的区别
定义:要用的属性不存在,要通过Vue中已有属性计算得来。原理:底层借助了Objcet.defineproperty方法提供的getter和setter。get函数什么时候执行?(1).初次读取时会执行一次。(2).当依赖的数据发生改变时会被再次调用。优势:与methods实现相比,内部有缓存机制(复用),效率更高,调试方便。备注:1.计算属性最终会出现在vm上,直接读取使用即可,不用加括号,和methods区别一下子。2.如果计算属性要被修改,那必须写set函数去响应修改,......原创 2022-08-10 21:40:22 · 1192 阅读 · 0 评论 -
Vue2(一):初识Vue、模板语法、数据绑定、el和data的两种写法、MVVM、数据代理、事件
1、想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象。2、root容器里代码依然符合HTML规范,只不过混入了一些特殊的Vue语法。3、root容器里的代码被称为【Vue模板】。4、Vue容器与与Vue实例是一对一关系,一个容器只能被一个Vue实例接管,一个Vue实例只能接管一个容器。5、真实开发中只有Vue实例,并且会配合着组件一起使用。6、{{xxx}}中的xxx要写js表达式(不能写if,for这样的js代码),且xxx可以自动读取到data中的所有属性。................原创 2022-08-10 14:27:41 · 2246 阅读 · 0 评论