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实现统计文本框Textarea字数增强用户体验
Dec 21 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
JavaScript 上万关键字瞬间匹配实现代码
Jul 07 Javascript
javascript操作referer详细解析
Mar 10 Javascript
整理JavaScript对DOM中各种类型的元素的常用操作
May 05 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
Feb 27 Javascript
vue中v-for加载本地静态图片方法
Mar 03 Javascript
taro开发微信小程序的实践
May 21 Javascript
vue props 单项数据流实例分享
Feb 16 Javascript
浅谈JS的原型和原型链
Jun 04 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
自动把纯文本转换成Web页面的php代码
2009/08/27 PHP
PHP使用strtotime获取上个月、下个月、本月的日期
2015/12/30 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
了解一点js的Eval函数
2012/07/26 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue添加class样式实例讲解
2019/02/12 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
2019/04/19 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python中__init__和__new__的区别详解
2014/07/09 Python
python常见排序算法基础教程
2017/04/13 Python
Python微信库:itchat的用法详解
2017/08/14 Python
详解Python发送email的三种方式
2018/10/18 Python
如何用python写一个简单的词法分析器
2018/12/18 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
python 实现分组求和与分组累加求和代码
2020/05/18 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
HTML5的结构和语义(4):语义性的内联元素
2008/10/17 HTML / CSS
html5中嵌入视频自动播放的问题解决
2020/05/25 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
加拿大领先的优质厨具产品在线购物网站:Golda’s Kitchen
2017/11/17 全球购物
一个大学生十年的职业规划
2014/01/17 职场文书
司机岗位职责说明书
2014/07/29 职场文书
校长个人总结
2015/03/03 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书