- 博客(156)
- 收藏
- 关注
RSS订阅
1原创 React组件的创建方式
function函数组件)}const Arrow = () => 箭头函数组件// 创建组件return(独立JS文件的React组件
2022-11-21 22:23:14
208
原创 JSX的样式处理
通过引入外部css文件,并且通过类名的形式将导入的类名赋给元素的class属性,从而添加样式。1. 行内样式 -- style。
2022-08-21 18:23:24
276
原创 React中的JSX
JSX 是 JavaScript 的简写,表示在 JavaScript 代码中写 XML(HTML) 格式的代码优势: 声明式语法更加直观,与 HTML 结构相同,降低了学习成本,提升开发效率JSX 是 react 的核心内容1. 使用 JSX 语法创建 react 元素2. 使用 React DOM,render() 方法渲染 react 元素到页面中小结 推荐使用 JSX 语法创建 React 元素 写 JSX 就跟写 HTML 一样,更加直观,友好 JSX 语法更能体现 Reac
2022-08-06 15:57:03
114
原创 React脚手架的使用
npm v5.2.0引入的一条命令目的:提升包内提供的命令行工具的使用体验原来: 先安装脚手架包,在使用这个包中提供的命令现在: 无需安装脚手架包,就可以直接使用这个包提供的命令。
2022-08-04 21:53:12
94
原创 TypeScript介绍
typescript 是 JavaScript 的超集, js 有的 ts 都有typescript = type + JavaScript, 在 js 基础之上, 为 js 添加了类型支持typescript 是微软开发的开源编程语言, 可以在任何运行 JavaScript 的地方运行。
2022-08-03 15:16:09
134
原创 封装utils目录下的request模块
在vue中使用axios发起ajax请求,可以将axios挂载到vue原型中,但是这种方法有一定的缺点,即无法实现接口的复用,导致每次需要进行操作的时候都需要进行一次接口的调用,会造成服务器资源的浪费而在src目录下,规范的封装request模块,即发起请求用的模块,即可更加便利的调用接口和实现复用。...
2022-07-22 17:16:46
3427
原创 Vuex的核心概念
在vuex中,不建议组件直接修改store中的数据,以下为错误实例,不建议使用如下方式,这种方式不利于后期维护,很难查看数据是被什么组件修改的。通过刚才导入的mapMutation函数,将需要的mutations函数,因设为当前组件的methods方法。State提供为一的公共数据源,所有共享的数据都要统一返稿Store的State中进行存储。Mutation用户变更store中的数据。如下为触发mutation的第一种方式。......
2022-07-21 23:15:26
535
原创 git分支常用指令
几乎所有的版本控制系统都是以某种形式支持分支,使用分支意味着可以把工作从开发主线上分离开来进行重大的Bug修改,开发新的功能,以免影响开发主线在开发中一般有如下分支使用原则与流程:创建本地分支切换分支(checkout)创建并切换分支合并分支(merge)删除分支解决冲突在进行分支合并的时候,可能会出现两个分支都修改了同一个文件,但是修改的内容不一致,导致合并分支时发生冲突,此时需要先将发生冲突的文件进行修改,然后进行如下步骤:输入上述两条指
2022-07-09 23:12:59
133
原创 git常用指令
使用Git对代码进行版本控制,首先需要获得本地仓库Git工作目录下对于文件的修改(增加,删除,更新)会存在几个状态,这些修改的状态会随着我们执行Git的命令而发生变化使用如下指令来控制这些状态之间的转换常用指令参数有很多,使用别名能更方便的使用1.打开用户目录,创建.bashrc文件部分window系统不允许用户创建点号开头文件,可以使用gitbash,执行如下命令 2.在.bashrc文件中输入如下内容:查看修改的状态(stautus) 作用: 查看修改的状态(暂存区,工作区) 命令行
2022-07-09 15:37:05
172
原创 vue-router的常见用法
路由重定向指的是: 用户在访问地址 A 的时候,强制用户跳转到地址 C,从而展示特定的组件页面通过路由规则的 redirect 属性,指定一个新的路由地址,可以很方便的设置路由的重定向:在路由模块中配置如上代码,则进入页面时默认显示 home 组件,即home页面 通过路由来实现组件的嵌套展示,叫做嵌套路由 在 src/router/index.js 路由模块中,导入需要的组件,并使用 children 属性声明子路由规则.........
2022-06-26 23:50:00
447
原创 vue-router的基本用法
vue-router 是 vue.js 官方给出的路由解决方案,他只能结合 vue 项目进行使用,能够轻松的管理 SPA 项目中组件的切换vue-router官方文档地址 在 vue2 的项目中,安装 vue-router 的命令如下:创建路由模块在 src 源代码目录下,新建 router/index.js 路由模块,并初始化如下的代码:导入路由模块在 main.js 中导入创建的路由模块,并且进行挂载使用:在路由模块中声明路由的对应关系在路由模块中导入需要切换的
2022-06-25 23:30:38
119
原创 Vue路由的概念和实现简易路由
路由(Router),就是对应关系SPA 指的是一个 web 网站只有唯一的一个 HTML 页面,所有组件的展示与切换都在这唯一一个页面内完成此时,不同组件之间的切换需要通过前端路由来实现Hash 地址(# 锚链接)与组件之间的对应关系如下案例展示,在点击 链接是,虽然页面不会刷新,但是 url 地址会增添 #bx 的锚链接,并且会留下浏览记录,可以在浏览器进行回退和前进步骤1: 通过 标签,结合 comName 动态渲染组件,示例代码如下:步骤2: 在 APP.......
2022-06-21 22:28:10
86
原创 自定义指令
vue 官方提供了 v-text, v-for, v-model, v-if等常用的指令,除此之外 vue 还允许开发者自定义指令vue 中的自定义指令分类两类,分别是:在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令,示例代码如下:注意:在使用自定义属性时,可以传入一个参数,并且在 binding 中的 value 属性可以调用到该值例如:如果需要定义与 color 值不同的值,需要使用反引号 `red` 来进行赋值,例如:在使用了如上方法后,打印 bind
2022-06-21 16:52:01
304
原创 vue插槽
插槽 (Slot) 是 vue 为组件的封装者提供的能力,允许开发者在封装组件时,把不确定的,希望由用户指定的部分定义为插槽在封装组件的时候,可以在组件当中使用 slot 标签声明插槽的位置在需要将内容填充到指定名称的插槽中时,可以使用 v-slot: 这个指令示例代码如下:template标签只作为一个虚拟的元素,在最终渲染页面的时候不会生成任何元素v-slot: 后面要跟上插槽的名字v-slot: 指令不能直接用来元素身上,必须用在 template 标签上template 是一个虚拟的标签
2022-06-15 17:52:36
181
原创 vue动态组件
动态组件指的是动态切换组件的显示与隐藏vue 提供了一个内置的 组件,专门用来实现动态组件的渲染,示例代码如下:在 component 标签中的组件会被动态的创建和销毁,此时组件中的数据会在再次创建时被重置此时使用 vue 内置的 keep-alive 标签可以让其中的标签被缓存在内存中,不会被销毁代码示例:通过这种方式缓存的标签,在 vue 调试台中能看到有 inactive 的标识当组件被缓存时,会自动触发组件的 deactivated 生命周期函数当组件被激活时,会...
2022-06-15 16:47:33
6665
原创 数组中的方法
forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数forEach() 方法的特性是: 遍历一旦开始则不能中止,无法使用 return 等方式跳出循环代码示例:运行结果:在寻找到指定的元素后,没有被 return 跳出循环,而是继续将遍历完成,这样在某些情况下会浪费性能some循环在找到指定的项之后,可以通过 return true 固定写法终止 some 循环代码示例:运行结果:在需要判断例如: 购物车中的商品是否被全选 之类的场景时,可以使用 every 循环来对条件进行判
2022-06-08 20:56:45
57
原创 ref引用
ref 用来辅助开发者在不依赖于 jQuery 的情况下,获取 DOM 元素或组件的引用每个 vue 的组件实例上,都包含一个 $refs 对象,里面存储着对应的 DOM 元素或组件的引用,默认情况下,组件的 $refs 指向一个空对象在 vue 中一般不建议使用原生或者jQuery等方式直接操作 DOM 元素,vue 提供了 $refs 方法来进行 DOM 元素的引用,示例代码如下: 在需要绑定的元素标签中添加 ref="" 属性,就能在方法中通过 this.$refs.属性值 来获取和操作 DOM
2022-06-08 17:49:32
104
原创 组件之间的数据共享(面试重点)
在项目开发中,组件之间的最常见的关系分为如下两种:父子组件之间的数据共享又分为:父组件向子组件共享数据需要使用自定义属性,示例代码如下:子组件向父组件共享数据使用自定义事件,示例代码如下:......
2022-06-07 21:34:16
283
原创 vue组件及生命周期
组件化开发指的是: 根据封装的思想,把页面上可以重用的UI结构封装为组件,从而方便项目的开发和维护vue是一个支持组件化开发的前端框架vue中规定: 组件的后缀名是 .vue, 之前接触到的 App.vue 文件本质上就是一个 vue 组件每个 .vue 组件都由3部分构成,分别是:注意: 在 .vue 中,不能使用"data: {}"方式在其中定义数据,需要采用上述代码的方式在 vue 文件中定义 methods 方法的形式和html中一致,但在其中 this 指向的则是当前组件的实例对象其中
2022-05-31 22:26:34
382
原创 vue-cli项目
单页面应用程序是指一个Web网站中只有唯一的一个HTML页面,所有的功能与交互都在这唯一的一个页面内完成vue-clivue-cli 是 Vue.js 开发的标准工具,它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程中文官网:https://cli.vuejs.org/zh/安装和使用vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:npm install -g @vue/cli基于 .
2022-05-31 16:26:06
170
原创 计算属性的使用
计算属性计算属性指的是通过一系列运算之后,最终得到一个属性值这个动态计算出来的属性值可以被模板结构或 methods 方法使用,示例代码如下:var vm = new Vue({ el: '#app', data: { // 红色 r: 0, // 绿色 g: 0, // 蓝色 b: 0 }, methods: { // 点击按钮，在终端显示最新的颜色 show() { console.log(`rgb(${this.r}, ${this.g},
2022-05-20 22:19:45
1841
原创 watch侦听器
watch侦听器简介watch侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作语法格式如下:const vm = new Vue({ el: '#app', data: { username: 'zhangsan' }, watch: { //监听 username 值的变化 //newVal 是"变化后的新值" oldVal 是"变化之前的旧值" username(newVal, oldVal) { console.log(newVal, oldV
2022-05-11 17:03:15
63
原创 案例:过滤器中使用dayjs.js格式化时间
需要先引入 dayjs.js,并且在其官方文档查看使用方法代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
2022-05-11 15:38:23
126
原创 vue的过滤器
过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化,过滤器可以用在两个地方: 插值表达式 和 v-bind属性绑定过滤器定义语法示例:filters: { //注意: 过滤器函数形参中的val 永远都是"管道符"前面的那个值 capi(val) { //过滤器中一定要有一个返回值(return) //字符串有个 charAt 方法 这个方法接受索引值 表示从字符串中把索引对应的字符获取过来 const first = val.charAt(0).toUpperC
2022-05-11 15:36:28
370
原创 品牌列表案例
案例效果代码需要引入bootstrap.css文件index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,
2022-05-11 14:32:19
443
原创 vue的指令
指令是vue为开发者提供的模板语法,用于辅助开发渲染页面的基本结构vue中的指令展昭不同的用途分为如下6大类1.内容渲染指令内容渲染指令用来辅助开发渲染DOM元素的文本内容,常用的渲染指令有如下3个:v-text用法示例:<div id="app"> <p v-text="username"></p> </div> <!-- 导入vue库文件 在window全局就有了Vue这个构造函数 -->
2022-05-08 17:45:59
527
原创 vue的基本使用
导入vue.js的script脚本文件 在页面中声明一个将要被vue所控制的DOM区域 创建vm实例对象(vue实例对象)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- vue能够控制下方div 把数据填充到div内部 --> <div
2022-05-08 14:45:50
113
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人