Vue.js のサンプルを Web Components で実装する

1. このページの目的

vue.js の学習001 と Vue コンポーネントの基本 を Web Components で実装する。

Web標準仕様でどこまでできるか？

2. デモ

app

innerHTML or textContent を使えばよい。

app-2

title属性を使えばよい。

app-3

HTML

<app-3></app-3>

<script type="module">
  import App3 from './app3.js';
  window.customElements.define('app-3', App3);
</script>

JavaScript

実行結果

app-4

HTML

<app-4></app-4>

<script type="module">
  import App4 from './app4.js';
  window.customElements.define('app-4', App4);
</script>

JavaScript

実行結果

app-5

HTML

<app-5></app-5>

<script type="module">
  import App5 from './app5.js';
  window.customElements.define('app-5', App5);
</script>

JavaScript

実行結果

app-6

HTML

<app-6></app-6>

<script type="module">
  import App6 from './app6.js';
  window.customElements.define('app-6', App6);
</script>

JavaScript

実行結果

app-7

少し面倒そうなのでとばす。

app-8

Vue.js の Computed Properties という機能だが、さすがに Web Components にこれはない。

Vue コンポーネントの基本

HTML

<button is="button-counter"></button>
<button is="button-counter" count="5"></button>
<button is="button-counter" count="10"></button>

<script type="module">
  import ButtonCounter from './button-counter.js';
  window.customElements.define('button-counter', ButtonCounter, {extends: 'button'});
</script>

JavaScript

実行結果

3. メモ

4. 参考