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

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划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考，在实际应用中，组件常常被组织成层层嵌套的树状结构