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 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
SpringMVC restful 注解之@RequestBody进行json与object转换
Dec 10 Javascript
jquery实现图片切换代码
Oct 13 Javascript
详解ES6之async+await 同步/异步方案
Sep 19 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
vue学习之Vue-Router用法实例分析
Jan 06 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
Jul 24 Javascript
Vue实现下拉加载更多
May 09 Vue.js
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
apache php模块整合操作指南
2012/11/16 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
php示例详解Constructor Prototype Pattern 原型模式
2015/10/15 PHP
PHP命令行执行整合pathinfo模拟定时任务实例
2016/08/12 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
利用百度地图JSAPI生成h7n9禽流感分布图实现代码
2013/04/15 Javascript
jCallout 轻松实现气泡提示功能
2013/09/22 Javascript
Node.js中使用Log.io在浏览器中实时监控日志(等同tail -f命令)
2014/09/17 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
javascript闭包的理解
2015/04/01 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
浅谈Vue数据响应思路之数组
2018/11/06 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
python使用正则表达式检测密码强度源码分享
2014/06/11 Python
Python实时获取cmd的输出
2015/12/13 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
Python实现定制自动化业务流量报表周报功能【XlsxWriter模块】
2019/03/11 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
Python八皇后问题解答过程详解
2019/07/29 Python
美国本地交易和折扣网站:LocalFlavor.com
2017/10/26 全球购物
美国在线肉类和海鲜配送:Crowd Cow
2020/10/02 全球购物
关于Assembly命名空间的三个面试题
2015/07/23 面试题
教学大赛获奖感言
2014/01/15 职场文书
保证书格式范文
2014/04/28 职场文书
白鹤梁导游词
2015/02/06 职场文书
员工辞职信怎么写
2015/02/27 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL
《英雄联盟》2022日蚀、月蚀皮肤演示 黑潮亚索曝光
2022/04/13 其他游戏