【前端学习笔记】Vue Day2| Vue 基础（部分）

🌟博主主页：我是一只海绵派大星

📚专栏分类：前端

📚参考教程：菜鸟教程/黑马
❤️感谢大家点赞👍收藏⭐评论✍️

目录

一、指令补充

1、指令修饰符

 2、v-model 应用于其他表单元素

二、computed 计算属性  

1、基础语法 

2、计算属性 vs 方法  

三、watch 侦听器 

1、基础语法 

---

一、指令补充

1、指令修饰符

通过 "." 指明一些指令 后缀，不同 后缀 封装了不同的处理操作 → 简化代码

① 按键修饰符

         @keyup.enter → 键盘回车监听

② v-model修饰符

        v-model.trim → 去除首尾空格

        v-model.number → 转数字

③ 事件修饰符

        @事件名.stop → 阻止冒泡

        @事件名.prevent → 阻止默认行为

 

 2、v-model 应用于其他表单元素

常见的表单元素都可以用 v-model 绑定关联 → 快速 获取 或 设置 表单元素的值v-model 应用于其他表单元素。

它会根据 控件类型 自动选取 正确的方法 来更新元素

 

二、computed 计算属性  

1、基础语法 

概念：基于现有的数据，计算出来的新属性。 依赖的数据变化，自动重新计算。

语法：

2、计算属性 vs 方法  

computed 计算属性：

作用：封装了一段对于数据的处理，求得一个结果。

语法：

① 写在 computed 配置项中

② 作为属性，直接使用 → this.计算属性 {{ 计算属性 }}

methods 方法：

作用 ：给实例提供一个方法，调用以处理业务逻辑。

语法：

① 写在 methods 配置项中

② 作为方法，需要调用 → this.方法名( ) {{ 方法名() }} @事件名="方法名"

 

三、watch 侦听器 

1、基础语法 

作用：监视数据变化，执行一些 业务逻辑 或 异步操作。

语法：

① 简单写法 → 简单类型数据，直接监视

② 完整写法 → 添加额外配置项

(1) deep: true 对复杂类型深度监视

(2) immediate: true 初始化立刻执行一次handler方法

  🎁结语： 

本次精彩内容已圆满结束！希望各位读者在阅读过程中能够收获满满。在此，特别感谢各位读者的支持与三连赞。如果文章中存在任何问题或不足之处，欢迎在评论区留言，大星必定会认真对待并加以改进，以便为大家呈现更优质的文章。你们的支持与鼓励，将是博主不断前进的最大动力。再次感谢大家的陪伴与支持！