More Related Content
Similar to Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版> (20)
Ma_gician (世界中のフロントエンダーの残業時間を減らす、新しいフロントエンドフレームワーク)<詳細版>
- 9. Vue.js の実装を Ma_gician で書き替え
1. new Vue が書かれている <script> を削除
2. ライブラリの読み込みを vue から ma_gician に変更
3. <div id="component"> の > の直前に :: を追加
* Lightning Talk では、ここでライブコーディングします
- 18. Ma_gician の
コントローラ
<main>
<section x-state="{ aaa: 1, bbb: 2 }" ::>
<div>A1 = {{ aaa }}</div>
<div>B1 = {{ bbb }}</div>
</section>
<section x-state="{ aaa: 11, bbb: 22 }" ::>
<div>A2 = {{ aaa }}</div>
<div>B2 = {{ bbb }}</div>
</section>
</main>
- 20. Ma_gician の
コントローラの
ネスト
<main x-state="{
aaa: 111,
xxx: { aaa: 1000 }
}" ::>
<section>
<div>A1 = {{ aaa }}</div>
</section>
<section x-namespace="xxx" ::>
<div>A2 = {{ aaa }}</div>
</section>
</main>
親子コントローラは
状態を名前空間で
連結できる。
- 23. Ma_gician の computed
● コントローラ要素に computed を一括定義できる。
● 子要素にも computed を定義できる。
● 子要素の computed は、その要素の子要素だけに適用される。
- 24. Vue.js の
computed
<div id="controller">
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
<script>
new Vue({
el: '#controller,
data: { a: 1, b: 2 },
computed: {
add: function () { return this.a + this.b },
sub: function () { return this.a - this.b }
}
})
</script>
Vue インスタンスで
computed を一括定義
- 25. Ma_gician の
computed
<div x-state="{ a: 1, b: 2 }"
x-computed="{
get add () { return this.a + this.b },
get sub () { return this.a - this.b }
}"
::>
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
:: を付与した要素に
computed を一括定義
- 26. Ma_gician の
Nested computed
<div x-state="{ a: 1, b: 2 }" ::>
<div x-computed="{
get add () { return this.a + this.b }
}">
<div x-computed="{
get sub () { return this.a - this.b }
}">
<p>{{ a }} + {{ b }} = {{ add }}</p>
<p>{{ a }} - {{ b }} = {{ sub }}</p>
</div>
</div>
</div>
子要素にも computed を
定義できる