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
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
130
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
250
10年の共創が示す、これからの開発者と企業の関係 ~ Crossroad
soracom
PRO
1
170
KMP の Swift export
kokihirokawa
0
330
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
いま注目しているデータエンジニアリングの論点
ikkimiyazaki
0
590
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
140
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
BirdCLEF+2025 Noir 5位解法紹介
myso
0
190
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
100
GA technologiesでのAI-Readyの取り組み@DataOps Night
yuto16
0
270
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Designing for humans not robots
tammielis
254
25k
What's in a price? How to price your products and services
michaelherold
246
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Into the Great Unknown - MozCon
thekraken
40
2.1k
The Language of Interfaces
destraynor
162
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Making Projects Easy
brettharned
119
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How STYLIGHT went responsive
nonsquared
100
5.8k
We Have a Design System, Now What?
morganepeng
53
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