Vue.js表单控件实践
更新时间：2016年10月27日 12:10:38 作者：xiao小孔
这篇文章主要为大家详细介绍了Vue.js表单控件实践,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
最近项目中使用了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项目使用cdn加速减少webpack打包体积的相关资料,需要的朋友可以参考下2022-08-08
在写大文件上传时,碰到关于 vue2 跟 vue3 对在循环中使用异步,并动态把普通对象添加进响应式数据,在异步前后修改该普通对象的某个属性,导致 vue2 跟 vue3 的视图更新不一致,引发一系列的思考,所以本文介绍了Vue3响应式对象数组不能实时DOM更新问题解决办法2024-07-07
最近有项目需要用到对图片进行局部放大,类似淘宝商品页的放大镜效果,经过一番研究功能可用,下面这篇文章主要给大家介绍了关于如何利用vue3实现放大镜效果的相关资料,需要的朋友可以参考下2021-09-09
今天小编就为大家分享一篇Vue解析带html标签的字符串为dom的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要为大家介绍了html中引入Vue.js的cdn实现简单的文档单页示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-08-08
这篇文章主要介绍了vue this.$toast 失效问题汇总,本文给大家分享完美解决方案，感兴趣的朋友跟随小编一起看看吧2024-03-03
本文主要介绍了flask和vue前后端分离项目部署的示例代码，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
词云图是一种文本可视化技术,用于展示文本数据中关键词的频次或重要性,文章介绍了如何在Vue3中使用@antv/g2plot生成词云图,并解释了如何共享颜色和随机生成颜色的组件,感兴趣的朋友一起看看吧2024-12-12
这篇文章主要介绍了vue3-treeselect数据绑定失败的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要为大家详细介绍了Vue如何利用transition标签实现页面跳转动画，文中的示例代码讲解详细，感兴趣的小伙伴可以跟随小编一起一下2023-08-08
最新评论