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 相关文章推荐
该如何加载google-analytics(或其他第三方)的JS
May 13 Javascript
jQuery1.4.2与老版本json格式兼容的解决方法
Feb 12 Javascript
js特殊字符转义介绍
Nov 05 Javascript
JavaScript将页面表格导出为Excel的具体实现
Dec 27 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
Jan 09 Javascript
浅谈javascript面向对象程序设计
Jan 21 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
微信小程序日历/日期选择插件使用方法详解
Dec 28 Javascript
vue中的过滤器及其时间格式化问题
Apr 09 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
vue抽出组件并传值实例
Jul 31 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中的Class的几点个人看法
2006/10/09 PHP
谈谈PHP语法(2)
2006/10/09 PHP
留言板翻页的实现详解
2006/10/09 PHP
PHP学习笔记之二 php入门知识
2011/01/12 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
2016/02/20 Javascript
JS实现的颜色实时渐变效果完整实例
2016/03/25 Javascript
JS创建对象的写法示例
2016/11/04 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
基于node.js的fs核心模块读写文件操作(实例讲解)
2017/09/10 Javascript
nodejs中安装ghost出错的原因及解决方法
2017/10/23 NodeJs
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
js实现小时钟效果
2020/03/25 Javascript
Node 模块原理与用法详解
2020/05/13 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
python 实现创建文件夹和创建日志文件的方法
2019/07/07 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
tensorflow 2.1.0 安装与实战教程(CASIA FACE v5)
2020/06/30 Python
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
中国好声音华少广告词
2014/03/17 职场文书
竞选劳动委员演讲稿
2014/04/28 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
七年级语文教学反思
2016/03/03 职场文书
小学三年级语文教学反思
2016/03/03 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python
python实现学生信息管理系统(面向对象)
2022/06/05 Python