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 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
javascript window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
js日期范围初始化得到前一个月日期的方法
May 05 Javascript
AngularJS基础 ng-include 指令简单示例
Aug 01 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
vue拖拽组件使用方法详解
Dec 01 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
Element MessageBox弹框的具体使用
Jul 27 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
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php url路由入门实例
2014/04/23 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
使用php转义输出HTML到JavaScript
2015/03/27 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jQuery 学习入门篇附实例代码
2010/03/16 Javascript
JS.findElementById()使用介绍
2013/09/21 Javascript
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jQuery取消ajax请求的方法
2015/06/09 Javascript
使用Raygun来自动追踪AngularJS中的异常
2015/06/23 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
2016/09/01 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
解决vue单页路由跳转后scrollTop的问题
2018/09/03 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
vue中keep-alive,include的缓存问题
2019/11/26 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python查看zip包中文件及大小的方法
2015/07/09 Python
python操作oracle的完整教程分享
2018/01/30 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
python中JWT用户认证的实现
2020/05/18 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
CSS3制作文字半透明倒影效果的两种实现方式
2014/08/08 HTML / CSS
学前教育毕业生自荐信范文
2013/12/24 职场文书
初三化学教学反思
2014/01/23 职场文书
反对四风问题自我剖析材料
2014/09/29 职场文书
党的群众路线教育实践活动总结
2014/10/30 职场文书
行政处罚告知书
2015/07/01 职场文书
庆七一活动简报
2015/07/20 职场文书
500字作文之周记
2019/12/13 职场文书