完善无渲染组件的文档

Author: zepang

docs/posts/tutorial/5.md

@@ -4,7 +4,7 @@
 
 ##### 组件一
 
-<p class="codepen" data-height="265" data-theme-id="0" data-default-tab="result" data-user="uncleze2017" data-slug-hash="EBgryO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="input-tag-list">
+<p class="codepen" data-height="320px" data-theme-id="0" data-default-tab="result" data-user="uncleze2017" data-slug-hash="EBgryO" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="input-tag-list">
   <span>See the Pen <a href="https://codepen.io/uncleze2017/pen/EBgryO/">
   input-tag-list</a> by uncleze (<a href="https://codepen.io/uncleze2017">@uncleze2017</a>)
   on <a href="https://codepen.io">CodePen</a>.</span>
@@ -17,7 +17,7 @@
 
 ##### 组件二
 
-<iframe height="265" style="width: 100%;" scrolling="no" title="input-tag" src="//codepen.io/uncleze2017/embed/xNQrZo/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+<iframe height="320px" style="width: 100%;" scrolling="no" title="input-tag" src="//codepen.io/uncleze2017/embed/xNQrZo/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
   See the Pen <a href='https://codepen.io/uncleze2017/pen/xNQrZo/'>input-tag</a> by uncleze
   (<a href='https://codepen.io/uncleze2017'>@uncleze2017</a>) on <a href='https://codepen.io'>CodePen</a>.
 </iframe>
@@ -33,4 +33,31 @@
 
 关于作用域插槽，我在之前的内容中有提到，Vue中的slot源于Web Components规范草案，也被称之为插槽。你可以认为插槽就是一个占位空壳子，插槽显示的内容由子组件自身决定，slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块。
 
+<iframe height="480px" style="width: 100%;" scrolling="no" title="message-box" src="//codepen.io/uncleze2017/embed/vqyEmV/?height=265&theme-id=0&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
+  See the Pen <a href='https://codepen.io/uncleze2017/pen/vqyEmV/'>message-box</a> by uncleze
+  (<a href='https://codepen.io/uncleze2017'>@uncleze2017</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+
+```html
+<div id="app"> 
+  <div class="box">
+    <alert></alert> 
+  </div>
+  <div class="box">
+    <alert>这里消息盒子内容 !!!</alert>
+  </div>
+  <div class="box">
+    <alert>
+      <a href="https://www.baidu.com">https://www.baidu.com</a>
+    </alert>
+  </div>
+</div> 
+
+<script type="text/x-template" id="message">
+  <div class="message" :class="messageClasses"> 
+    <a class="close">&times;</a> 
+    <slot>This is message box!!!</slot>  
+  </div> 
+</script>
+````