也就是说，布局和样式效果本身是必须要提前写成 vue 组件的，然后 vue 加载时渲染成 VDOM，再然后就是我们通过 vue 的规范在 js 代码中去控制 VDOM。
就你上面这个效果而言，实现思路是这样：
1，左右宽度自适应效果这个以前一般是使用 流式布局 或者定位加 margin 的方式实现，现在一般使用 flex 布局实现，具体你可以搜索 “两栏自适应布局”，这个属于 HTML + CSS 基础，与 vue 本身关系不大，你需要先把这个布局写好。
2，左边小三角的折叠、展开效果是通过两个不同状态的效果来实现的，一个展开状态，一个折叠状态。通常的做法是默认为折叠状态，样式通过标签选择器直接添加在默认样式上，然后再写一个展开状态的class样式，当给小三角标签添加这个class时为展开效果，移除class时为折叠效果。这个在 vue 中直接 在 data 中添加一个状态属性就可以实现，比如在 data 中添加一个属性为 isOpen 的布尔值，当值为true时表示展开状态，为 false 时为折叠状态。在vue的html模板中就可以这样写：（假设小三角是通过 span 标签实现的）<span :class="{"active": isOpen}">，当然也可以直接用三目的方式赋值，方法有多种。
3，右边的内容切换使用的是 v-if 指令，原理是通过索引与左边的选项进行关联，然后通过索引来判断显示哪一部分内容。
vue 的实现原理跟原生 js 是一样的，只是原生是直接操作页面元素，vue 是操作的 VDOM。
参考iview， ant-design 的栅格组件，发现两者的基础思路是一致的。这里通过实现一个简化版的栅格组件做总结.
栅格组件，可以看成对横向宽度的分割。
例如：实现左右平分布局
实现栅格组件的基本思路与二等分基本一致，既是根据 Col组件不同的 span 值，动态的切换对应的等分样式, 所以重点在 css配置 及如何 切换
这里基础布局会借用flex, css使用less编写，组件样式使用前缀做区分。
这里我们希望通过设置 Col 的 span 属性分配列组件所占比例,
占满一行 span=24.
iview ant-design 使用的后者, 猜想原因: 一方面是对性能的考虑，另一方面从实际使用上，24切分基本满足大多数情况.
现在我们需要根据 span 或 响应配置 动态的设置 Col 的类名，以对应到不同的css样式上.
1.HTML知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签
2.CSS+布局
知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局、移动端适配、网页动画、CSS3新特性、Less预处理器
3.ECMA基础
知识要点：ECMA基本语法、数据类型、运算符、分支结构、循环结构、函数、常见内置对象的属性和方法、Array、Math、Date、String
4.DOM
知识要点：DOM模型、节点类型、节点的基本操作、JS操作样式表、克隆节点、获取坐标位置、获取元素尺寸、节点的各种属性和方法。
5.BOM+jQuery
知识要点：History、Location、Navigate、定时器、线程、事件循环、web工作原理、性能优化、事件对象、正则表达式、jQuery框架
6.vue框架基本语法
知识要点：vue基本语法、双向绑定、组件传值、条件渲染、列表渲染、事件处理、表单绑定、自定义事件、插槽、过渡、动画、动态路由、嵌套路由、编程式导航、导航守卫、路由懒加载、脚手架、生命周期、vuex、axios、ts、vue3
7.vue案例
知识要点：将知识点融会贯通到案例中。
8.react基本语法
知识要点：react简介、jsx语法、元素渲染、组件和props、state、生命周期、表单、条件渲染、组合继承、hooks、性能优化、redux
9.react案例
知识要点：将知识点融会贯通到案例中
新增内容：微信小程序及uni-app框架
知识要点：
小程序框架（配置/程序与页面注册/路由），开发者工具
小程序框架组件学习（基础/视图/表单/地图/媒体/导航/开发能力）
小程序框架组件学习（地图/媒体/导航/开发能力）
小程序API（基础/路由/界面/网络/数据缓存/位置服务）
小程序API（设备/媒体/开放接口/授权/登录/支付）
10.Node服务器与数据库及框架
Node原生模块、跨域、安全校验、数据加密、数据库基本操作、express框架、koa框架
11.Node 项目周/WebPack
