vue表单和组件使用
表单： <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
margin: 0 auto;
background: skyblue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<h2>输入框</h2>
<input type="text" v-model='inputText' name="" id="" value="" />
<p>{{inputText}}</p>
<hr />
<h2>单选框</h2> <input type="radio" v-model='sex' name="sex" id="" value="男" />
<input type="radio" v-model='sex' name="sex" id="" value="女" />
<p>{{sex}}</p> <hr />
<h2>复选框</h2>
<input type="checkbox" v-model='fx' name="man" id="" value="男" /> <input type="checkbox" v-model='fx' name="girl" id="" value="女" />
<p>{{fx}}</p> <hr /> <h2>选项</h2>
<select name="city" v-model='city'>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="上海">上海</option>
</select>
<p>{{city}}</p> <hr />
<textarea v-model='longtext' name="txt" rows="" cols=""></textarea>
<p>{{longtext}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
inputText:'',
sex:'',
fx:[],
city:'',
longtext:'123'
},
compute:{ }
methods:{ }
})
</script>
</body>
</html> 组件：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<headnav user='xx'></headnav>
<indexmain @send='changeChild'></indexmain>
<indexfooter></indexfooter> <headnav :user='username'></headnav> <h1>{{childContent}}</h1>
</div> <script src="js/indexComponent.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Vue.component('headnav',{
template:'<div><h1>欢迎{{user}}</h1></div>',
props:['user'],
data:function(){
return {
msg:'headnav'
}
}
}) var app = new Vue({
el:'#app',
data:{
username:'隔壁老王',
childContent:''
},
methods:{
changeChild:function(value){
console.log(value)
this.childContent = value
}
}
}) //组件：要想父组件传递数据给子组件，那么需要使用props
//如果想要子组件将数据传递给父父组件，那么需要使用自定义事件，$emit(事件名称，事件内容)，进行触发，监听：@事件名称=‘要执行的函数’ </script>
</body>
</html>
vue表单和组件使用的更多相关文章
- Vue表单和组件
一.表单 v-model 指令在表单控件元素上创建双向数据绑定,v-model 会根据控件类型自动选取正确的方法来更新元素. <input v-model="message" ...
- 第四节：Vue表单标签和组件的基本用法，父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- Vue基础-自定义事件的表单输入组件、自定义组件的 v-model
Vue 测试版本:Vue.js v2.5.13 学习 Vue 的自定义事件的表单输入组件,觉得文档讲的不太细致,所以这里再细化一下: 如果不用 v-model,代码应该是这样: <myinput ...
- Vue表单控件绑定
前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...
- vue_表单_组件
表单.组件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <tit ...
- vue表单验证--veevalidate使用教程
vue表单验证----vee-validate使用教程 官网:https://baianat.github.io/vee-validate/ 一.安装 npm install vee-validate ...
- vue表单校验（三）
vue表单校验(三) 每当看到heyui的这个表单校验,我就一直想将element的校验也做类似的功能,终于有了方式,虽然不是很完美,但是可以使用,能满足要求了 实现方式 基于element-ui实现 ...
- 写一个简单易用可扩展vue表单验证插件(vue-validate-easy)
写一个vue表单验证插件(vue-validate-easy) 需求 目标:简单易用可扩展 如何简单 开发者要做的 写了一个表单,指定一个name,指定其验证规则. 调用提交表单方法,可以获取验证成功 ...
- meta生成器 —— 表单元素组件
手写代码? meta(json)需要手写吗?别闹,手写多麻烦呀,我这么懒怎么可能手写,这辈子都别想,所以要弄个工具出来,咱们说干就干. 这个工具,说白了本身就是一个表单,一个meta属性对应一个met ...
随机推荐
- Hadoop核心组件之HDFS
HDFS:分布式文件系统 一句话总结 一个文件先被拆分为多个Block块(会有Block-ID:方便读取数据),以及每个Block是有几个副本的形式存储 1个文件会被拆分成多个Block blocks ...
- 基于操作系统原理的Linux的内存管理
一.实验目的 1．理解虚拟内存.磁盘缓存的概念. 2．掌握基本的内存管理知识. 3．掌握查看实时查看内存.内存回收的方法 二.实验内容 1． 监控内存使用情况 2． 检查和回收内容 三.实验平台 1． ...
- SpringBootSecurity学习（10）网页版登录之记住我功能
场景 很多登录都有记住我这个功能,在用户登陆一次以后,系统会记住用户一段时间,在这段时间,用户不用反复登陆就可以使用我们的系统.记住用户功能的基本原理如下图: 用户登录的时候,请求发送给过滤器User ...
- JVM 调优 - jhat
Java命令学习系列(五)——jhat 2016-01-21 分类:Java 阅读(8708) 评论(3) 阿里大牛珍藏架构资料,点击链接免费获取 jhat(Java Heap Analysis To ...
- centos7 远程连接其他服务器redis
在本地远程连接 在终端输入: redis-cli -h 服务器ip地址 -p 端口 -a 密码
- SpringBootSecurity学习（17）前后端分离版之 OAuth2.0 数据库（JDBC）存储客户端
自动批准授权码 前面我们授权的流程中,第一步获取授权码的时候,都会经历一个授权是否同意页面: 这个流程就像第三方登录成功后,提问是否允许获取昵称和头像信息的页面一样,这个过程其实是可以自动同意的,需要 ...
- [Python] Python 学习记录（1）
1.概论 弱类型 一个变量能被赋值时能与原类型不同 x = 1 x = "1" #不加分号,给x赋值为int后再次赋值为string是可行的 与或非 and or not / ...
- Label的作用是什么，是怎么用的？
label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到标签相关的表单控件上. 如: <form> <label for="male"&g ...
- python编程基础之三十六
文件处理:文件处理包括读文件,写文件 读文件: 1.打开文件 2.读取文件 3.关闭文件 写文件: 1.打开文件 2.写如文件 3.关闭文件 无论是读取文件还是写文件都时需要打开文件,和关闭文件 打开 ...
- 如何使用Externalizable接口自定义Java中的序列化
Java序列化过程的缺点 我们都知道如何使用Serializable接口序列化/反序列化一个对象,并且如何使用writeObject 和readObject方法自定义序列化过程. 但是这些自定义还不够 ...