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 学习笔记(七)字符串的连接
Dec 31 Javascript
jquery 快速回到页首的方法
Dec 05 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
Vue学习笔记进阶篇之函数化组件解析
Jul 21 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
Sep 27 jQuery
react组件基本用法示例小结
Apr 27 Javascript
Javascript的promise,async和await的区别详解
Mar 24 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
php 在线打包_支持子目录
2008/06/28 PHP
php单件模式结合命令链模式使用说明
2008/09/07 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP中加速、缓存扩展的区别和作用详解(eAccelerator、memcached、xcache、APC )
2016/07/09 PHP
PHP实现的redis主从数据库状态检测功能示例
2017/07/20 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
JavaScript实现快速排序的方法
2015/07/31 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
Highcharts入门之基本属性
2016/08/02 Javascript
浅析Javascript ES6新增值比较函数Object.is
2016/08/24 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
jQuery简单绑定单个事件的方法示例
2017/06/10 jQuery
koa源码中promise的解读
2018/11/13 Javascript
jquery使用echarts实现有向图可视化功能示例
2019/11/25 jQuery
解决小程序无法触发SESSION问题
2020/02/03 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
python自动发邮件总结及实例说明【推荐】
2019/05/31 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
python+openCV对视频进行截取的实现
2020/11/27 Python
几道数据库的面试题或笔试题
2014/05/31 面试题
微观物理专业自荐信
2014/01/26 职场文书
暑期培训随笔感言
2014/03/10 职场文书
化学教育专业求职信
2014/07/08 职场文书
教育见习报告范文
2014/11/03 职场文书
辞职信范文大全
2015/03/02 职场文书
员工自我评价范文
2015/03/11 职场文书
留学推荐信英文范文
2015/03/26 职场文书
2015年街道办事处团委工作总结
2015/10/14 职场文书
Nginx 常用配置
2022/05/15 Servers