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 相关文章推荐
采用CSS和JS,刚好我最近有个站点要用到下拉菜单!
Jun 26 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
微信小程序 ecshop地址三级联动实现实例代码
Feb 28 Javascript
微信小程序教程系列之新建页面(4)
Apr 17 Javascript
angularJS模态框$modal实例代码
May 27 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
Sep 19 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
如何手写一个简易的 Vuex
Oct 10 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设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP使用mkdir创建多级目录的方法
2015/12/22 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
PHP时间类完整代码实例
2021/02/26 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
jquery实现瀑布流效果分享
2014/03/26 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
JavaScript中使用自然对数ln的方法
2015/06/14 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
2018/04/24 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
JavaScript装箱及拆箱boxing及unBoxing用法解析
2020/06/15 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
python 用for循环实现1~n求和的实例
2019/02/01 Python
pytorch多进程加速及代码优化方法
2019/08/19 Python
简单了解django文件下载方式
2020/02/10 Python
浅谈Django中的QueryDict元素为数组的坑
2020/03/31 Python
Pycharm IDE的安装和使用教程详解
2020/04/30 Python
css3 flex实现div内容水平垂直居中的几种方法
2020/03/27 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
2016/06/22 HTML / CSS
官方授权图形T恤和服装:Fifth Sun
2019/06/12 全球购物
美国杰西潘尼官网:JCPenney
2019/06/12 全球购物
澳大利亚购买健身器材网站:Gym Direct
2019/12/19 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
业务代表的岗位职责
2013/11/16 职场文书
大学生求职自荐信
2013/12/12 职场文书
联谊活动策划书
2014/01/26 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python