Vue.js表单控件实践
程序员文章站
2022-07-17 21:24:00
最近项目中使用了vue替代繁琐的jquery处理dom的数据更新，个人非常喜欢，所以就上官网小小地实践了一把。
以下为表单控件的实践，代码敬上，直接新建html文件，粘贴...
最近项目中使用了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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： vue插件tab选项卡使用小结