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 常用关键字列表集合
Dec 04 Javascript
javascript 关闭IE6、IE7
Jun 01 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
javascript中万恶的function实例分析
May 25 Javascript
各种常用的JS函数整理
Oct 25 Javascript
浅析jQuery1.8的几个小变化
Dec 10 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
jQuery页面弹出框实现文件上传
Feb 09 Javascript
微信小程序防止多次点击跳转(函数节流)
Sep 19 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中执行系统外部命令
2006/10/09 PHP
php的大小写敏感问题整理
2011/12/29 PHP
PHP上传文件时文件过大$_FILES为空的解决方法
2013/11/26 PHP
php判断字符串在另一个字符串位置的方法
2014/02/27 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
destoon调用自定义模板及样式的公告栏
2014/06/21 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
PhpStorm+xdebug+postman调试技巧分享
2020/09/15 PHP
Grid得到选择行数据的方法总结
2011/01/17 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
2012/12/17 Javascript
js全屏显示显示代码的三种方法
2013/11/11 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
JavaScript提高性能知识点汇总
2016/01/15 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
详解Webpack DLL用法以及功能
2017/07/11 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
2019/07/30 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
在Python中调用ggplot的三种方法
2015/04/08 Python
Python实现将Excel转换为json的方法示例
2017/08/05 Python
计算机二级python学习教程(1) 教大家如何学习python
2019/05/16 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
在python中创建指定大小的多维数组方式
2019/11/28 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
企业贷款委托书格式
2014/09/12 职场文书
公司晚会主持词
2019/04/17 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书
Python读写yaml文件
2022/03/20 Python