文章目录
- Class绑定
- 绑定对象
- 绑定数组
- 注意事项
- style绑定
- 绑定对象
- 代码
- 效果展示
- 绑定数组
- 侦听器
- 注意的点
- 代码
- 效果
- 表单输入绑定
- 示例
- 代码
- 效果展示
- 修饰符
- .lazy
- .number
- .trim
- 模板引用
- 组件组成
- 组件组成结构
- 引入组件步骤
- style中的scoped作用
- 组件嵌套关系
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)
组件组成结构
引入组件步骤
- 引入组件
- 注入组件
- 显示组件
style中的scoped作用
- 让当前样式只在当前组件中生效
- 限制作用域
组件嵌套关系
- 组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考，在实际应用中，组件常常被组织成层层嵌套的树状结构
