建设网站青岛,顺德网站设计,番禺互联网公司,WordPress建站布置文章目录 一、计算属性1.什么是计算属性2.代码示例 二、监听属性三、事件处理 代码仓库#xff1a;跳转 当前分支#xff1a;04
一、计算属性
1.什么是计算属性
Vue 中的计算属性具有以下作用#xff1a; 数据处理#xff1a;计算属性可以用于对数据进行处理和计算… 文章目录 一、计算属性1.什么是计算属性2.代码示例 二、监听属性三、事件处理 代码仓库跳转 当前分支04
一、计算属性
1.什么是计算属性
Vue 中的计算属性具有以下作用 数据处理计算属性可以用于对数据进行处理和计算例如对原始数据进行格式化、筛选、排序等操作以便在视图中直接使用处理后的数据。 响应式更新计算属性会根据其所依赖的响应式属性的变化而自动更新。这意味着当依赖的数据发生变化时计算属性会自动重新计算其值从而保持视图的实时更新。 模块化和复用通过将复杂的数据处理逻辑封装在计算属性中可以提高代码的可维护性和可读性。此外计算属性还可以在不同的组件中进行复用从而避免重复编写相同的数据处理逻辑。 缓存计算属性会缓存其计算结果只有在依赖的响应式属性发生变化时才会重新计算。这样可以避免不必要的重复计算提高性能。
总的来说计算属性在Vue中扮演着对数据进行处理、响应式更新、模块化和复用以及缓存等方面的重要角色能够帮助我们更加高效地管理和处理组件中的数据。
2.代码示例
在这个示例中我们定义了一个名为price的数据属性和一个名为discount的数据属性它们分别表示商品的原始价格和折扣比例。然后在computed属性中我们定义了两个计算属性originalPrice和discountedPrice分别用于计算原始价格和折扣后的价格。
当price或discount发生变化时originalPrice和discountedPrice会自动重新计算其值并且在模板中使用它们时会自动更新视图。这样我们就可以方便地对价格进行处理和计算而且不需要手动管理其更新逻辑。
App.vue
templatedivp原始价格{{ originalPrice }}/pp折扣后的价格{{ discountedPrice }}/p/div
/templatescript
export default {data() {return {price: 100,discount: 0.2};},computed: {originalPrice() {return this.price;},discountedPrice() {return this.price * (1 - this.discount);}}
};
/script
效果 二、监听属性
在 Vue 3 中我们可以使用 watch 函数来监听属性的变化。
watch 函数接受两个参数要监听的属性和回调函数。当被监听的属性发生变化时回调函数就会被触发。
以下是一个完整的代码示例
MyCounter.vue
templatedivp当前计数{{ count }}/pbutton clickincrement增加计数/button/div
/templatescript
import { ref, watch } from vue;export default {setup() {const count ref(0);function increment() {count.value;}watch(count, (newValue, oldValue) {console.log(计数从 ${oldValue} 变为 ${newValue});});return {count,increment};}
};
/script在这个示例中我们首先导入了 ref 和 watch 函数。然后在 setup 函数中我们使用 ref 创建了一个名为 count 的响应式属性并定义了一个 increment 函数来增加 count 的值。接着我们使用 watch 函数来监听 count 的变化并在回调函数中打印出新旧值。
当点击按钮增加计数时count 的值会发生变化watch 中的回调函数就会被触发打印出新旧值。这样我们就可以方便地监听属性的变化并在变化时执行相应的逻辑。 三、事件处理
我们可以使用 v-on 指令来监听 DOM 事件从而执行 JavaScript 代码。
v-on 指令可以缩写为 符号。以下是代码示例
ClickCom.vue
templatebutton clickhandleClick点击我/button/templatescriptexport default {methods: {handleClick() {alert(按钮被点击了)}}};/script 事件
原生 DOM 事件是指由浏览器原生支持的事件Vue 3中支持的原生 DOM 事件包括但不限于
点击事件click双击事件dblclick鼠标移入事件mouseenter鼠标移出事件mouseleave键盘按下事件keydown键盘松开事件keyup输入事件input变化事件change提交事件submit滚动事件scroll聚焦事件focus失焦事件blur鼠标移动事件mousemove鼠标按下事件mousedown鼠标松开事件mouseup… 拖拽事件drag… 拖拽开始事件dragstart… 拖拽结束事件dragend… 拖拽进入目标元素事件dragenter… 拖拽离开目标元素事件dragleave
这些是常见的原生 DOM 事件Vue 3可以通过符号在模板中绑定这些事件并在对应的处理函数中执行相应的逻辑。
