day03 day03_Vue01-基础语法3

Vue03 基础语法 组件化组件化规范 要点提示 掌握程度 掌握 1 1 组件化开发概述 组件化开发概述 组件化规范 1 1 组件化开发概述 课堂问答 知识总结 组件的使用 要点提示 掌握程度 掌握 1 2 组件基本使用 表单基本操作 如何全局注册组件Vponent 组件名称 1 2 组件基本使用 课堂问答 知识总结 要点提示 掌握程度 应用 1 3 组件注册注意事项 上 组件注册注意事项 组件注意事项组件data值注意事项 组件注意事项组件参数的data值必须是函数同时这个函数要求返回一个对象组件模板必须是单个根元素组件模板的内容可以是模板字符串 1 3 组件注册注意事项 课堂问答 课堂问答 组件命名注意 要点提示 掌握程度 应用 1 4 组件注册注意事项 下 组件注册注意事项 下 组件命名有什么规定短横线驼峰命名 1 4 组件注册注意事项 下 课堂问答 知识总结 局部组件 要点提示 掌握程度 应用 1 5 局部组件注册方式 局部组件注册方式 如何定义局部组件在Vue中通过components注意全局的不带s局部的带s 1 5 局部组件注册方式 课堂问答 知识总结 调试工具安装 要点提示 掌握程度 应用 1 6 Vue调试工具安装与使用 Vue调试工具安装与使用 Vue调试工具的安装 1 6 Vue调试工具安装与使用 课堂问答 知识总结 父组件向子组件传值 要点提示 掌握程度 应用 1 7 父组件向子组件传值 基本用法 自定义局部指令用法 父组件如何向子组件传值父组件发送的形式是以属性的形式绑定值到子组件身上 然后子组件用属性props接收 1 7 父组件向子组件传值 基本用法 课堂问答 知识总结 属性名称 要点提示 掌握程度 应用 1 8 父组件向子组件传值 props属性命名规则 父组件向子组件传值 props属性命名规则 属性名称规则在props中使用驼峰形式 模板中需要使用短横线的形式字符串形式的模板中没有这个限制 1 8 父组件向子组件传值 props属性命名规则 课堂问答 知识总结 属性值得类型 要点提示 掌握程度 应用 1 9 父组件向子组件传值 props属性值类型 父组件向子组件传值 props属性值类型 父组件向子组件传值 props属性值类型可以传递静态值也可以传递动态值动态值可以是字符串数字布尔值数组对象 1 9 父组件向子组件传值 props属性值类型 课堂问答 知识总结 子向父传递数据 要点提示 掌握程度 应用 1 10 子组件向父组件传值 基本用法 子组件向父组件传值 基本用法 字组件如何向父组件传递数据子组件用 emit 触发事件 emit 第一个参数为自定义的事件名称第二个参数为需要传递的数据父组件通过事件监听监听子组件传递过来的数据 1 10 子组件向父组件传值 基本用法 课堂问答 知识总结 子组件向父组件传递参数参数的接收 要点提示 掌握程度 应用 1 11 子组件向父组件传值 携带参数 子组件向父组件传值 携带参数 如何传递参数 emit 第一个参数为自定义的事件名称第二个参数为需要传递的数据 1 11 子组件向父组件传值 携带参数 课堂问答 知识总结 兄弟组件之间的通讯 要点提示 掌握程度 应用 1 12 兄弟组件之间数据交互 兄弟组件之间数据交互 1 12 兄弟组件之间数据交互 课堂问答 知识总结 兄弟之间如何通讯兄弟之间传递数据需要借助于事件中心 通过事件中心传递数据提供事件中心varhub newVue 传递数据方 通过一个事件触发hub emit 方法名 传递的数据 接收数据方 通过mounted 钩子中触发hub on 方法名销毁事件通过hub off 方法名销毁之后无法进行传递数据 上午复习 什么是组件 全局组件和局部组件怎么定义 父组件向子组件传值 子组件向父组件传值 兄弟之间的传递 Vue 基础语法03天上午复习 插槽的使用 要点提示 掌握程度 应用 1 13 组件插槽基本用法 组件插槽基本用法 插槽的作用组件的最大特性就是复用性 而用好插槽能大大提高组件的可复用能力插槽的使用提供一个插槽的位置插槽的内容 1 13 组件插槽基本用法 课堂问答 知识总结 具名插槽用法 要点提示 掌握程度 应用 1 14 具名插槽用法 具名插槽用法 练 具名插槽和匿名插槽的区别具名插槽有名字匿名插槽没有名字具名插槽用法具有名字的插槽使用中的 name 属性绑定元素通过slot属性来指定 这个slot的值必须和下面slot组件得name值对应上如果没有匹配到则放到匿名的插槽中 1 14 具名插槽用法 课堂问答 知识总结 作用域插槽 要点提示 掌握程度 应用 1 15 作用域插槽用法 作用域插槽用法 作用域插槽使用场景父组件对子组件加工处理既可以复用子组件的slot 又可以使slot内容不一致作用域插槽的使用子组件模板中 元素上有一个类似props传递数据给组件的写法msg xxx插槽可以提供一个默认内容 如果如果父组件没有为这个插槽提供了内容 会显示默认的内容 如果父组件为这个插槽提供了内容 则默认的内容会被替换掉 1 15 作用域插槽用法 课堂问答 知识总结 组件化的方式实现业务功能 要点提示 掌握程度 应用 1 16 功能概述 功能概述 1 16 功能概述 课堂问答 知识总结 我们根据什么化分组件根据每个业务功能化分组件 组件注册 要点提示 掌握程度 应用 1 17 购物车案例 实现组件化布局 购物车案例 实现组件化布局 如何把静态页面实现组件化定义组件把静态页面转换成组件化模式把组件渲染到页面上 1 17 购物车案例 实现组件化布局 课堂问答 知识总结 组件传值计算属性 要点提示 掌握程度 应用 1 18 购物车案例 实现标题和结算组件功能 购物车案例 实现标题和结算组件功能 标题组件实现动态渲染从父组件把标题数据传递过来即父向子组件传值把传递过来的数据渲染到页面上结算功能组件从父组件把商品列表list数据传递过来即父向子组件传值把传递过来的数据计算最终价格渲染到页面上 1 18 购物车案例 实现标题和结算组件功能 课堂问答 知识总结 数据渲染 属性绑定 事件注册组件传值 要点提示 掌握程度 应用 1 19 购物车案例 实现列表组件删除商品功能 购物车案例 实现列表组件删除商品功能 如何实现删除功能的从父组件把商品列表list数据传递过来即父向子组件传值把传递过来的数据渲染到页面上点击删除按钮的时候删除对应的数据 1 19 购物车案例 实现列表组件删除商品功能 课堂问答 知识总结 组件传值常用事件 要点提示 掌握程度 应用 1 20 购物车案例 实现列表组件更新商品功能 购物车案例 实现列表组件更新商品功能 组件更新商品功能将输入框中的默认数据动态渲染出来输入框失去焦点的时候更改商品的数量子组件中不推荐操作数据把这些数据传递给父组件让父组件处理这些数据父组件中接收子组件传递过来的数据并处理 1 20 购物车案例 实现列表组件更新商品功能 课堂问答 知识总结 分支结构v if和v show 要点提示 掌握程度 应用 1 21 购物车案例 实现列表组件更新商品功能 下 购物车案例 实现列表组件更新商品功能 下 更新功能思