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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
jquery悬浮提示框完整实例
Jan 13 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
ES6实现的遍历目录函数示例
Apr 07 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
在Vue 中使用Typescript的示例代码
Sep 10 Javascript
vue全屏事件开发详解
Jun 17 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
《超神学院》霸气归来, 天使彦上演维多利亚的秘密
2020/03/02 国漫
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
PHP的ASP防火墙
2006/10/09 PHP
PHP代码加密的方法总结
2020/03/13 PHP
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
Jquery同辈元素选中/未选中效果的实例代码
2013/08/01 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
微信小程序利用co处理异步流程的方法教程
2017/05/20 Javascript
javascript ES6 新增了let命令使用介绍
2017/07/07 Javascript
JavaScript实现焦点进入文本框内关闭输入法的核心代码
2017/09/20 Javascript
vue 过滤器filter实例详解
2018/03/14 Javascript
js实现网页版贪吃蛇游戏
2020/02/22 Javascript
JavaScript实现猜数字游戏
2020/05/20 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
2020/07/22 Javascript
[00:58]PWL开团时刻DAY5——十人开雾0换5
2020/11/04 DOTA
python 多进程通信模块的简单实现
2014/02/20 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
pandas 数据实现行间计算的方法
2018/06/08 Python
pandas使用apply多列生成一列数据的实例
2018/11/28 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
python如何代码集体右移
2020/07/20 Python
canvas小画板之平滑曲线的实现
2020/08/12 HTML / CSS
学生自我鉴定模板
2013/12/30 职场文书
学前教育学生自荐信范文
2013/12/31 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android