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 相关文章推荐
mouse_on_title.js
Aug 25 Javascript
基于jQuery捕获超链接事件进行局部刷新代码
May 10 Javascript
Javascript中typeof 用法小结
May 12 Javascript
使用JavaScript实现连续滚动字幕效果的方法
Jul 07 Javascript
JavaScript的设计模式经典之代理模式
Feb 24 Javascript
JavaScript 函数的执行过程
May 09 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
Nuxt.js踩坑总结分享
Jan 18 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
Element Notification通知的实现示例
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
PHP数字和字符串ID互转函数(类似优酷ID)
2014/06/30 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP递归遍历指定文件夹内的文件实现方法
2016/11/15 PHP
Using the TextRange Object
2006/10/14 Javascript
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
Web开发之JavaScript
2012/03/29 Javascript
基于jquery的文本框与autocomplete结合使用(asp.net+json)
2012/05/30 Javascript
用js实现小球的自由移动代码
2013/04/22 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
nodejs基础应用
2017/02/03 NodeJs
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
vue组件的写法汇总
2018/04/12 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python代码的打包与发布详解
2014/07/30 Python
Python中使用items()方法返回字典元素对的教程
2015/05/21 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
Python线程指南详细介绍
2017/01/05 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
ASP.NET中的身份验证有那些
2012/07/13 面试题
C#笔试题
2015/07/14 面试题
2015年元旦主持词结束语
2014/12/14 职场文书
技术员岗位职责
2015/02/04 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年消防工作总结
2015/04/24 职场文书
离婚案件上诉状
2015/05/23 职场文书
幼儿园保育员随笔
2015/08/14 职场文书
python实现简单倒计时功能
2021/04/21 Python
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL