Ads
react 岩D large scale front end application用
react 係比較reusable一點 做出來堆component 拆得比較散,方便重用,亦因為如此,寫上來比較煩
vue比較岩D one page / small scale front end野去寫
vue佢劣係佢係要pass個element id唔能夠成個dom食入去,食到入去就真係 :^(
vue唔係都可以拆component架咩 :^(
我係想直接食個由document.createElement產生的dom
https://vuejs.org/v2/guide/render-function.html :^(
搭單問,如果做single page application, 一版有好多款野攞,咪要call 好多個唔同嘅api?
如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content :^( :^(
搭單問,如果做single page application, 一版有好多款野攞,咪要call 好多個唔同嘅api?
如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content :^( :^(
搭單問,如果做single page application, 一版有好多款野攞,咪要call 好多個唔同嘅api?
如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content :^( :^(
Json?
用Server side rendering?
搭單問,如果做single page application, 一版有好多款野攞,咪要call 好多個唔同嘅api?
如果一個api 攞晒成版嘅野會好on9, 唔想有條api 叫get_home_page_content :^( :^(
搭單問下
如果係做一個類似新聞網嘅野
home page 就列曬所有新聞嘅title 出黎
之後撳入去會去左個篇新聞 有曬content 咁
呢類網係咪應該係寫套api 畀json 個client 做client side rendering?
定係成個網每次都server render 埋 直接掉成個html 過去 :^(
Ads
玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},
render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>
<option value="Gromulus">
Gromulus
</option>
<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎
玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},
render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>
<option value="Gromulus">
Gromulus
</option>
<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎
this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 (其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去
唔知有無錯 可能有d 1999
咁個parameter e實際係D咩黎
玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},
render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>
<option value="Gromulus">
Gromulus
</option>
<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎
this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 (其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去
唔知有無錯 可能有d 1999
咁個parameter e實際係D咩黎
Event object
https://www.w3schools.com/jsref/dom_obj_event.asp
我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event
玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},
render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>
<option value="Gromulus">
Gromulus
</option>
<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎
this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 (其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去
唔知有無錯 可能有d 1999
咁個parameter e實際係D咩黎
Event object
https://www.w3schools.com/jsref/dom_obj_event.asp
我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event
玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},
render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>
<option value="Gromulus">
Gromulus
</option>
<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎
this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 (其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去
唔知有無錯 可能有d 1999
咁個parameter e實際係D咩黎
Event object
https://www.w3schools.com/jsref/dom_obj_event.asp
我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event
Ads
玩codecademy玩到 reactjs part2,
但係有樣野唔明,
var Child = React.createClass({
handleChange: function (e) {
var name = e.target.value;
this.props.nowChange(name);
},
render: function () {
return (
<div>
<h1>
Hey my name is {http://this.props.name}!
</h1>
<select
id="great-names"
onChange={this.handleChange} >
<option value="Frarthur">
Frarthur
</option>
<option value="Gromulus">
Gromulus
</option>
<option value="Thinkpiece">
Thinkpiece
</option>
</select>
</div>
);
}
});
上面紅色個function入面個parameter佢係點樣知個e係咩黎, 姐係正常call function係寫埋parameter入去, 例如: handleChange("Frarthur"),
但係點解係上面佢就咁一句onChange={this.handleChange}就知個parameter係咩黎
this.handleChange 係一個function variable
this.handleChange() 就係call function
你可以set
let a = this.handleChange
跟住call a(); 其實即係call 左this.handleChange();
原理一樣
上面set左onChange 時 (其實set左select component既 props.onChange)
React 就會幫你call onChange(xxx)
即係call this.handleChange(xxx);
所以就會pass左event 入去
唔知有無錯 可能有d 1999
咁個parameter e實際係D咩黎
Event object
https://www.w3schools.com/jsref/dom_obj_event.asp
我都係唔明點解this.handleChange唔駛打parameter, 但係function入面可以自動Get到個event
你唔比個e都無問題
但如果你要classify邊個obj送個event入去,就要
1,放parameter
2,用arguments array去read
個人鐘意用後者,因為做緊的job入面d doc唔齊,無講會pass 咩param入去
有講我就建議用1
https://vuejs.org/v2/guide/render-function.html