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 相关文章推荐
splice slice区别
Oct 09 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
jQuery实用函数用法总结
Aug 29 Javascript
jQuery使用post方法提交数据实例
Mar 25 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
轻松学习jQuery插件EasyUI EasyUI创建菜单与按钮
Nov 30 Javascript
JS hashMap实例详解
May 26 Javascript
微信小程序 地图定位简单实例
Oct 14 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
详解Node.js利用node-git-server快速搭建git服务器
Sep 27 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
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
php中的curl使用入门教程和常见用法实例
2014/04/10 PHP
php错误日志简单配置方法
2016/07/11 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
javascript 自定义回调函数示例代码
2014/09/26 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
jQuery事件与动画基础详解
2017/02/23 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
vue loadmore组件上拉加载更多功能示例代码
2017/07/19 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
2017/12/06 jQuery
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
2020/10/31 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
[01:01:18]VP vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python Logging 日志记录入门学习
2018/06/02 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
动物科学专业毕业生的自我评价
2013/11/29 职场文书
CAD制图设计师自荐信
2014/01/29 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
出纳员岗位职责风险
2014/03/06 职场文书
做一个有道德的人演讲稿
2014/05/14 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js
解析Redis Cluster原理
2021/06/21 Redis
CSS布局之浮动(float)和定位(position)属性的区别
2021/09/25 HTML / CSS
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis