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
180
202007-React對戰雷台
202007 五倍紅寶石 Vue React對戰雷台
milkmidi
July 29, 2020
Tweet
Share
More Decks by milkmidi
See All by milkmidi
202403-WebComponent
milkmidi
0
180
WebComponent
milkmidi
1
3.1k
前端好朋友-tailwindcss
milkmidi
0
8.4k
202110-federation
milkmidi
0
150
Vue3一次就上手
milkmidi
0
6.3k
Other Decks in Technology
See All in Technology
能登半島地震において デジタルができたこと・できなかったこと
ditccsugii
0
140
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
440
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
440
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
4
800
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
210
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.3k
そのWAFのブロック、どう活かす? サービスを守るための実践的多層防御と思考法 / WAF blocks defense decision
kaminashi
0
190
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
320
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
320
CoRL 2025 Survey
harukiabe
0
170
自動テストのコストと向き合ってみた
qa
1
220
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Unsuck your backbone
ammeep
671
58k
Designing for humans not robots
tammielis
254
26k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
4 Signs Your Business is Dying
shpigford
185
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
KATA
mclloyd
32
15k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
A better future with KSS
kneath
239
18k
Docker and Python
trallard
46
3.6k
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