Recommended
Recommended
More Related Content
Featured
Featured (20)
Vue.jsコンポーネントのススメ
- 10. スライダーコンポーネント.vue カレンダーコンポーネント.vue スタイル スタイル ロジック ロジック テンプレート テンプレート VUEコンポーネントの垂直統合
- 11. いまいちピンとこない 大丈夫！
- 12. <style scoped> :scope { min-height: 80px; height: 100%; width: 100%; display: table; position: relative; background-repeat: no-repeat; background-size : cover; background-position: center center; } …… </style> <template> <div class="fit-image" :style="innerStyle"> <div class="content" :class="valign"> <slot></slot> </div> </div> </template> <script type="text/ecmascript-6" lang="babel"> export default { props :["src", "valign"], computed : { innerStyle : function(){ return { "background-image" : 'url(' + this.s } } } } </script> これ！
- 13. <body> <fit-image src="画像パス" >caption</fit-image> </body> <script src=“vue.min.js”></script> <script src=“content.js”></script> したらコレで配置
- 14. つまり
- 15. クソコードが １ファイルに！
- 16. クソの局所化が できる！
- 18. できる！
- 22. どうするか
- 24. <body> <fit-image src="画像パス" >caption</fit-image> </body> <script src=“vue.min.js”></script> <script src=“content.js”></script> ココに注目
- 25. <template> <div class="fit-image" :style="innerStyle"> <div class="content" :class="valign"> <slot></slot> </div> </div> </template> ココに差し込まれるのです！
- 26. <body> <div class="fit-image"> <div class="content" > caption </div> </div> </body> <script src=“vue.min.js”></script> <script src=“content.js”></script> jsでパースされると こうなる
- 27. というわけこんなん もできる
- 28. <body> <fit-image src="画像パス" > <h1>見出し</h1> </fit-image> </body> <script src=“vue.min.js”></script> <script src=“content.js”></script> これでSEOも、 インタラクションもバッチリ!
- 30. 最後に