推薦閱讀原文 學習筆記：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>