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 相关文章推荐
js作用域及作用域链概念理解及使用
Apr 15 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
javascript定义变量时加var与不加var的区别
Dec 22 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
Sep 01 Javascript
jQuery实现点击查看大图并以弹框的形式居中
Aug 08 Javascript
Bootstrap基本组件学习笔记之分页(12)
Dec 08 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
webpack+vue2构建vue项目骨架的方法
Jan 09 Javascript
Node.js笔记之process模块解读
May 31 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 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
IIS7.X配置PHP运行环境小结
2011/06/09 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
TP5框架安全机制实例分析
2020/04/05 PHP
thinkphp框架无限级栏目的排序功能实现方法示例
2020/03/29 PHP
一个cssQuery对象 javascript脚本实现代码
2009/07/21 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
javascript的创建多行字符串的7种方法
2014/04/29 Javascript
总结JavaScript中布尔操作符||与&amp;&amp;的使用技巧
2015/11/17 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
Bootstrap jquery.twbsPagination.js动态页码分页实例代码
2017/02/20 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
使用Python获取CPU、内存和硬盘等windowns系统信息的2个例子
2014/04/15 Python
对于Python的框架中一些会话程序的管理
2015/04/20 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
python增加图像对比度的方法
2019/07/12 Python
Python实现把类当做字典来访问
2019/12/16 Python
python sklearn包——混淆矩阵、分类报告等自动生成方式
2020/02/28 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
html5使用canvas实现跟随光标跳动的火焰效果
2014/01/07 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
化工专业应届生求职信
2013/11/08 职场文书
护士求职推荐信范文
2013/11/23 职场文书
自我鉴定怎么写
2013/12/05 职场文书
《秋姑娘的信》教学反思
2014/02/28 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
新闻专业毕业生求职信
2014/08/08 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
奖励通知
2015/04/22 职场文书
2019新学期家长会工作计划
2019/08/21 职场文书
《卧薪尝胆》读后感3篇
2019/12/26 职场文书
python opencv常用图形绘制方法(线段、矩形、圆形、椭圆、文本)
2021/04/12 Python