Vue
文章平均质量分 94
学习Vue
bfhonor
没有天生的高手,更没有永远的菜鸟。
展开
-
探索Vue组件通信的秘密:打破隔阂,实现数据共享
Vue组件通信是指在Vue.js框架中,不同组件之间进行数据传递和交互的过程。组件通信是构建复杂应用程序的关键部分,它可以帮助组件之间实现数据共享、状态管理和事件触发等功能,从而实现组件间的协作和交互。在Vue中,组件通信可以分为父子组件通信和非父子组件通信两种方式。父子组件通信:父组件通过props属性向子组件传递数据,子组件通过事件机制向父组件发送消息。这种通信方式适用于父组件向子组件传递数据的场景。非父子组件通信:Vue提供了一些高级的通信方式来处理非父子组件之间的通信原创 2023-08-02 10:59:24 · 400 阅读 · 0 评论 -
Vue组件的概念及其创建和使用
组件是可复用的Vue实例,封装标签,样式和JS代码🚧组件化:封装的思想,把页面上“可重复使用”封装为“组件”,从而方便项目的开发。一个页面,可以拆分成一个个组件,一个组件就是一个整体。每个组件可以有自己独立的结构样式和行为(html、css和js)原创 2023-07-24 18:00:00 · 1473 阅读 · 2 评论 -
Vue中的侦听器:数据变化的秘密揭示
如何侦听到某个变量值改变呢?使用watch配置项🚧watch:可以侦听到data/computed属性值的改变。(二)监听list变化, 同步到本地案例我们可以通过上篇的文章⛽Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能⛽,通过使用侦听器来实现本地数据化存储。简化每次都需要在方法里面添加-🚧🚧🚧 简单写法:侦听简单数据类型score,获取复杂数据类型list(数量变化)原创 2023-07-19 18:00:00 · 3390 阅读 · 0 评论 -
Vue成绩案例实现添加、删除、显示无数据、添加日期、总分均分以及数据本地化等功能
(一)增加功能通过本次案例实现添加、删除、显示无数据添加添加思路:①、获取科目 和 分数②、给添加按钮注册点击事件③、给list数组添加一个对象④、重置表单数据🍕引入moment🍕定义格式化的函数🍕reduce()方法从数组numbers中求和。初始累加器的值为0,回调函数中的累加器accumulator表示当前的总和,currentValue表示数组中的当前元素。在每一次迭代中,回调函数将累加器与当前元素相加,并返回新的累加器的值。最终,reduce()方法返回的就是累原创 2023-07-18 19:00:00 · 2131 阅读 · 0 评论 -
Vue计算属性:简化数据处理和视图更新的利器
在Vue中,计算属性(computed)是一种特殊的属性,可以根据其他数据的变化动态计算出一个新的值,并将其作为属性暴露出来。计算属性是基于它们的依赖进行缓存的,只有依赖发生变化时,才会重新计算。计算属性的定义方式是通过在Vue组件中添加一个computed对象,其中的每个属性都是一个计算属性。每个计算属性都包含一个getter函数,用于计算属性的值。原创 2023-07-14 19:00:00 · 407 阅读 · 0 评论 -
v-for遍历数组或者对象,渲染结构、v-bind动态设置class和style
作用:可以遍历数组或者对象,用于渲染结构。遍历数组语法:⚫ v-for="item in 数组名"⚫ v-for="(item, index) in 数组名“遍历对象语法:v-for = "(value , key) in 对象名"遍历数字语法:v-for = "item in 数字"key值:①、不写:默认按照下标给虚拟dom打标识。②、index:按照下标给虚拟dom打标识index!就地复用dom节点效率会低。③、id:按照下标给虚拟dom打标识id!就地复用dom节点效率会原创 2023-07-10 21:46:09 · 5417 阅读 · 0 评论 -
Vue让你轻松实现盒子的显示隐藏和双向数据绑定!
【代码】Vue让你轻松实现盒子的显示隐藏和双向数据绑定!v-model是Vue.js框架中的一个指令,用于在表单元素和组件上创建双向数据绑定。如果需要频繁切换展示状态,建议使用v-show,因为v-show的性能比v-if高。如果只需要根据特定条件展示元素,则建议使用v-if。原创 2023-06-14 09:50:47 · 827 阅读 · 0 评论 -
Vue.js中的两大指令:v-on和v-bind,实现页面动态渲染和事件响应
v-bind是Vue.js框架中的一个指令,用于动态绑定数据到HTML元素的特定属性上。它的作用是将Vue实例中的数据模型绑定到HTML中,从而实现页面的动态渲染和数据驱动。v-on用于绑定DOM事件监听器到HTML元素上,以便在用户触发这些事件时执行特定的逻辑。它的作用是将Vue实例中定义的方法与指定的HTML事件关联起来,从而实现事件处理和响应。原创 2023-06-13 16:02:56 · 2824 阅读 · 0 评论 -
Vue基本概念、vue-cli和插值表达式的快速使用
是vue官方提供的一个全局命令工具,这个命令可以帮助我们快速的创建一个vue项目的基础架子。// 注意:模板字符串语法非常像 ES6 `${变量} ${变量}`使用框架的时候,框架实现了大部分的功能,我们只需要按照框架的规则写代码。// vue语法插值表达式 {{}} 直接把数据渲染到页面内!// 2、放入到展示某个标签内:思想不再操作dom,// 1、初始化数据,写在return{内部}// {{}} 不能写在标签行内!// data固定:内部return。原创 2023-06-13 15:52:36 · 709 阅读 · 0 评论