资料完整day03_vue01-基础语法3.ppt

具名插槽用法 要点提示 掌握程度：应用 1.14-具名插槽用法 视 具名插槽用法 总 练 具名插槽和匿名插槽的区别 具名插槽有名字 匿名插槽没有名字 具名插槽用法 具有名字的插槽 使用 slot 中的 name 属性绑定元素 通过slot属性来指定, 这个slot的值必须和下面slot组件得name值对应上 如果没有匹配到 则放到匿名的插槽中 1.14-具名插槽用法 课堂问答 知识总结 总 作用域插槽 要点提示 掌握程度：应用 1.15-作用域插槽用法 视 作用域插槽用法 总 作用域插槽使用场景 父组件对子组件加工处理 既可以复用子组件的slot，又可以使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-购物车案例-实现列表组件更新商品功能-下 视 购物车案例-实现列表组件更新商品功能-下 总 更新功能思路 子组件通过一个标识符来标记对用的用户点击 + - 或者输入框输入的内容 父组件拿到标识符更新对应的组件 1.21-购物车案例-实现列表组件更新商品功能-下 课堂问答 知识总结 总 今日复习 什么是组件 全局组件和局部组件怎么定义 组件之间传值 组件插槽使用场景 插槽的使用 为什么子组件中不推荐操作父组件的数据 Vue第03天-今日复习 Vue03-基础语法 组件化 组件化规范 要点提示 掌握程度：掌握 1.1-组件化开发概述 视 组件化开发概述 总 组件化规范 1.1-组件化开发概述 课堂问答 知识总结 总 组件的使用 要点提示 掌握程度：掌握 1.2-组件基本使用 视 表单基本操作 总 如何全局注册组件 Vponent(组件名称, { }) 1.2-组件基本使用 课堂问答 知识总结 总 要点提示 掌握程度：应用 1.3-组件注册注意事项-上 视 组件注册注意事项 总 组件注意事项 组件data值注意事项 组件注意事项 组件参数的data值必须是函数同时这个函数要求返回一个对象 组件模板必须是单个根元素 组件模板的内容可以是模板字符串 1.3-组件注册注意事项 课堂问答 课堂问答 总 组件命名注意 要点提示 掌握程度：应用 1.4-组件注册注意事项-下 视 -组件注册注意事项-下 总 组件命名有什么规定 短横线 驼峰命名 1.4-组件注册注意事项-下 课堂问答