推荐阅读原文 学习笔记：Vue 实例
Vue 实例
组件间通信
<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”wjXLMa” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 组件间通信 ” class=”codepen”>See the Pen 组件间通信 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
用户信息表
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”zjagOy” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”zjagOy” class=”codepen”>See the Pen zjagOy by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
图书电商数据
<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”zjaVWL” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 图书电商数据 ” class=”codepen”>See the Pen 图书电商数据 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
渲染微信精选数据
<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”WJyqmO” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 渲染微信精选数据 ” class=”codepen”>See the Pen 渲染微信精选数据 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
图书管理系统
<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”NMzQjy” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 图书管理系统 ” class=”codepen”>See the Pen 图书管理系统 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
模态窗口 - 课程表
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”KReORr” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 模态窗口 - 课程表 ” class=”codepen”>See the Pen 模态窗口 - 课程表 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
filterBy 过滤器
<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”MGXNdM” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”filterBy 过滤器 ” class=”codepen”>See the Pen filterBy 过滤器 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
更新信息表
<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”odMvNZ” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 更新信息表 ” class=”codepen”>See the Pen 更新信息表 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
猜数字游戏
<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”dejyNw” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 猜数字游戏 ” class=”codepen”>See the Pen 猜数字游戏 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
弹窗组件
<p data-height=”465″ data-theme-id=”0″ data-slug-hash=”MGBWEE” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 弹窗组件 ” class=”codepen”>See the Pen 弹窗组件 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
菜单组件
<p data-height=”365″ data-theme-id=”0″ data-slug-hash=”mLjdLd” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 菜单组件 ” class=”codepen”>See the Pen 菜单组件 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
网格组件
<p data-height=”325″ data-theme-id=”0″ data-slug-hash=”QrBwba” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 网格组件 ” class=”codepen”>See the Pen 网格组件 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
树形视图
<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”aGjzdr” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 树形视图 ” class=”codepen”>See the Pen 树形视图 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
可伸缩性的 Header
<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”qYyErB” data-default-tab=”html,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 可伸缩性的 Header” class=”codepen”>See the Pen 可伸缩性的 Header by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
内嵌组件
<p data-height=”265″ data-theme-id=”0″ data-slug-hash=”QrBwgr” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 内嵌组件 ” class=”codepen”>See the Pen 内嵌组件 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
SVG 图表
<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”JvBoOo” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=”SVG 图表 ” class=”codepen”>See the Pen SVG 图表 by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>
实时 deepstreamHub
<p data-height=”565″ data-theme-id=”0″ data-slug-hash=”dejPJM” data-default-tab=”js,result” data-user=”whjin” data-embed-version=”2″ data-pen-title=” 实时 deepstreamHub” class=”codepen”>See the Pen 实时 deepstreamHub by whjin (@whjin) on CodePen.</p><script async src=”https://static.codepen.io/ass…;></script>