- 博客(39)
- 收藏
- 关注
RSS订阅原创 vite基础学习笔记：7.数据仓库（以用户登录获取token为例）
在store文件夹下新建modules文件夹，新建ts文件，如：user.ts(定义用户仓库)//定义相关用户的仓库//数据，注意 state 是一个函数, 函数的返回值才是真正定义的数据return {token: ''},//修改状态的方法actions: {},//计算属性getters: {});//获取仓库方法对外暴露。
2023-09-21 11:27:14
125
原创 vite基础学习笔记：6.Element使用（Form表单）-登录界面
/ 自定义校验规则：手机号码自定义校验规则// rule 表单校验的规则对象 value：当前文本的内容 callback：回调函数callBack();} else {callBack(new Error('请输入正确的手机号格式'));// 自定义校验规则：验证码自定义校验规则// rule 表单校验的规则对象 value：当前文本的内容 callback：回调函数callBack();} else {callBack(new Error('请输入正确的验证码格式'));
2023-09-15 14:53:49
160
原创 vite基础学习笔记：5.API接口（登录接口）
在src中新建api文件夹（统一管理请求），api中创建相应模块文件夹，新建文件登录接口信息如下：①URL地址：http://syt.atguigu.cn/api/user/login②请求方式：post③body参数：phone和code④返回数据：token。
2023-09-15 14:12:15
356
原创 vite基础学习笔记：4. axios二次封装与代理跨域
③响应拦截器，可以简化服务器返回的数据，处理http网络错误。②请求拦截器，一般可以在请求头中携带公共的参数：token。在src中新建utils文件夹（放入工具性文件），新建文件。①利用axios请求、响应拦截器功能。文件，将官网中的代码复制到文件中。参考vite官网文档。
2023-09-15 14:10:01
240
原创 vite基础学习笔记：1. 环境搭建
src\style 下新增reset.scss文件。④选择语言后（例如：TypeScript），回车。创建好后，桌面出现vite-project项目。安装依赖后，出现node_modules文件夹。找到 package.json 配置文件！：若选择PNPM命令安装方式则需要先安装。③选择一个框架（例如：vue），回车。搜索reset.scss。②输入项目名称，回车。点击链接跳转至浏览器。
2023-08-23 14:31:22
335
原创 Vue3基础学习笔记（六）项目开发配套工具 2.VueX语法
mutations感知到提交的change改变，执行mutations下的change方法改变数据。store感知到change这个action，执行store中actiona下的change方法。2. mutations感知到，change方法改变数据。组件中commit提交一个叫做change的数据改变；VueX创建一个全局唯一的仓库，用来存放全局的数据。commit提交一个叫做change的数据改变。举例2：修改全局数据（异步修改）举例2：修改全局数据（同步修改）举例1：创建全局数据并引用。
2023-08-23 11:29:21
29
原创 Vue3基础学习笔记（五）组合式 API 2.计算属性、侦听器
在setup函数中使用计算属性函数，根据现有响应式数据经过一定的计算得到全新的数据。接收一个getter函数，并为getter函数返回的值，返回一个不变的ref对象。接收一个具有get和set的对象，返回一个可变的（可读写）ref对象。显示指定依赖源，依赖源更新时执行回调函数。配置immediate属性未true。，依赖源更新时候重新执行自身。
2023-08-23 11:24:33
71
原创 Vue3基础学习笔记（六）项目开发配套工具 1.脚手架及路由
卸载老脚手架：在窗口中输入（该步骤可略过)安装脚手架：在窗口中输入安装vue脚手架工具npm install -g @vue/cli@4.5.9 安装4.5.9版本脚手架工具（安装特定版本脚手架）创建项目目录：在窗口中输入 vue create demo（其中demo为项目名称）桌面就有了一个demo目录，切换至项目的目录中后，启动项目npm可通过链接访问项目也可在vs-code启动。
2023-07-16 10:36:13
48
原创 Vue3基础学习笔记（五）组合式 API 1.setup函数，ref函数与reactive函数，toRef函数与toRef函数
composition API（组合式API）特点是特定功能相关的所有东西都放到一起维护，比如功能A相关的响应式数据，操作数据的方法等放到一起，这样不管应用多大，都可以快读定位到某个功能的所有相关代码，维护方便；经过reactive函数处理之后返回的对象，如果给这个对象解构或者展开，会让数据丢失响应式的能力，为了解决这个问题需要引入toRefs函数，保证该对象展开的每个属性都是响应式的。给从响应式对象中解构出的属性添加响应式，并与原响应式对象保持链，修改解构出的属性，原响应式对象也会被修改。
2023-07-10 15:39:02
138
原创 Vue3基础学习笔记（四）插件的定义和使用
/ app:指的是vue实例 options：使用插件时，额外传入的参数 const mtPlugin = {consol . log(app , options) } } //或者使用箭头函数 const validatorPlugin =(app , options) => {
2023-07-10 15:38:40
70
1
原创 Vue3基础学习笔记（三）探索组件9-补充说明
只显示一次值在页面上，之后若是动态修改值也不会进行渲染。(实际值进行了修改)</</constcreateAppdatareturncount1template{{count}}</div>;</
2023-07-10 15:38:10
41
1
原创 Vue3基础学习笔记（三）探索组件7- 插槽
定义插槽（子组件的模板中定义）：其中子组件的插槽中内容也会展示< slot > 子组件插槽中的默认内容 < / slot >< child > 其中的内容全部替换到子组件的插槽中 < / child >< slot ：name : "name" > 子组件插槽中的默认内容 < / slot >message } } < / div > < / template > < / child > //可简写为 < child > < template #name > < div > {
2023-07-07 09:22:18
166
1
原创 Vue3基础学习笔记（三）探索组件6-组件间双向绑定高级内容
/当不传递修饰符时，默认给modelModifiers一个空对象；当传内容时，uppercase就会放到对象里面，显示为{uppercase: true}
2023-07-06 14:16:06
61
1
原创 Vue3基础学习笔记（三）探索组件5-父子组件通信
子组件向外触发add事件时带了参数2，父组件监add事件就可以获取参数。若想更换接收参数名字，可在v-model后加冒号设置别名接收。例如一：在父组件完成计算部分。例如二：在子组件完成计算部分。对对象向外触发的参数进行校验。② 向外触发事件的名字是。属性为对象形式：可通过。① 接收的参数名字是。
2023-07-06 14:15:03
53
1
原创 Vue3基础学习笔记（三）探索组件4-Non-prop属性
counter内容</div><div :style="$attrs.style">counter内容</div><div :style="$attrs.style">counter内容</div><div v-bind="$attrs">counter内容</div><div v-bind="$attrs">counter内容
2023-07-06 14:14:07
63
1
原创 Vue3基础学习笔记（三）探索组件2-组件间传值
运行结果：①父组件调用子组件的标签，通过标签上的属性向子组件传递值②子组件通过props接收属性值之后，可以在模板中直接使用从父组件中接收过来的数据了运行结果：父组件调用子组件的标签，通过标签上的属性向子组件传递值(其中：将属性内容定义在data数据项中，通过v-bind指令传递)运行结果：type：String，Boolean，Array，Object，Function，Symbol运行结果:2. Function类型校验必填校验required 必填若父组件未向子组件传递cont
2023-07-06 14:11:56
276
1
原创 Vue3基础学习笔记（三）探索组件3-多参数传子组件/大小写传参/单行数据流
/v-bind="params 等同于上一行代码constcreateAppdatareturnparamscontent1234a123b456c789template;</
2023-07-06 14:11:30
133
1
原创 Vue3基础学习笔记（三）探索组件1
/包了一层 template : ` <counter /> ` });data() {return {const//包了一层 template : ` <counter /> ` });data() {return {//包了一层 template : ` <counter /> ` });data() {return {createApp//包了一层 template : ` <counter /> ` });
2023-07-06 14:11:00
29
1
原创 Vue3基础学习笔记（二）Vue基础语法7-表单中双向绑定
/ 修饰符 lazy, number, trimconstcreateAppdatareturnmessage'hello'template;
2023-07-06 14:06:02
90
1
原创 Vue3基础学习笔记（二）Vue基础语法4-样式绑定语法和条件渲染
字符串形式对象形式数组形式.redcolor;.bluecolor;</</</</</constcreateAppdatareturn// ①字符串形式'red'// ②对象形式redfalsegreentrue// ③数组形式classArray'red''green'bluetruetemplate;</实现效果：通过控制台修改数据，颜色发生变化。
2023-07-06 14:02:44
146
1
原创 Vue3基础学习笔记（二）Vue基础语法3-常用模板语法
简写为如：简写为constcreateAppdatareturnmessage'hello'template<div内容</div>;</实现效果：给div添加了一个name属性，属性值为data中message的值。
2023-07-05 14:36:49
110
1
原创 Vue3基础学习笔记（二）Vue基础语法2-data、methods、computed、watcher
存储vue实例或者组件里面的数值等价于等价于。
2023-07-05 13:59:29
222
1
原创 Vue3基础学习笔记（二）Vue基础语法1
/</// createApp表示创建一个Vue应用，存储到app变量中// 传入的参数表示应用最外层的组件应该如何展示// vue面向对象编程参考了mvvm设计模式，m->moddle数据，v->view 视图，vm->viewModel 视图数据连接层constcreateAppdatareturnmessage'hello'template;// vm代表的就是vue应用的根组件constmount'#root';</
2023-06-21 09:23:37
30
原创 Vue3基础学习笔记（一）Vue语法初探
①插值语法：{{ }} 可以获取数据状态值，也可以写一些简单的表达式，如果对象里数据状态值改变，那么插值处的内容都会更新。①V-on 绑定事件监听，可简写为@，经过v-on绑定的属性可以直接执行js代码,也可以去vue中。③在id为root元素中，使用模板作为展示的内容，也就是把模板放到id为root元素中。// v-bind指令作用，标签上某个属性绑定内容时使用，而插值语法是标签内部绑定内容。// 创建实例，定义组件，最后将实例挂载在root节点下。// ①创建一个Vue的实例，实例的名字是app。
2023-06-15 15:11:28
281
1
原创 JS基础学习笔记-JSON
全称JavaScript Object Notation（JS对象表示法），是一种数据交换的文本格式，而不是一种编程语言是一个特殊格式的字符串，可以被任意的语言所识别，可以转换为任意语言中的对象，在开发中主要用来数据的交互。
2023-06-14 14:43:45
28
原创 JS基础学习笔记-BOM
全称Browser Object Model，是浏览器对象模型，提供与浏览器相关的信息BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构，可以使我们通过JS来操作浏览器。
2023-06-13 14:38:51
82
2
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人