自学内容网 自学内容网
自学内容网 > 正文

Vue学习笔记 Class绑定 Style绑定 侦听器 表单输入绑定 模板引用 组件组成 组件嵌套关系

🕗 发布于 2024-10-20 09:44 vue.js  学习  笔记  前端  

文章目录

Class绑定

在这里插入图片描述

绑定对象

在这里插入图片描述

绑定数组

在这里插入图片描述

注意事项

  • 数组和对象嵌套过程中，只能是数组嵌套对象，不能是对象嵌套数组。

style绑定

绑定对象

代码

在这里插入图片描述

效果展示

在这里插入图片描述

绑定数组

在这里插入图片描述

侦听器

  • 侦听页面的数据变化

注意的点

  • watch中的方法名要与所侦听数据的名字一致

  • 例如在下面的实例中data中为message，那么watch中的方法名也要为message

代码

在这里插入图片描述

效果

  • 点击修改数据按钮后打印新数据和旧数据
    在这里插入图片描述

表单输入绑定

  • 在前端处理表单时，我们常常需要将表单输入框的内容同步给JavaScript中相应的变量，手动连接值绑定和更改事件监听器可能会很麻烦，v-model指令帮我们简化了这一步骤。

示例

代码

在这里插入图片描述

效果展示
  • 实时获取表单中用户的输入内容

在这里插入图片描述

修饰符

  • v-model也提供了修饰符，.lazy .number .trim
.lazy
  • 默认情况下，v-model会在每次input事件后更新数据，你可以添加lazy修饰符来改为在每次change事件后更新数据
.number
  • 只接收数字类型
.trim
  • 去掉前后空格

模板引用

  • 内容改变：{{模板语法}}
  • 属性改变：v-bind：指令
  • 事件：v-on:click等等

在这里插入图片描述

组件组成

  • 组件最大的优势就是可复用性
  • 当使用构建步骤时，我们一般会将Vue组件定义在一个单独的.vue文件中，这被叫做单文件组件(简称为SFC)

组件组成结构

在这里插入图片描述

引入组件步骤

  1. 引入组件
  2. 注入组件
  3. 显示组件
    在这里插入图片描述

style中的scoped作用

  • 让当前样式只在当前组件中生效
  • 限制作用域

组件嵌套关系

  • 组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考，在实际应用中，组件常常被组织成层层嵌套的树状结构
    在这里插入图片描述

原文地址：https://blog.csdn.net/samroom/article/details/143086420

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024