Vue.js表單控件實(shí)踐

來(lái)源：九壹網(wǎng)

最近項(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(沒(méi)啥吊用。。.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ù)處理，無(wú)需處理復(fù)雜的view層更新，vue會(huì)在model改變時(shí)自動(dòng)對(duì)view層進(jìn)行更新；

2、vue提供一系列的小工具幫助開(kāi)發(fā)者處理數(shù)據(jù)綁定中得問(wèn)題，比如computed可以提供計(jì)算的擴(kuò)展，還有過(guò)濾器、排序等支持；

3、代碼簡(jiǎn)潔，分層清晰。html里進(jìn)行數(shù)據(jù)綁定，js里只需處理數(shù)據(jù)以及后臺(tái)交互；

4、提供自定義組件功能，進(jìn)一步規(guī)范前端架構(gòu)。目前暫時(shí)沒(méi)有使用，后續(xù)研究研究。

成熟丰满熟妇高潮XXXXX,人妻无码AV中文系列久久兔费 ,国产精品一国产精品,国精品午夜福利视频不卡麻豆

Vue.js表單控件實(shí)踐