Vue表单实例代码


Posted in Javascript onSeptember 05, 2016

什么是 Vue.js?

Vue.js 是用于构建交互式的 Web 界面的库。

Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。

Vue.js 特点

简洁: HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单。

数据驱动: 自动追踪依赖的模板表达式和计算属性。

组件化: 用解耦、可复用的组件来构造界面。

轻量: ~24kb min+gzip,无依赖。

快速: 精确有效的异步批量 DOM 更新。

模块友好: 通过 NPM 或 Bower 安装,无缝融入你的工作流。

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson11

一 vue表单

实在是太简单了,直接来个例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue表单</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="test">
<!--输入框-->
<input type="text" v-model="msg"> <br />
<!--单选框-->
<input id="mycb1" type="radio" v-model="choose1">
<label for="mycb1">{{choose1}}</label>
<!--复选框-->
<input id="mycb2" type="checkbox" v-model="choose2">
<label for="mycb2">{{choose2}}</label>
<!--Select-->
<select v-model="selected">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>选中: {{ selected }}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el: ".test",
data: {
msg: '我是文本',
choose1: false,
choose2: false,
selected:''
}
})
</script>
</body>
</html>

以上所述是小编给大家介绍的Vue表单实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
srcElement表格样式
Sep 03 Javascript
javascript脚本调试方法小结
Nov 24 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
jQuery删除节点的三个方法即remove()detach()和empty()
Dec 27 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
Javascript生成带参数的二维码示例
Oct 10 Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 #Javascript
JS实现的手机端精简幻灯片效果
Sep 05 #Javascript
jQuery实现页面下拉100像素出现悬浮窗口的方法
Sep 05 #Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
Sep 05 #Javascript
AngularJS实现标签页的两种方式
Sep 05 #Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 #Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
php mysql索引问题
2008/06/07 PHP
php以post形式发送xml的方法
2014/11/04 PHP
php递归实现无限分类的方法
2015/07/28 PHP
如何在PHP中读写文件
2020/09/07 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
jquery 实现input输入什么div图层显示什么
2014/06/15 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
使用ionic在首页新闻中应用到的跑马灯效果的实现方法
2017/02/13 Javascript
解决VUEX刷新的时候出现数据消失
2017/07/03 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
微信小程序实现运动步数排行功能(可删除)
2018/07/05 Javascript
Vue+element-ui 实现表格的分页功能示例
2018/08/18 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
create-react-app中添加less支持的实现
2019/11/15 Javascript
python使用xpath中遇到:到底是什么?
2018/01/04 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
python生成ppt的方法
2018/06/07 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
婚鞋、新娘鞋、礼服鞋、童鞋:Nina Shoes
2019/09/04 全球购物
美国一家著名的手表在线折扣网站:Discount Watch Store
2020/02/24 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
副董事长岗位职责
2014/04/02 职场文书
软环境建设心得体会
2014/09/09 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
无线电通信名词解释
2022/02/18 无线电
DE1107机评
2022/04/05 无线电