十:Vue基础(看视频)
Vue基础(看视频)
库库好困
向各位大佬们致敬
展开
-
Vue基础第三天Vue组件化开发案例:购物车
基于组件的案例:购物车 需求分析: 1. 按照组件化方式实现业务需求 根据业务功能进行组件化划分 ① 标题组件(展示文本) ② 列表组件(列表展示、商品数量变更、商品删除) ③ 结算组件(计算商品总额) 2. 功能实现步骤 实现整体布局和样式效果 划分独立的功能组件 组合所有的子组件形成整体结构 逐个实现各个组件功能 标题组件 列表组件 结算组件 实现代码 1.组件化布局 <style type="text/css"> .container .cart {原创 2020-05-18 16:41:06 · 561 阅读 · 0 评论 -
Vue基础第三天知识点以及知识点代码:Vue组件化开发
目标 能够知道组件化开发思想 能够知道组件的注册方式 能够说出组件间的数据交互方式 能够说出组件插槽的用法 能够说出Vue调试工具的用法 能够基于组件的方式实现业务功能 1. 组件化开发思想 1.1 现实中的组件化思想体现 1.2 编程中的组件化思想体现 1.3 组件化规范: Web Components 我们希望尽可能多的重用代码 自定义组件的方式不太容易(html、css和js) 多次使用组件可能导致冲突 官网:https://developer.mozilla.org/zh-CN/docs原创 2020-05-18 16:40:55 · 281 阅读 · 0 评论 -
Vue基础第二天案例
表单操作案例-提交个人信息 <style> form div { height: 40px; line-height: 40px; } form div:nth-child(4) { height: auto; } form div span:first-child { display: inline-block;原创 2020-05-17 17:44:19 · 238 阅读 · 0 评论 -
Vue基础第二天知识点以及知识点代码:Vue常用特性
1.Vue常用特性 1.1 常用特性概览 表单操作 自定义指令 计算属性 侦听器 过滤器 生命周期 1.2 表单操作 1. 基于Vue的表单操作 Input 单行文本 textarea 多行文本 select 下拉多选 radio 单选框 checkbox 多选框 表单操作案例-提交个人信息 <style> form div { height: 40px; line-height: 40px; }原创 2020-05-17 17:44:06 · 266 阅读 · 0 评论 -
Vue基础第一天案例
综合案例:Tab选项卡 实现步骤: 1. 实现静态UI效果 用传统的方式实现标签结构和样式 2. 基于数据重构UI效果 将静态的结构和样式重构为基于Vue模板语法的形式 处理事件绑定和js控制逻辑 3. 声明式编程 模板的结构和最终显示的效果基本一致 <style type="text/css"> .tab ul { overflow: hidden; padding: 0; margin: 0; }原创 2020-05-16 20:07:32 · 205 阅读 · 0 评论 -
Vue基础第一天理论、知识点以及知识点代码
1. Vue概述 点击这里快速进入官网 2. Vue基本使用 2.1 传统开发模式对比 原生JS: <div id="msg"></div> <script type="text/javascript"> var msg = 'Hello World'; var div = document.getElementById('msg'); div.innerHTML = msg; </script> jQuery: <div id="msg"&原创 2020-05-16 20:07:11 · 264 阅读 · 0 评论