vue复合组件----注册表单
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<my-article></my-article>
</div>
<script>
//要采用组件化的方式来编写页面，
// 把任何一个可被重用的元素封装成组件
// everything is component
Vue.component("my-title",{
template:`<div>
<h1>清风手纸</h1>
<h4>原木</h4>
</div>`
})
Vue.component("my-content",{
//一个就可以用引号或者``
template:'<p>源于纯净，归于健康</p>'
})
Vue.component("my-article",{
//当调用多个组件时要用``符号,而且要用顶层标签包含
template:`
<div>
<my-title></my-title>
<my-content></my-content>
</div>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="container">
<p>{{msg}}</p>
<!--调用根组件 -->
<my-form></my-form>
</div>
<script>
//创建组件my-user
Vue.component("my-user",{
template:`
<label>用户名：</label>
`
})
Vue.component("user-input",{
template:`
<input type="text" placeholder="请输入用户名"/>
`
})
Vue.component("my-pwd",{
template:`
<label>密码：</label>
`
})
Vue.component("pwd-input",{
template:`
<input type="text" placeholder="请输入密码"/>
`
})
Vue.component("my-login",{
template:`
<button>登录</button>
`
})
Vue.component("my-resign",{
template:`
<button>注册</button>
`
})
//复合组件作为根组件名字必须是烤串式的,驼峰的会报错
Vue.component("my-form",{
//可以用table、form、div等……
template:`
<form>
<my-user></my-user>
<user-input></user-input>
<br>
<my-pwd></my-pwd>
<pwd-input></pwd-input>
<br>
<my-resign></my-resign>
<my-login></my-login>
//写法或者
<my-login/>
</form>
`
})
new Vue({
el:"#container",
data:{
msg:"Hello VueJs"
}
})
</script>
</body>
</html>
vue复合组件----注册表单的更多相关文章
- vue 中跨组件的表单验证
使用的是element写的,里面提供了表单验证. 子组件是这样的 <template> <div> <el-form :model="value" r ...
- vue:父子组件间通信，父组件调用子组件方法进行校验子组件的表单
参考: ElementUI多个子组件表单的校验管理:https://www.jianshu.com/p/541d8b18cf95 Vue 子组件调用父组件方法总结:https://juejin.im/ ...
- 免费 PSD 下载： 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
- django系列9--django中的组件(form表单)
modelform整体 from django import forms from app01 import models import hashlib from django.core.except ...
- Element-ui中为上传组件添加表单校验
vue所依赖的Element的UI库在使用其中的upload组件时,可能很大几率会遇到这个题,需要给upload组件添加表单校验 大家这里直接看代码就可以 <el-form-item class ...
- Html注册表单示例
注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>. <html> <head> <title>注册表单&l ...
- 如何利用WordPress创建自定义注册表单插件
来源:http://www.ido321.com/1031.html 原文:Creating a Custom WordPress Registration Form Plugin 译文:创建一个定制 ...
- HTML6注册表单输入日志标题
一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...
- form注册表单圆角 demo
form注册表单圆角 <BODY> <div class="form"> <ul class="list"> <li& ...
随机推荐
- 对于springmvc 很奇妙的报404错误的记录
@RequestMapping("/editItems") public ModelAndView editItems(Integer id) throws Exception { ...
- SQL Server 批量 删除表索引
当旧的数据库中的数据几乎很少使用到的时候,索引又占用着较大的磁盘空间,数据又不能删除,又想节省磁盘空间. 这个时候可以将所有表的索引进行删除了(先创建索引备份脚本,以备需要还原),可以批量一起删除. ...
- c#中DataTable和DataSet区别
你可以把DataTable和DataSet看做是数据容器,比如你查询数据库后得到一些结果,可以放到这种容器里,那你可能要问:我不用这种容器,自己读到变量或数组里也一样可以存起来啊,为什么用容器? 原因 ...
- 【学习】020 Redis
Java缓存机制 Java中要用到缓存的地方很多,首当其冲的就是持久层缓存,针对持久层谈一下: 要实现java缓存有很多种方式,最简单的无非就是static HashMap,这个显然是基于内存缓存, ...
- windows 10 安装openssh 0x800f0954 的一种解决方法
安装与卸载参考:https://docs.microsoft.com/zh-cn/windows-server/administration/openssh/openssh_install_first ...
- pyhive
from pyhive import hiveimport pandas as pdimport numpy as npclass myhive(): def __init__(self,hos ...
- jemter简单测试方式
一.简介 Jmeter是一款优秀的开源测试工具, 是每个资深测试工程师,必须掌握的测试工具,熟练使用Jmeter能大大提高工作效率. **开源,他是一款开源的免费软件,使用它你不需要支付任何费用, * ...
- SpringCloud学习系列-Eureka服务注册与发现(4)
actuator与注册微服务信息完善 1.主机名称:服务名称修改 当前问题 含有主机名称 修改修改microservicecloud-provider-dept-8001 的yml文件 修改内容 eu ...
- 通过form提交 django的安全机制
通过form提交 在form表单里面需要添加{%csrf_token%} 这样当你查看页面源码的时候,可以看到form中有一个input是隐藏的 总结原理:当用户访问login页面的时候,会生成一个c ...
- [原创]PHP代码修正之CodeSniffer
目录 参考链接 介绍 安装 使用 命令行模式 PHPStorm 让编辑器使用PSR-2标准 集成phpcbf 参考链接 PHP开发规范之使用phpcbf脚本自动修正代码格式 在PhpStorm中使用P ...