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.3k
202110-federation
milkmidi
0
150
Vue3一次就上手
milkmidi
0
6.3k
Other Decks in Technology
See All in Technology
マルチプロダクト×マルチテナントを支えるモジュラモノリスを中心としたアソビューのアーキテクチャ
disc99
1
380
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
200
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
670
마라톤 끝의 단거리 스퍼트: 2025년의 AI
inureyes
PRO
1
710
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
120
プロダクトエンジニアリングで開発の楽しさを拡張する話
barometrica
0
100
Rubyの国のPerlMonger
anatofuz
3
730
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
910
Jamf Connect ZTNAとMDMで実現! 金融ベンチャーにおける「デバイストラスト」実例と軌跡 / Kyash Device Trust
rela1470
0
170
ビジネス文書に特化した基盤モデル開発 / SaaSxML_Session_2
sansan_randd
0
280
o11yツールを乗り換えた話
tak0x00
2
520
Google Cloud で学ぶデータエンジニアリング入門 2025年版 #GoogleCloudNext / 20250805
kazaneya
PRO
18
4.2k
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Code Review Best Practice
trishagee
69
19k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Done Done
chrislema
185
16k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
32
14k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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