- 博客(36)
- 收藏
- 关注
原创 微信小程序的常用事件的用法
bindtap 或 catchtap:点击事件,当用户点击某个元素时触发。bindinput 或 catchinput:输入事件,当用户在输入框中输入内容时触发。bindchange 或 catchchange:选择改变事件,当用户选择不同的选项或者切换开关状态时触发。bindsubmit 或 catchsubmit:表单提交事件,当用户提交表单时触发。bindscroll 或 catchscroll:滚动事件,当页面滚动时触发。
2024-06-21 11:24:07
587
原创 JavaScript 表单和用法
通过以上方法,你可以在JavaScript中处理表单的提交事件、获取和设置表单中的输入值,从而实现对表单的有效控制和交互。
2024-06-14 10:23:09
401
原创 微信小程序的view的属性值和用法
微信小程序中的 view 组件具有多种属性,用于控制其样式、行为和交互。class / style: 控制视图的样式。hover-stay-time: 控制悬停时的样式和行为。data-xxx: 自定义数据属性,可在 JavaScript 中访问。bindtap / catchtap: 绑定点击事件。animation: 指定动画效果。hidden: 控制视图是否隐藏。控制滚动行为。selectable: 控制文本是否可选中。
2024-06-06 16:59:28
1369
原创 微信小程序中Button组件的属性值和用法详解
简要介绍Button组件在小程序中的作用和重要性,以及为什么开发者需要深入了解其属性值和用法。size:设置按钮尺寸大小。type:设置按钮样式类型。plain:设置按钮是否镂空。disabled:设置按钮是否禁用。open-type:设置按钮的开放能力。hover-class:设置按钮按下后的样式类。form-type:设置按钮在表单中的功能类型。lang:设置开放能力的语言类型。hover-stop-propagation:设置是否阻止事件冒泡。
2024-05-31 10:26:34
1571
原创 【路由組件】
完成Vue Router 安装后,就可以使用路由了,路由的基本使用步骤,首先定义路由组件,以便使用Vue Router控制路由组件展示与 切换,接着定义路由链接和路由视图,以便告知路由组件渲染到哪个位置,然后再项目中创建路由模块,最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来,还要在App组件中定义路由视图。路由视图标签定义,该标签会被渲染成当前路由对应组件,另外,为了方便在不同组件之间切换,可以通过标签定义路由链接,该标签的to属性表示链接地址,与路由匹配规则中的path属性对应。
2024-05-23 15:42:35
369
原创 vue路由守卫
在Vue Router中,activated和deactivated是两个钩子函数,用于处理路由的激活和停用。它们允许我们在路由切换时执行一些操作,比如数据的加载和卸载、动画效果的处理等。下面我们来看一下它们的具体作用:activated路由守卫:当导航到该路由时触发。在activated守卫中,我们通常会执行一些需要在路由激活时进行的操作,比如数据的加载、页面的初始化等。deactivated路由守卫:当离开该路由时触发。
2024-05-18 16:17:38
261
原创 vue的组件库
作为一个Vue.js开发者,使用组件库是提高效率和代码重用的关键。Vue的组件库为开发者提供了一系列预先构建好的组件,可以在项目中直接引用和定制。
2024-05-09 21:45:25
580
1
原创 父向子组件传递数据
上述代码中,init,height,weight,属性是子组件中声明的props,需要在子组件中自行添加height,weight这两个props,第二行代码用于通过v-bind实现将对象识别为表达式而不是字符串,第三行代码表示通过bodyInfo.height,bodyInfo.weight进行动态赋值。init属性是子组件声明的【props】,第二行代码通过v-bind实现将数组识别为表达式而不是字符串,第三行代码表示为init属性进行动态赋值。从父组件中为子组件传递数组类型的props数据。
2024-04-30 11:49:42
208
原创 Vue基本路由 多级路由
Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA),它能够管理应用中不同视图和页面之间的导航。使用 Vue.use(VueRouter) 安装 Vue Router 插件。定义路由和组件之间的映射关系,即路由表。创建 VueRouter 实例,并将路由表传入。在 Vue 实例中将 router 实例注入,启动应用。多级路由(嵌套路由)允许在一个路由中加载另一个路由,创建更复杂的页面结构。在父级路由的组件中定义 来渲染子路由。
2024-04-26 11:39:16
425
原创 过度和动画使用方法
nextTick方法是Vuejs中一个非常有用的工具,可以确保在DOM更新之后执行特定的操作。结合过渡与动画效果,我们可以创建出更加生动和吸引人的用户界面。希望本文能够帮助你更好地理解nextTick方法是Vue.js中一个非常有用的工具,可以确保在DOM更新之后执行特定的操作。结合过渡与动画效果,我们可以创建出更加生动和吸引人的用户界面。希望本文能够帮助你更好地理解nextTick方法是Vuejs中一个非常有用的工具,可以确保在DOM。
2024-04-21 12:10:55
675
原创 生命周期使用方法
Vue生命周期提供了丰富的钩子函数,允许开发者在不同阶段插入自定义逻辑,从而更好地控制组件的行为。通过深入理解Vue生命周期的各个阶段,开发者可以更加高效地开发和维护Vue应用。在编写Vue组件时,应根据具体需求合理使用生命周期函数,避免滥用,以确保代码的可读性和可维护性。
2024-04-13 10:42:07
1418
原创 vue的事件
除了原生DOM事件外,Vue还支持自定义事件,在组件之间进行通信和数据传递。通过emit和emit和emit和on方法,我们可以在父组件中触发自定义事件,并在子组件中监听和处理这些事件。// 父组件中触发自定义事件// 子组件中监听并处理自定义事件// 处理事件数据});除了Vue提供的预定义事件修饰符外,我们还可以自定义事件修饰符来满足特定需求。// 全局注册自定义按键修饰符// 将F4键码注册为115// 在模板中使用自定义按键修饰符。
2024-04-03 13:55:38
531
原创 Vue.js 样式绑定
class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。
2024-03-30 10:11:48
253
原创 vue.js方法
2.data(){return{}}函数式,注:搭建脚手架(vue-cli)后,一定要使用函数式。data中装的是定义的变量,跟插值对应。1.data:{}对象式。注:不可以使用箭头函数。
2024-03-08 14:21:34
336
原创 箭头函数(使用方法)
由于箭头函数没有自己的this,所以它继承了外部函数的this,即对象obj,从而正确地输出了Hello, John!具体来说,箭头函数的this绑定到了它所在的作用域的this,也就是说,它没有自己的this。传统函数中的this指向调用它的对象,而箭头函数的this是在定义时绑定的,不会被改变。从输出结果可以看出,传统函数中的this指向全局对象,而箭头函数中的this指向箭头函数所在作用域的this。传统的函数在运行时会根据调用方式来确定this的值,而在箭头函数中,this的值是在定义时就确定的。
2024-01-14 11:38:11
415
1
原创 CSS常用属性
通过将容器的display属性设置为flex,然后使用justify-content和align-items等属性来控制元素的排列方式。您可以使用@font-face规则来定义自定义字体,并在元素中使用相应的字体。边框样式属性用于定义元素边框的样式。您可以通过设置border-style属性来改变边框的样式,常见的值包括实线(solid)、虚线(dashed)、点线(dotted)等。与盒阴影类似,您可以设置阴影的颜色、偏移量、模糊半径等参数。您可以同时设置四个角的圆角半径,或者分别设置每个角的圆角半径。
2024-01-05 14:18:23
434
1
原创 CSS Flexbox(使用方法)
在前端开发中,灵活的布局是非常重要的。而 CSS 的 Flexbox(弹性盒子)布局模型提供了一种强大且直观的方式来创建灵活的布局。上述代码将创建一个类名为 “container” 的元素,并将其标记为弹性容器。弹性容器具有一些重要的属性,可以通过设置这些属性来控制弹性项目的排列和对齐方式。在使用 Flexbox 布局时,我们需要理解两个核心概念:弹性容器和弹性项目。弹性项目也具有一些属性,可以通过设置这些属性来控制它们在弹性容器内的行为。上述代码将创建一个居中对齐的弹性容器,其中包含三个等宽的弹性项目。
2023-12-29 16:02:21
380
1
原创 js防抖使用方法
其他部分与简单版防抖相同。是一种在处理频繁触发的事件时用到的技术,它可以限制一个函数在一定时间内只执行一次。带立即执行功能的防抖可以在页面加载后立即执行一次函数,然后在指定时间内再次触发事件时不会立即执行,而是延迟指定时间后执行。防抖的实现方式不同,但它们的思路相同:通过控制函数的执行频率,避免函数被过于频繁地调用,从而减轻浏览器的负担。简单版防抖的原理是在事件被触发 n 秒后再执行回调函数,如果在这段时间内该事件又被触发,则重新计时。它们的主要目的是减少函数的执行次数,从而提高网页的响应速度和性能。
2023-12-25 09:55:24
501
原创 node.js(操作方法)
如果err参数有值,则表示读取失败。需要注意的是,如果指定的文件不存在,则会自动创建新文件;如果需要在原有文件内容的基础上追加新内容,则可以使用fs.appendFile方法。以上代码读取了当前路径下的file.txt文件,并将文件内容输出到控制台。在回调函数中,err参数表示读取文件时是否发生错误,data参数则表示读取到的文件内容。需要注意的是,如果没有指定编码格式,则默认以Buffer的形式读取文件内容。以上代码分别读取了当前路径下的2.txt和day01.html文件,并将文件内容输出到控制台。
2023-12-24 09:59:43
331
1
原创 JQ中css样式使用方法
需要注意的是,使用 .css() 方法设置的样式直接作用于元素的 style 属性,会直接修改元素的行内样式。如果想要在多个元素之间共享样式,可以考虑使用 CSS 类来管理样式,并使用 jQuery 的 .addClass() 和 .removeClass() 方法来添加或移除类。请注意,这只是使用 jQuery 的一种方式来设置元素的样式。在现代 Web 开发中,更多的开发者选择使用原生 JavaScript 的方法来操作元素的样式,例如使用 .style 属性直接访问和设置元素的样式。
2023-12-10 10:58:10
764
1
原创 ES6中class用法
在ES6中,我们可以使用class关键字来定义类。类提供了一种面向对象的编程方式,使得代码结构更加清晰和可维护。除了实例方法,ES6的类还引入了类属性和静态方法的概念。
2023-11-26 12:17:39
379
1
原创 js字符串用法
获取指定位置的字符编码:可以使用 charCodeAt() 方法获取指定位置的字符的 Unicode 编码。查找子串:可以使用 indexOf() 方法或者 includes() 方法来查找子串在字符串中的位置。提取子串:可以使用 substring()、slice() 或者 substr() 方法来提取子串。访问字符:可以使用方括号加索引或者 charAt() 方法来访问字符串中的特定字符。替换子串:可以使用 replace() 方法来替换字符串中的子串。
2023-11-19 10:06:02
30
原创 CSS3 渐变动画
线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradients)- 由它们的中心定义CSS3 线性渐变为了创建一个线性渐变,你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时,你也可以设置一个起点和一个方向(或一个角度)。语法#grad {下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到黄色:#grad {线性渐变 - 对角#grad {使用角度#grad {使用多个颜色节点。
2023-11-05 12:53:28
105
原创 2D 3D转换方法
这些转换函数可以单独使用,也可以组合在一起形成复合转换效果。同时,还有一些其他的属性可用于调整转换效果,例如 perspective-origin、transform-origin 等。需要注意的是,2D 转换只能在平面内进行变换,而 3D 转换可以在三维空间内进行变换。同时,浏览器对不同的转换效果的支持程度也有所差异,因此在使用时需要进行兼容性测试。希望这个总结对你有所帮助!如果还有其他问题,请随时提问。
2023-10-29 10:25:19
209
1
原创 过渡及动画样式(使用方法)
animation-name 指定要绑定到选择器的关键帧的名称animation-duration 动画指定需要多少秒或毫秒完成animation-timing-function 设置动画将如何完成一个周期animation-delay 设置动画在启动前的延迟间隔。animation-iteration-count 定义动画的播放次数。animation-direction 指定是否应该轮流反向播放动画。
2023-10-21 11:33:21
48
1
原创 边框属性(使用方法)
两种方法:border-radius: 10px 20px 30px;以上两种方法都可以设置圆角,百分比是全局设置,px方法是单个设置。
2023-10-06 17:22:06
81
1
原创 部分弹性盒子属性用法
order弹性子元素,排序,用整数值来定义排列顺序,数值小的排在最前面,可以 为负值,属性设置弹性容器内弹性子元素属性。</margin;padding;.bosswidth;height;border;display;flex-flow;.box1width;height;;order;.box2width;height;;order;.box3width;height;;order;
2023-09-29 20:24:22
34
1
原创 弹性盒子(使用方法)
内容对齐(justify-content)属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线()对齐。语法: flex-start | flex-end | center | space-between | space-around。
2023-09-22 16:53:01
78
1
原创 HTML5的标签
HTML article 元素表示文档、页面、应用或网站中的独立结构,其意在成为可独立分配的或可复用的结构,如在发布中,它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件,或者其他独立的内容项目。HTML aside元素表示一个和其余页面内容几乎无关的部分,被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。一个页脚通常包含该章节作者、版权数据或者与文档相关的链接等信息。
2023-09-09 20:59:30
46
原创 HTML5的标签
header>元素用于展示介绍性内容,通常包含一组介绍性的或是辅助导航的实用元素。它可能包含一些标题元素,但也可能包含其他元素,比如 Logo、搜索框、作者名称,等等。
2023-09-09 14:50:41
39
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人