VueではじめるWeb Components

Transcript

1. Vue Web components ではじめる
2. 自己紹介 高橋翔太 hitsuji-haneta thinkShake製作所 代表 LasTrust株式会社 CTO h1tsuj1_haneta
3. 突然ですが皆さん
4. ってご存知ですか？？ Web components
5. ライブラリなしで HTMLコンポーネント をカスタムできる ブラウザでサポート
6. Custom Elements Shadow DOM HTML Template
7. 例 const template = document.createElement('template'); template.innerHTML = ` <style>…</style> <div>…</div> `; class Button extends HTMLElement { constructor() { … this.$button .addEventListener('click', () => { console.log(this.message); }); } … } window .customElements .define(‘my-button', Button); my-button.js <script type=“module" src=“./my-button.js”> </script> <div> <h1>hello</h1> <my-button label=“hello” message=“world"> </my-button> </div> hoge.html
8. 動かしてみると
9. vueの勉強会 なんですけど？
10. ૬ੑൈ܈ʂ
11. メリット MyButton
12. メリット MyButton どんなフレームワークでも 使えちゃう
13. なぜ調べたか？ BCライブラリ群 UI シンプルに使いたい…
14. <template> <div id="app"> <my-button label="hello" message=“world"/> </div> </template> <script> import ‘./components/my-button’; export default { ... }; </script> <style> ... </style> hoge.vue
15. ͪΐʔ؆୯
16. $ vue-cli-service build --target wc —-name my- button ./MyButton.vue <script src=“https://unpkg.com/vue"></script> <script type=“module src=“./dist/my-button.js”> </script> <div> <h1>hello</h1> <my-button label=“hello” message=“world"> </my-button> </div> hoge.html
17. Vue Web components で はじめてみませんか？
18. ありがとうございました