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 ...
随机推荐
- redis-分布式锁-消除竞争条件
因为信号量的设计过程中,获取一个信号量需要执行多个命令组成的流水,这样容易形成竞争条件. 为了消除信号量实现中所有可能出现的竞争条件,构建一个正确的计数信号量,需要在 信号量时,添加带有短暂超时时间的 ...
- Android测试环境配置
测试是软件开发中非常重要的一部分,Android中是使用junit测试框架,本文使用的是junit4和Android Studio.Android测试主要分两类本地测试和Instrumented测试, ...
- javaweb技术入门
JavaWeb巩固和进阶 1.如何配置外部应用? 方法一: server.xml 在<Host>中添加如下配置 <Context path="/xxx" docB ...
- POJ 2431——Expedition（贪心，优先队列）
链接:http://poj.org/problem?id=2431 题解 #include<iostream> #include<algorithm> #include< ...
- ng service(服务)
ng service(服务) 创建服务命令:ng g service services/+服务名 使用服务的注意事项: 使用(services)服务需要在app.,module.ts(根模块)中引用并 ...
- ELK 学习笔记之 elasticsearch环境搭建
ELK概述: ElasticSearch是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等 Logstash是一 ...
- 洛谷P1613 跑路
题目描述 小A的工作不仅繁琐,更有苛刻的规定,要求小A每天早上在6:00之前到达公司,否则这个月工资清零.可是小A偏偏又有赖床的坏毛病.于是为了保住自己的工资,小A买了一个十分牛B的空间跑路器,每秒钟 ...
- Arouter核心思路和源码详解
前言 阅读本文之前,建议读者: 对Arouter的使用有一定的了解. 对Apt技术有所了解. Arouter是一款Alibaba出品的优秀的路由框架,本文不对其进行全面的分析,只对其最重要的功能进行源 ...
- LeetCode初级算法--字符串01：反转字符串
LeetCode初级算法--字符串01:反转字符串 搜索微信公众号:'AI-ming3526'或者'计算机视觉这件小事' 获取更多算法.机器学习干货 csdn:https://blog.csdn.ne ...
- 阿里云 RDS 数据库又发 CPU 近 100% 的“芯脏病”
最近云界发生了2件事,一件是大事,一件是小事,大事是阿里云与微软合作推出了开放应用模型 Open Application Model(OAM),小事是由于微软 SQL Server 在阿里云上水土不服 ...