十:Vue基础(看视频)
Vue基础(看视频)
库库好困
向各位大佬们致敬
展开
-
Vue基础第三天Vue组件化开发案例:购物车
基于组件的案例:购物车需求分析:1. 按照组件化方式实现业务需求根据业务功能进行组件化划分① 标题组件(展示文本)② 列表组件(列表展示、商品数量变更、商品删除)③ 结算组件(计算商品总额)2. 功能实现步骤实现整体布局和样式效果划分独立的功能组件组合所有的子组件形成整体结构逐个实现各个组件功能标题组件列表组件结算组件实现代码1.组件化布局 <style type="text/css"> .container .cart {原创 2020-05-18 16:41:06 · 550 阅读 · 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 · 277 阅读 · 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 · 228 阅读 · 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 · 258 阅读 · 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 · 198 阅读 · 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 · 255 阅读 · 0 评论