最近項(xiàng)目中使用了vue替代繁瑣的jquery處理dom的數(shù)據(jù)更新，個(gè)人非常喜歡，所以就上官網(wǎng)小小地實(shí)踐了一把。
以下為表單控件的實(shí)踐，代碼敬上，直接新建html文件，粘貼復(fù)制即可看到效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>PlayAround2 Have Fun</title> <script src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script> <style> h2{ text-decoration:underline; } .red{ color: red; } .green{ color: green; } </style></head><body> <div id="app"> <h2>checkBox</h2> <input type="checkbox" v-model="checked"> <label>{{checked}}</label> <h2>multi checkbox</h2> <input type="checkbox" id="Kobe" value="Kobe" v-model="names"> <label for="Kobe">Kobe</label> <input type="checkbox" id="Curry" value="Curry" v-model="names"> <label for="Curry">Curry</label> <input type="checkbox" id="Aaron" value="Aaron" v-model="names"> <label for="Aaron">Aaron</label> <br> <span>Checked names: {{names | json}}</span> <h2>Radio</h2> <input type="radio" id="one" value="one" v-model="picked"> <label for="one">one</label> <br> <input type="radio" id="two" value="two" v-model="picked"> <label for="two">two</label> <br> <span>Picked: {{picked}}</span> <h2>Select</h2> <select v-model="selected"> <option selected>Kobe</option> <option>Curry</option> <option>Aaron</option> </select> <span>Selected: {{selected}}</span> <h2>Multi Select</h2> <select multiple v-model="multiSelected"> <option>Kobe</option> <option>Curry</option> <option>Aaron</option> </select> <span>Selected: {{multiSelected}}</span> <h2>Select with for</h2> <select v-model="selectedPlayer"> <option v-for="option in options" :value="option.value">{{option.text}}</option> </select> <span>Selected: {{selectedPlayer}}</span> <h2>Lazy-改變更新的事件從input->change</h2> <input v-model="msg" lazy> <span>Msg:{{msg}}</span> <h2>Number(沒啥吊用。。。.2->0.2,僅此而已嗎?)</h2> <input v-model="age" number> <span>age:{{age}}</span> <h2>debounce-延遲更新view</h2> <p>Edit me<input v-model="delayMsg" debounce="500"></p> <span>delayMsg:{{delayMsg}}</span> </div> <script> var vm = new Vue({ el:"#app", data:{ checked:false, names:[], picked:"", selected:"", multiSelected:"", options:[ {text:"Kobe",value:"Bryant"}, {text:"Stephen",value:"Curry"}, {text:"Aaron",value:"Kong"} ], selectedPlayer:"", msg:"", age:"", delayMsg:"" }, methods:{ } }) </script></body></html>使用vue的幾個(gè)優(yōu)點(diǎn)：
1、只需關(guān)注model層的數(shù)據(jù)處理，無需處理復(fù)雜的view層更新，vue會在model改變時(shí)自動對view層進(jìn)行更新；
2、vue提供一系列的小工具幫助開發(fā)者處理數(shù)據(jù)綁定中得問題，比如computed可以提供計(jì)算的擴(kuò)展，還有過濾器、排序等支持；
3、代碼簡潔，分層清晰。html里進(jìn)行數(shù)據(jù)綁定，js里只需處理數(shù)據(jù)以及后臺交互；
4、提供自定義組件功能，進(jìn)一步規(guī)范前端架構(gòu)。目前暫時(shí)沒有使用，后續(xù)研究研究。
以上就是目前使用vue的心得，暫時(shí)沒有發(fā)現(xiàn)啥缺點(diǎn)，可能還不太深入，總體來說體驗(yàn)非常不錯！
本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
