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 ...
随机推荐
- pycharm使用sublime/boxy配色方案
# 展示效果图 1. github官网连接:https://github.com/simoncos/pycharm-monokai 2.克隆代码并解压文件 3.PyCharm -> File - ...
- 调试 内存查看StringCchCopy的运行前后
// ConsoleApplication1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" int _tmain(int argc, _T ...
- MySQL 数据库删除表中重复数据
采集数据的时候,由于先期对页面结构的分析不完善,导致采漏了一部分数据.完善代码之后重新运行 Scrapy,又采集了一些重复的数据,搜了下删除重复数据的方法. N.B. 删除数据表的重复数据时,请先备份 ...
- 【SpingBoot】spring静态工具类注入问题
package cn.zwqh.action; import javax.annotation.PostConstruct; import javax.annotation.Resource; imp ...
- javascript DOM节点
获得子节点方式: 1.将文本内容也当成节点 childNodes firstChild lastChild 2.获得标签为内容的节点 children firstElementChild lastEl ...
- SDI接口基于FPGA GTP实现
SDI采集和显示,基于xilinx 7系列器件进行实现,注意事项有如下几点: 1,如果多路SDI共用一个GTP Quad,或是SDI和PCIE在一个GTP Quad,时钟资源应该进行共享,既GTP c ...
- restTemplate getForObject中map传参问题
在使用restTemplate中getForObject的map传参形式时: 开始时我是这么调用的: RestTemplate rest = new RestTemplate(); Map<St ...
- idea2019版与maven3.6.2版本不兼容引发的血案
昨天遇到了点问题解决浪费了一些时间(导致更新内容较少)回顾下问题 项目出现Unable to import maven project: See logs for details 翻了好多博客 莫名的 ...
- 基于STM32F1与NRF24L01模块的SPI简单通信
一.前言 1.简介: 本文是基于STM32F1,将数据发送至NRF模块的寄存器,并将数据重新读取,通过串口发送出来的简单SPI单通信. 2.SPI简介: 调过STM8的都已经对SPI有所了解,调法都一 ...
- Linux上的Nginx上设置支持PHP的解析
当前的运行环境为,PHP7.2.2以 FastCGI 模式运行,默认端口为:9000,Nginx1.15.6 打开nginx配置文件 vi /usr/local/nginx/conf/nginx.co ...