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
170
WebComponent
milkmidi
1
3.1k
前端好朋友-tailwindcss
milkmidi
0
8.1k
202110-federation
milkmidi
0
140
Vue3一次就上手
milkmidi
0
6.3k
Other Decks in Technology
See All in Technology
Snowflakeの開発・運用コストをApache Icebergで効率化しよう!~機能と活用例のご紹介~
sagara
1
380
プロダクトエンジニア 360°フィードバックを実施した話
hacomono
PRO
0
140
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
生成AI×財務経理:PoCで挑むSlack AI Bot開発と現場巻き込みのリアル
pohdccoe
1
530
データベースの負荷を紐解く/untangle-the-database-load
emiki
1
450
EDRの検知の仕組みと検知回避について
chayakonanaika
11
4.5k
遷移の高速化 ヤフートップの試行錯誤
narirou
6
1k
組織におけるCCoEの役割とAWS活用事例
nrinetcom
PRO
4
120
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
80k
脳波を用いた嗜好マッチングシステム
hokkey621
0
280
わたしのOSS活動
kazupon
2
340
白金鉱業Meetup Vol.17_あるデータサイエンティストのデータマネジメントとの向き合い方
brainpadpr
7
1k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Docker and Python
trallard
44
3.3k
Embracing the Ebb and Flow
colly
84
4.6k
Typedesign – Prime Four
hannesfritz
40
2.5k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Bash Introduction
62gerente
611
210k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
What's in a price? How to price your products and services
michaelherold
244
12k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.2k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
640
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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