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玩转继承(三)
May 08 Javascript
一个简单的动态加载js和css的jquery代码
Sep 01 Javascript
JavaScript DOM事件(笔记)
Apr 08 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
Feb 13 Javascript
微信小程序调用摄像头隐藏式拍照功能
Aug 22 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
微信小程序仿通讯录功能
Apr 09 Javascript
vue 图片裁剪上传组件的实现
Nov 12 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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实现的MongoDB数据库操作类分享
2014/05/12 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
lib.utf.js
2007/08/21 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
详解AngularJS过滤器的使用
2016/03/11 Javascript
JS取模、取商及取整运算方法示例
2016/10/13 Javascript
基于jQuery的select下拉框选择触发事件实例分析
2016/11/18 Javascript
AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
2016/12/13 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
2019/04/02 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
layui实现多图片上传并限制上传的图片数量
2019/09/26 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
2020/09/05 Javascript
Python对文件操作知识汇总
2016/05/15 Python
在windows下Python打印彩色字体的方法
2018/05/15 Python
利用python numpy+matplotlib绘制股票k线图的方法
2019/06/26 Python
Python 占位符的使用方法详解
2019/07/10 Python
Python3 shutil(高级文件操作模块)实例用法总结
2020/02/19 Python
美国在线购买和出售礼品卡网站:EJ Gift Cards
2019/06/09 全球购物
网络方面基础面试题
2012/11/16 面试题
医院工作检讨书范文
2014/02/10 职场文书
化妆品促销方案
2014/02/24 职场文书
文明生主要事迹
2014/05/25 职场文书
局火灾防控工作方案
2014/05/25 职场文书
某某同志考察材料
2014/05/28 职场文书
企业法人授权委托书范本
2014/09/23 职场文书
企业法人代表证明书
2014/09/27 职场文书
2015年高三教学工作总结
2015/07/21 职场文书
500字作文之周记
2019/12/13 职场文书
php 获取音视频时长,PHP 利用getid3 获取音频文件时长等数据
2021/04/01 PHP
如何利用Python实现n*n螺旋矩阵
2022/01/18 Python