- 博客(38)
- 收藏
- 关注
RSS订阅原创 Vue3加载Element-plus
需要安装unplugin-vue-components和unplugin-auto-import;直接用上面代码覆盖vue.config.js里面的代码。然后修改vue.config.js配置文件。安装Elemnt-Plus。完整引用（文件会特别大）就可以在页面直接使用了。
2024-06-09 00:15:00
163
原创 Vue3新特性2
通过在生命周期钩子前面加on来访问组件的生命周期钩子。不需要再<template>里面套一层<div>（1）在setup中使用生命周期函数。（3）Fragment(碎片）不再限于模板中的单个根节点。只能父传子不能反向传递。
2024-06-07 00:45:00
175
原创 Vue3加载Elemnt-plus的字体图标
在项目根目录下，创建plugins文件夹，在文件夹下创建icons.js文件。在main.js中引入icons.js文件。安装icons字体图标。直接在组件中引入使用。
2024-06-06 00:30:00
110
原创 typescript进阶
创建多个名称一样，但是参数类型和反应值不同的函数，达到编写一个函数实现多种功能的目的。_password为私有值，password为存储器。-受保护属性：protected。实现将接口的功能进行更好的复用。-属性默认值：public。-私有属性:private。-静态成员:static。7.泛型类（用<T>）
2024-06-05 10:46:00
154
原创 AJAX基础
而 AJAX 技术通过在后台发送异步 HTTP 请求并接收响应，使得用户能够在不刷新整个页面的情况下获取更新后的数据。因此，AJAX 技术可以减少网络带宽的占用，并提高用户交互的效率和流畅度，使得 Web 应用程序更加灵活和可靠。许多流行的 JavaScript 框架，如 jQuery、AngularJS 和 React 等，都提供了丰富的 AJAX 功能，方便开发者使用。客户端通过 JavaScript 发送 AJAX 请求，可以是 GET 或 POST 方式，也可以发送 JSON 或其它格式的数据。
2024-06-05 10:45:29
381
原创 Vue状态管理（Vuex）
Vuex:一个专为Vue.js应用程序开发的状态管理模式+库。简单理解为更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据。在src文件下创建store文件夹创建index.js在里面添加内容，第一步：安装VueX:npm install -save vuex。第三步：在main.js中引入vuex。解决平级和跨级组件的数据交互的问题。定义：组件与组件之间的数据管理。第二种直接读counter的值。第二步：配置Vuex文件。第四步：在组件中读取状态。
2024-06-05 03:45:00
133
原创 Vue状态管理的核心（Vuex）
Action：提交的是mutation,不是直接变更状态，可以包含任何异步操作。Mutation：任何组件对这个值的引用都可以得到相应修改，例子2。现在就可以直接访问getCount。State:存储状态直接读取。
2024-06-05 03:30:00
262
原创 Axios网络请求封装
参考文档：https://www.kancloud.cn/yunye/axios/234845。创建一个utils包，在下面创建request.js,里面内容如例子1。console.log("服务器认证失败")；console.log("服务器拒绝访问")；console.log("服务器遇到意外")；console.log("服务器无响应")；console.log("语义有误")；console.log("地址错误")；//错误的处理才是我们需要最关注的。//包含着网络请求的所有信息。
2024-06-05 02:45:00
341
原创 网络请求跨域解决方案
JS采用的是同源策略，是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据，当协议，域名，端口任意一个不同时，就会产生跨域问题。target:'放产生跨域的域名(如：https://baidu.com)',上面这段代码放在transpileDependencies:true,后面。2.前端解决：proxy。1.后台解决：cors。解决完后需要重启服务器。
2024-06-05 02:45:00
146
原创 typescript基础
在函数名后面加一个<T>的泛型变量，然后在后面参数位置代替任意位置的类型。第一个数为number,第二个为string,第三个为:number。用as number去人工断言numArr里面必然有大于2的值。给一个变量配置多个类型，通过‘|’去配置，也可以去配置具体值。通过”：类型“去实现参数类型,用参数后面加？通过interface来定义自己创造的类型的约束方式。ts会根据变量存放初始值进行变量类型限定。9.泛型<T>//泛型变量。8.类型别名(type)4.基础类型和联合类型。5.数组、元组、枚举。
2024-06-04 22:34:35
158
原创 ES6规范
当左侧的值不为null和undefand的时候就会返回左侧的值，否则会返回右侧的值。由左侧的值不为null和undefined的时候就会取到右侧的值。把需要交换的数值放在交互数组中赋值给原始数组。支持用冒号（：）的方式修改默认的变量名称。可以将扩展数组放置在其他数组的任意位置。避免了var变量引发的变量提升的问题。将对象的值与key值一一对应就可以了。可以直接传入数组的扩展数组作为参数。当对象的属性值和值的变量名称一样时。将多个对象扩展后放在在新的对象中。将对象扩展后放在在新的对象中。
2024-06-04 22:34:07
220
原创 Vue3新特性1
setup()中使用props和context（简写ctx）setup里面没有this关键字，用ctx替代了当前使用对象。外部想访问必须通过return返回出去，ref实现了代替。Vue3中直接在setup方法中定义并return。注意点：通过message.value去修改数据。methods中定义的方法写在setup()中。一般用于生成数组和对象之类的复杂类型。增加一个setup写在里面。
2024-06-04 22:28:16
102
原创 嵌套路由配置
然后再对于页面添加<router-view><router-view>用·children去实现，一个页面显示的路由下的子路由。三级导航以及更多就继续加children:[]例子：about页面的子页面。重定向路径用redirect。//二级导航的路径不能加/
2024-06-04 22:26:38
94
原创 Vue引入路由配置
再去App.vue中的<template>标签里面加<router-view></router-view>//路由的显示入口。<router-link to="/about">关于</router-link>about页面: http://localhost:8080/#/about。<router-link to="/">首页</router-link>about页面：http:/localhost:8080/about。home页面：http://localhost:8080/#/
2024-06-04 22:25:36
268
原创 Axios网络请求
1、安装依赖npm install -save querstring。Axios的安装：npm install -save axios。组件引入：import axios from "axios"Axios是一个基于promise的网络请求库。2、转换参数格式：qs.string({})post请求中请求参数需要额外处理。
2024-06-04 22:23:50
207
原创 Vue引入第三方
官方文档：https://swiperjs.com/vue。一、Swiper：开源免费强大的触摸滑动插件。package.json文件下看是否安装成功。安装：npm i swiper。二、element-puls。
2024-06-04 22:23:18
373
原创 vue3组件生命周期
/定时器，例子，处理three.js创建出来的模型。卸载时：beforeUnmount、Unmount。创建时：beforeCreate、Create。更新时：beforeUpdate、Update。渲染时：beforeMount、Mount。才能实现显出白色框，再显示出数据出来。//卸载之前，把消耗性能的处理都干掉。//网络请求放在这里。
2024-05-30 13:30:00
125
原创 vue3Axios网络请求
1、安装依赖npm install -save querstring。Axios的安装：npm install -save axios。组件引入：import axios from "axios"Axios是一个基于promise的网络请求库。2、转换参数格式：qs.string({})post请求中请求参数需要额外处理。
2024-05-30 13:30:00
122
原创 veu3Axios网络请求封装
参考文档：https://www.kancloud.cn/yunye/axios/234845。创建一个utils包，在下面创建request.js,里面内容如例子1。console.log("服务器认证失败")；console.log("服务器拒绝访问")；console.log("服务器遇到意外")；console.log("服务器无响应")；console.log("语义有误")；console.log("地址错误")；//错误的处理才是我们需要最关注的。//包含着网络请求的所有信息。
2024-05-30 13:30:00
340
原创 vue3自定义事件组件交互
button @click="sendClickHandle">点击传递</button>在组件中反向传递数据，prop将数据从父组件传递到子组件，$emit实现反向传递。//参数1：字符串：理论上随便取，但需要意义。//直接默认传递拿到了data。message:"数据"//参数2：传递的数据。
2024-05-30 09:08:15
86
原创 vue3Props组件交互(依赖注入)
定义：props能够决定组件与组件之间的数据交互。//用prop接受传过来的title的数据。注意事项：数组和对象必须使用函数进行返回。
2024-05-30 09:07:30
116
原创 vue3组件基础
Vue单文件组件是一种特殊的文件格式，允许将vue组件的模板、逻辑与样式封装在单个文件中。第一步：引入组件import MyComponent from 'xx.vue'第二步：挂载组件components:{MyComponent}//如果在style中添加了此属性，当前样式只在当前组件中生效。第三步：显示组件<my-componentVue><h3>单文件组件</h3>//组件必须有的部分。
2024-05-30 09:06:05
97
原创 vue3表单输入绑定
使用v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。它负责监听用户的输入事件来更新数据，并在极端场景下进行一些特殊处理。.lazy：在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，可以通过添加lazy修饰符，从而转为在change事件之后进行同步，意思就是在输入完成后回车之后再进行同步而不是立刻同步。.trim:如果要自动过滤用户输入的首尾空白字符，可以给v-model添加trim修饰符。
2024-05-30 09:05:18
178
原创 vue3列表渲染
用v-for把数组映射为一组元素，v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。当在newsList里面再新增一个对象数组，只会在页面重新渲染新加的数组对象，先前已经渲染的不会改变，减少了性能消耗。通过添加key值去跟踪数组里面的id变化重而达到判定事务变化。//item就是数组里面的元素。
2024-05-30 09:03:50
172
原创 vue3{{}}大括号里面输入js表达式
/流程控制也不会生效,同时也不是单个表达式，只有三元表达式。限制如下：每个绑定都只能包含单个表达式如下。如{{ number+10}}
2024-05-30 09:02:43
92
原创 window.onload与document.domcontentloaded区别
【代码】window.onload与document.domcontentloaded区别。
2023-09-04 00:48:39
258
1
原创 人机交互中基于js购物计数器简单应用
在 HTML 中嵌入 JS 的第二种方式：引入外部独立的 JS 文件，这是一堆 JS 代码，这些 JS 代码在 HTML 引入的时候，遵循自上而下的顺序依次逐行执行，我们只需要建立一个js文件，在html中用script引入js文件即可。这种方式是最简单粗暴的，也是我个人比较喜欢的。js中对于加减有多种方式，这是最传统的，也是大多学习的，这种方式较为复杂，不容易理解，而我自己重新建立优化了其他算法。这是我自己优化的算法代码，能更加直观的处理加减号对于数量的变化，也能更加容易理解。
2023-05-17 17:48:04
110
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人