Vue
淡淡蛋痛
后端、运维、测试、UI但是一名前端开发。
展开
-
vue的混入和插槽有什么区别
通过使用插槽,可以在一个组件上定义出一些具名的“插槽”,然后在组件使用时,通过插槽将外部的内容嵌入到组件内部的特定位置。插槽相当于一种组件之间的通信方式,父组件通过插槽向子组件传递内容,子组件可以将这些内容渲染到指定的位置。而插槽则是一种组件间通信的机制,用于在父组件向子组件传递内容并在指定位置渲染。当组件使用了混入时,混入中的属性和方法将会合并到组件中,若有冲突,则以组件自身的属性和方法为准。在 Vue 中,混入(Mixins)和插槽(Slots)是两个不同的概念,具有不同的作用和使用方式。原创 2023-09-25 09:39:26 · 69 阅读 · 0 评论 -
vue双向数据绑定原理和示列
当输入框的值发生变化时,就会更新 Vue 实例中对应的属性的值;反之,当 Vue 实例中对应的属性的值发生变化时,输入框的值也会被更新。方法被触发时,Vue 会检查该属性是否被监听,如果有监听,则会通知所有的监听器,将更新后的值同步到所有监听器中对应的视图上。属性的值被改变时,输入框的值也会随之改变。当视图被更新后,会触发实际的 DOM 操作,将最新的值渲染到输入框中。指令被解析时,会将输入框的值绑定到 Vue 实例中的一个属性上。属性,可以看到,当输入框的值发生变化时,当输入框的值发生变化时,会触发。原创 2023-09-25 09:34:55 · 202 阅读 · 0 评论 -
前端事件流(vue)
在事件流的传递过程中,可以通过阻止事件的默认行为或阻止事件的传播来控制事件的触发。在这个例子中,如果点击了子元素,则会先触发父元素的点击事件处理函数,再触发子元素的点击事件处理函数。如果我们将父元素的事件绑定改为。在 Vue 中,事件流主要分为三个阶段:捕获阶段、目标阶段和冒泡阶段,这三个阶段的触发顺序和 HTML 中的事件流相同。冒泡阶段:事件从目标元素开始向上传播,依次触发祖先元素上绑定的事件处理函数,直到到达最外层的祖先元素。捕获阶段:事件从最外层的父元素开始逐层向下传递,直到事件触发的目标元素。原创 2023-09-12 17:51:03 · 190 阅读 · 0 评论 -
vue的watch和computed的相同和不同、各自优缺点
相同点:不同点:watch的优点:watch的缺点:computed的优点:computed的缺点:原创 2023-09-06 10:09:28 · 241 阅读 · 0 评论 -
vue的组件间通讯
在这个例子中,第一个组件通过 $emit 方法触发了一个名为 event-name 的事件,并传递了一些数据。第二个组件通过 $on 方法监听这个事件,当事件被触发时,会执行回调函数并输出传递的数据。这样,两个没有父子关系的组件之间就可以通讯了。父组件可以通过 props 属性传递数据给子组件,子组件可以通过 $emit 方法来触发父组件中的事件。当子组件中的按钮被点击时,就会触发 handleClick 方法。就可以在子组件中使用这个数据了。原创 2023-09-05 10:46:10 · 50 阅读 · 0 评论 -
Vue2和Vue3的生命周期(同与不同)
【代码】Vue2和Vue3的生命周期(同与不同)原创 2023-08-29 15:44:58 · 166 阅读 · 0 评论 -
基于Vue的computed属性(不能异步,可以缓存)
在上面的例子中,我们定义了一个computed属性totalPrice,它根据data属性中的price和quantity计算出商品的总价,并将结果显示在页面中。每次price或quantity发生变化时,totalPrice都会自动更新。Vue的computed属性是一种计算属性,它能够根据其他属性的值计算出新的值,并且在依赖的属性值发生改变时自动更新。在Vue中使用computed属性可以简化代码,提高应用程序的性能。原创 2023-08-24 11:28:50 · 271 阅读 · 1 评论 -
Vue的查询验证
在这个例子中,我们使用了Vuelidate提供的required和email验证规则来验证用户输入的姓名和电子邮件。这只是一个简单的例子,你可以使用更多的验证规则来验证表单数据。无论你使用哪个验证插件,它们都提供了详细的文档和示例,可以帮助你轻松地实现查询验证。它支持数据验证、异步验证、组合验证、自定义管理和错误消息。它支持数据验证、异步验证、组合验证、本地化和自定义消息。你可以使用这些插件提供的验证规则来验证用户输入的表单数据,并在验证失败时显示错误消息。原创 2023-08-23 10:28:41 · 149 阅读 · 0 评论 -
Vue框架之watch监听
3.在开发中,watch是一个相对compute使用频率更高的属性,因为compute计算属性常用于公式,当其中一个值改变,结果重新计算。2.watch在首次渲染时是不会调用的,如果想首次渲染就调用需要设置 immediate为true。如:设定3个人同一天生日,只需要监听过生日这天,就可以让3个人的年龄同时加1。1.活用watch对于项目开发来说,能增加你数据处理的手段,且方便。优点:1.可以异步。原创 2023-08-16 14:00:03 · 239 阅读 · 1 评论