- 博客(29)
- 收藏
- 关注
原创 《Vue3学习手记8》
1.作用:创建一个响应式数据,但只对顶层属性进行响应式处理。3.特点:只跟踪引用值的变化,不关心值内部的属性变化。1.作用:创建一个浅层响应式对象,只会使对象的最顶层属性变成响应式的,对象内部的嵌套属性则不会变成响应式的3.特点:对象的顶层属性是响应式的,但嵌套对象的属性不是。总结通过使用shallowRef()和shallowReactive()来绕开深度响应。
2025-05-04 15:52:05
906
原创 《Vue3学习手记6》
点我将礼物送给父亲</button></div>const gift=ref("鲜花")// 3.接收自定义事件// 4.触发自定义事件// 5.也可以写为:<button @click="emit("get",gift)">点我将礼物送给父亲
2025-04-27 20:23:05
259
原创 《vue3学习手记4》
vue2生命周期 分为四个阶段,分别是创建,挂载,更新,销毁。包含八个钩子vue3生命周期 分为四个阶段,分别是创建,挂载,更新,卸载。包含八个钩子vue2和vue3钩子的名字有区别,且写法也有区别。对子组件和父组件都进行挂载,则子组件先呈现,父组件再呈现,这和vue的解析流程有关。
2025-04-17 19:24:41
383
原创 《vue3学习手记3》
*作用:**提升代码的可靠性、可维护性和开发效率<template></div>// TS的接口、泛型、自定义类型 // 作用:给代码设置一定的约束,防止出错// 知识点一:TS的接口//要求一:给person对象设置一定的约束//首先创建types文件夹,定义接口let person:personInter={id:"asycs01",name:"李华",age:18}// 这样使用接口之后,如果打错单词或者属性类型会给提示// 知识点二:TS的泛型 <>
2025-04-16 22:33:13
573
原创 《Vue3学习手记2》
点击修改姓名</button><button @click="changeAge">点击修改年龄</button> --><h2>姓名:{{person.name}}</h2><h2>年龄:{{person.age}}</h2><button @click="changeName">点击修改姓名
2025-04-15 20:03:32
543
2
原创 《Vue3学习手记》
data、methods和setup可以一起使用,但是不建议。Vue3的API设计是composition(组合)风格的。当用reactive创建响应式时,直接写,不用写value。Vue2的API设计是options(配置)风格的。当用ref创建响应式时,要加.value。计算属性有缓存,不管使用多少次都调用一次。但data可以读取setup中的数据。setup不能读取data中的数据。但是方法没有缓存,使用几次调用击此。
2025-04-11 19:05:11
573
原创 Day16——路由2
用于捕获路由组件的激活状态路由组件被激活时触发路由组件失活时触发现在在缓存路由组件的基础上,想要使h2中的文字透明度不断变化,在切换到别的组件时销毁控制文字不断变化的定时器以前用的钩子:BeforeDestroy销毁定时器,但现在为保存表单数据设置了NewsInfo不被摧毁 ,所以使用BeforeDestroy销毁也没有用。因此需要用到两个路由独有的生命周期钩子:activated(路由组件被激活时触发)和deactivated( 路由组件失活时触发)
2025-04-06 21:42:08
1688
原创 Day15——路由
一个路由(route)就是一组映射关系(key-value),多个路由需要路由器(router)进行管理。key是路径,value是组件。vue的一个插件库,专门用于当前的SPA应用程序1.单页Web应用程序(SPA)2.整个应用只有一个完整的页面。3.点击页面中的导航链接,只会做页面的。4.数据需要通过ajax请求获取1.安装vue-router, 命令npm i vue-router2.应用插件:Vue.use(VueRouter)
2025-04-03 18:41:44
1750
原创 Day14——vuex优化代码
当state中的数据需要经过加工后再使用时,可以使用getters加工:getters可用可不用,但当逻辑复杂且需要复用时最好使用getters。
2025-04-02 18:38:42
482
原创 Day12——Vue配置代理+案例练习
get目前所在端口号为8080,需要向端口号为5000的服务器请求数据。请求发送给服务器,服务器把数据给浏览器,但不会把数据呈现在页面上,因为端口号不一样,属于跨域。使用第三种方案,即开启代理服务器,开启代理服务器有两种方式,分别是nginx和Vue CLI,这里用 Vue CLI。
2025-03-30 20:11:25
903
原创 Day11——学习Vue
以案例说明:要求实现把StudentInfo组件中的studentName传给SchoolInfo组件(兄弟组件传递)(1)接收数据:SchoolInfo组件想接收数据,则在SchoolInfo组件给$bus绑定自定义事件,事件的回调留在SchoolInfo组件自身。$off$bus。
2025-03-26 22:46:20
240
原创 【无标题】
(1)拆分静态组件:组件要按照功能点拆分,命名不要与html元素冲突。(2)实现动态组件:考虑好数据的存放位置,数据是一个组件再用,还是一些组件在用。(1)一个组件在用:放在组件自身即可(2)一些组件在用:放在他们共同组件上(状态提升)(3)实现交互:从绑定事件开始。
2025-03-24 22:24:25
185
原创 Day8——vue脚手架
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个及以后的参数是插件使用者传递的参数。先引入SchoolInfo,后引入StudentInfo,所以页面是StudentInfo组件中设置的样式。这一部分在MyList组件中,但每一条数据在MyItem组件中。MyItem是MyList的子组件。功能:用于增强vue。
2025-03-24 12:46:41
390
原创 Day7——Vue脚手架
1.school组件本质是一个名为VueComponent的构造函数,且不是程序员定义的,是Vue.extend生成的。2.我们只需要写或,Vue解析时会帮我们创建school组件的实例对象, 即Vue帮我们执行的:new VueComponent(options)。3.:每次调用Vue.extend,返回的都是一个全新的IVueComponent!(1)组件配置中: (例如School.Student.App组件)
2025-03-22 16:47:18
935
原创 Day6——学习Vue
组件的定义:实现应用中局部功能代码和资源的集合。作用:复用编码、简化项目编码,提高运行效率。模块的定义:向外提供特定功能的js程序,一般就是一个js文件。作用:复用js,简化js的编写,提高js的运行效率。模块化:当应用中的js都以模块来编写的,那这个应用就是一个模块化的应用。组件化:当应用中的功能都是多组件的方式编写的,那这个应用就是一个组件化的应用。
2025-03-19 22:02:15
2029
原创 学习Vue-Day4
在列表过滤的基础上对列表按照年龄进行排列。其中,需要用到sort(),列表排序案例:列表排序要满足对过滤之后的数据进行排序,所以应该写在过滤的代码里。
2025-03-17 21:54:26
249
原创 Day2: Vue-初识vue
Vue.config.keyCodes.huiche=13 //Vue.config.keyCodes.自定义键名=键码methods:{console.log(event.target.value) //输出目标内容})
2025-03-15 23:07:50
806
原创 rem适配布局
rem(root em)是一个相对单位,类似于em,em是相对于父元素字体大小来说的,rem相对于html元素字体大小来说的优点:使用rem适配布局可以通过修改html里面的文字大小来改变页面中元素的大小,可以整体控制。
2025-03-12 15:25:54
666
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅