最近項目中使用了vue替代繁瑣的jquery處理dom的數據更新，個人非常喜歡，所以就上官網小小地實踐了一把。
以下為表單控件的實踐，代碼敬上，直接新建html文件，粘貼復制即可看到效果
<!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的幾個優點：
1、只需關注model層的數據處理，無需處理復雜的view層更新，vue會在model改變時自動對view層進行更新；
2、vue提供一系列的小工具幫助開發者處理數據綁定中得問題，比如computed可以提供計算的擴展，還有過濾器、排序等支持；
3、代碼簡潔，分層清晰。html裡進行數據綁定，js裡只需處理數據以及後台交互；
4、提供自定義組件功能，進一步規范前端架構。目前暫時沒有使用，後續研究研究。
以上就是目前使用vue的心得，暫時沒有發現啥缺點，可能還不太深入，總體來說體驗非常不錯！
本文已被整理到了《Vue.js前端組件學習教程》，歡迎大家學習閱讀。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。