网站建设套模板,中国十大设计院,咸阳网站建设费用,盘锦微商网站建设文章目录 Class绑定绑定对象绑定数组注意事项 style绑定绑定对象代码效果展示 绑定数组 侦听器注意的点代码效果 表单输入绑定示例代码效果展示 修饰符.lazy.number.trim 模板引用组件组成组件组成结构引入组件步骤style中的scoped作用 组件嵌套关系 Class绑定 绑定对象 绑定数… 文章目录 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划分为独立的、可重用的部分并且可以对每个部分进行单独的思考在实际应用中组件常常被组织成层层嵌套的树状结构
