- 博客(17)
- 收藏
- 关注
RSS订阅原创 vue过滤器
1，作用：把需要绚烂的数据进行二次或多次处理，既可以对请求进行拦截，也可以对响应进行处理。过滤器中的方法没有挂载到实例上 this指向window。2，v-band 表达式（在2.1.0+ 开始支持）当全局过滤器和局部过滤器重名时，会采用局部过滤器。过滤器发法名字与methods中方法重名，不冲突。
2024-04-28 22:34:19
179
4
原创 全局事件中线
第二步就是使用事件总线，这里需要两个组件之间来进行配合才能接收数据。通过调用调用$on , $off , $emit实现。满足所有组件都能访问的全局事件总线。
2024-04-21 23:10:35
134
1
原创 Vue 计算属性
如果通过 app.text 改变了 text 的值，那么页面就会重新渲染出 text 的值，methods 中的方法也会重新执行。而如果改变的是 message ，因为 message 未在页面中渲染，那么页面就不会重新渲染 message 的值，methods 中的方法不会重新执行。computed定义的方法是以属性访问的形式调用的，methods定义的方法是以函数访问的形式调用的。计算属性虽然书写时是方法的形式，但是本质是属性，所以起名时按照属性的起名规则，应为名词。1. 计算属性的基本使用。
2024-04-15 00:10:27
172
1
原创 Vue生命周期
在这个阶段完成了DOM的初始化，但仍然无法获取到具体的DOM元素，因为vue还没有进行根节点挂载，但是根节点已经创建完成，下面Vue对DOM的操作将围绕这个根节点进行。在数据发生改变，但页面还没有完成更新时执行的操作，在此阶段视图的数据和DOM元素的数据没有保持同步。Vue的生命周期就是实例从创建到销毁的一个过程，从创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染，卸载等一系列的过程。DOM元素被销毁，此时对应 的Vue 实例所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
2024-04-07 23:03:05
309
原创 Vue组件化编程
在Vue中，组件嵌套是一个常见的操作。嵌套组件意味着你可以在一个组件内部使用另一个组件。这样做可以让你的应用程序更加模块化，便于代码的管理和复用。2.导入组件时，取的名称最好暴露的名称一致，名称可以任意定义(不推荐)全局注册或局部注册：将组件注册为全局可用或仅在特定实例/组件中可用。暴露的名称需要使用驼峰命名(推荐使用)，使用-连接。使用组件：在Vue模板中作为自定义元素使用。3.但凡注册了组件，必须使用组件。定义组件：创建一个组件对象。
2024-03-31 21:55:55
204
1
原创 Vue数据绑定
1.2.优缺点：少次的显示隐藏推荐使用v-if，减少内存的消耗多次的显示隐藏推荐使用v-show。绑定事件使用的语法为v-on:事件 ，同时也能使用@事件 来表示。单向绑定使用的语法为v-bind:，数据是由data流行页面！1.1不同点：v-if存在或不存在，v-show展示或不展示。v-if和v-for在vue2或vue3中都不要同时使用。在vue2中v-for比v-if优先级高。在vue3中v-if比v-for优先级高。.v-if和v-for优先级和使用事项。v-if和v-for优先级和使用事项。
2024-03-24 20:14:17
142
1
原创 Vue.js事件处理器
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。Vue.js 通过由点 . 表示的指令后缀来调用修饰符。.self - 只监听触发该元素的事件。.prevent - 阻止默认事件。.middle - 中间滚轮事件。.capture - 阻止捕获。.once - 只触发一次。.right - 右键事件。.stop - 阻止冒泡。.left - 左键事件。
2024-03-17 21:23:56
357
1
原创 Vue.js的初步运用
class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。
2024-03-10 20:51:05
268
原创 Es6中新增字符串识别方法
2.如果参数是 0 至 -1 之间的小数，会进行取整运算，0 至 -1 之间的小数取整得到 -0 ，等同于 repeat 零次。padStart(总长度,“填充的字符串”)：返回新的字符串，表示用参数字符串从头部（左侧）补全原字符串。padEnd(总长度,“填充的字符串”)：返回新的字符串，表示用参数字符串从尾部（右侧）补全原字符串。startsWith()：返回布尔值，判断参数字符串是否在原字符串的头部。以上两个方法接受两个参数，第一个参数是指定生成的字符串的最小长度，5.如果传入的参数是字符串，零次。
2023-11-12 22:08:46
16
1
原创 【无标题】
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。flex-end： 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。flex-start - 各行向弹性盒容器的起始位置堆叠。各行将会伸展以占用剩余的空间。
2023-11-05 21:13:48
15
原创 【无标题】
第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。justify-content 属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。row-reverse 反转横向排列（右对齐，从后往前排，最后一项排在最前面。column-reverse 反转纵向排列，从后往前排，最后一项排在最上面。flex-direction 属性指定了弹性子元素在父容器中的位置。横向从左到右排列（左对齐），默认的排列方式。
2023-10-15 20:33:56
17
原创 【无标题】
可以用来描述输入字段预期值的简短的提示信息，提示信息会在用户输入值之前显示，一旦用户输入信息该提示就会自动消失。设置之后在访问页面时，文字输入框会自动获得光标焦点，以便输入关键词。属性规定输入字段课选择多个值，如果使用该属性，则字段可选择多个值。用于规定输入框填写的内容不能为空，否则不允许用户提交表单。
2023-10-15 20:18:10
16
原创 css中伪类选择器
nth-last-of-type（n） 所有兄弟元素中同类型的倒数第n个。nth-last-child（n）所有兄弟元素中倒数第n个，n是数字。nth-child（n） 所有兄弟元素中的第n个，n是数字。nth-of-type（n） 所有兄弟元素中同类型的第n个。first-of-type 所有兄弟元素中同类型的第一个。last-of-type 所有兄弟元素中同类型的最后一个。first-child 所有兄弟元素中的第一个。only-child 没有兄弟元素的元素。first-line 选择元素中第一行。
2023-09-24 21:27:10
18
1
原创 清除浮动方法
注： 使用overflow:hidden;时要确保父级盒子大小要大于所有子集总和，overflow:hidden;也能处理同上边距问题.清除浮动是指清除掉元素float属性。
2023-09-10 21:35:22
31
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人