Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
202007-React對戰雷台
Search
milkmidi
July 29, 2020
Technology
0
170
202007-React對戰雷台
202007 五倍紅寶石 Vue React對戰雷台
milkmidi
July 29, 2020
Tweet
Share
More Decks by milkmidi
See All by milkmidi
202403-WebComponent
milkmidi
0
160
WebComponent
milkmidi
1
3k
前端好朋友-tailwindcss
milkmidi
0
7.9k
202110-federation
milkmidi
0
140
Vue3一次就上手
milkmidi
0
6.3k
Other Decks in Technology
See All in Technology
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
110
Fediverse Discovery Providers overview
andypiper
0
170
DroidKaigi 2024 たすけて!ViewModel
mhidaka
5
940
Creative UIs with Compose: DroidKaigi 2024
chrishorner
1
580
とあるOSSを継続可能にするための取り組みについて / OSS Refactoring Process
bun913
1
210
eBPFのこれまでとこれから
yutarohayakawa
10
3.2k
なにもしてないのにNew Relicのデータ転送量が増えていたときに確認したこと
tk3fftk
2
230
React Aria で実現する次世代のアクセシビリティ
ryo_manba
4
1.2k
Developer Experienceを向上させる基盤づくりの取り組み事例集
coconala_engineer
0
150
JTCや セキュリティチェックリストが夢の跡
nikinusu
1
640
【株式会社ELYZA】|GENIAC成果報告会 自社開発モデルプレゼンテーション
elyza
1
270
タイミーのレコメンドにおける ABテストの運用
ozeshun
1
140
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
47
48k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Designing with Data
zakiwarfel
98
5k
What's in a price? How to price your products and services
michaelherold
242
11k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
How STYLIGHT went responsive
nonsquared
93
5.1k
For a Future-Friendly Web
brad_frost
174
9.3k
Building a Scalable Design System with Sketch
lauravandoore
459
32k
Bootstrapping a Software Product
garrettdimon
PRO
304
110k
How to train your dragon (web standard)
notwaldorf
85
5.6k
Adopting Sorbet at Scale
ufuk
73
8.9k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
Transcript
None
None
None
None
None
None
None
None
None
None
None
None
None
None
App.vue <template> <div id="app"> <input type="text" v-model="name"> <button @click="atClickHandler($event)">Click</button> <MyComponent
foo.sync="foo" /> </div> </template>
None
App.vue <script> export default { name: 'iDontlikeCodeReviewVue', props: { lists:
{ type: Array } }, }; </script> <template> <div id="app"> <template v-if="lists?.length > 0"> <section v-for="o in lists"> <ul v-if="o.active"> <li v-for="o2 in lists.books"> <h1 v-if="o2.tag === ‘h1’">hi</h1> <a>{{o2.name}}</a> </li> </ul> </section> </template> </div> </template> App.jsx var InnerSection = (props) => { var { books, active } = props; if (!active) { return null; } return ( <ul> { books.map((item) => (<li><a>{item.name}</a></li>)) } </ul> ) } const IloveReact = (props)=> { var { lists } = props; if (lists?.length === 0) { return null; } return ( <div> { lists.map((list) => <InnerSection {...list} />) } </div> ) }
None
type BookType = { name: string; } type ListType =
{ active: boolean; books: BookType[]; } var InnerSection = (props:ListType) => { var { books, active } = props; if (!active) { return null; } return ( <ul> { books.map((item:BookType) => (<li><a>{item.name}</></li>)) } </ul> ) } interface Props { lists: ListType[] } const IloveReact = (props:Props)=> { var { lists } = props; if (lists?.length === 0) { return null; } return ( <div> { lists.map((list:ListType) => <InnerSection {...list} />) } </div> ) } typescript, flowjs
App.vue <script> export default { // // ... // methods:{
foo(){ // name data ? // porps ? this.name; // methods ? // vuex ? this.maybeCallFromVuex(‘ ?’); } } }; </script> App.jsx interface Props { onCallParent: (name:string)=> void; } interface State { name: string; } class LoveReact extends React.Component<Props, State> { componentDidMount(){ this.props.onCallParent(this.state.name); } }
App.vue <template lang="pug"> .row .col-xs-12.center ul.pagination li(v-bind:class="page<=1 ? 'disabled': ''")
template(v-if="page>1") a(href='' @click.prevent='prevPage') Previous template(v-else) a Previous template(v-for='(item, index) in pagenations’) li(v-bind:class="page===item ? 'active': ‘’” v-bind:key="item+'_'+Math.floor(Math.random()*9527)") a(href='' @click.prevent='gotoPage(item)’ v-bind:key="item+'_'+Math.floor(Math.random()*9527)") {{item}} li(v-bind:class="page>=totalpage ? 'disabled': ‘’”) template(v-if="page<totalpage") a(href='' @click.prevent='nextPage') Next template(v-else) a Next </template>
None
None
None
None
None
None
None
None
None
None
None