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 判断中文字符长度的函数代码
Aug 27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器(优化篇)
Jun 28 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
vue拖拽排序插件vuedraggable使用方法详解
Aug 21 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
Vue实现日历小插件
Jun 26 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
Sep 02 Javascript
详谈vue中router-link和传统a链接的区别
Jul 22 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入门学习笔记之一
2010/10/12 PHP
php开发文档 会员收费1期
2012/08/14 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
JavaScript的作用域和块级作用域概念理解
2014/09/21 Javascript
JavaScript获取Url里的参数
2014/12/18 Javascript
给easyui datebox扩展一个清空的实例
2016/11/09 Javascript
JavaScript定时器实现的原理分析
2016/12/06 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
微信小程序自定义波浪组件使用方法详解
2019/09/21 Javascript
Python学习笔记之常用函数及说明
2014/05/23 Python
python实现根据用户输入从电影网站获取影片信息的方法
2015/04/07 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Django数据库操作的实例(增删改查)
2017/09/04 Python
python 实现A*算法的示例代码
2018/08/13 Python
python循环输出三角形图案的例子
2019/11/22 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
css3的图形3d翻转效果应用示例
2014/04/08 HTML / CSS
德国团购网站:Groupon德国
2018/03/13 全球购物
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
双创工作实施方案
2014/03/26 职场文书
公司任命书范本
2014/06/04 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
2014年护士个人工作总结
2014/11/11 职场文书
运动会加油稿20字
2014/11/15 职场文书
计划生育个人总结
2015/03/02 职场文书
个人求职意向书
2015/05/11 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android