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& ...
随机推荐
- gradle上sourceSets配置&同名文件合并问题
gradle的sourceSets可以对不同的buildType, productFlavor,buildVariant设置不同的文件路径,进行多样化处理. sourceSets{ main{ man ...
- python-xss攻击和单例模式
1.python中单例模式 class Foo: instance = None def __new__(cls, *args, **kwargs): if not Foo.instance: Foo ...
- SQL常见面试题-行列互换
有一个SQL题在面试中出现的概率极高,最近有学生出去面试仍然会遇到这样的题目,在这里跟大家分享一下. 题目:数据库中有一张如下所示的表,表名为sales. 年 季度 销售量 1991 1 11 1 ...
- linux Apache 日志轮询
安装日志轮询工具 cronolog [root@Nagios-Server tools]# wgethttp://cronolog.org/download/cronolog-1.6.2.tar.gz ...
- 基于TCP/UDP协议的socket
基于TCP协议的socket tcp是基于链接的,必须先启动服务端,然后再启动客户端去链接服务端 server端 import socket sk = socket.socket() sk.bind( ...
- Ubuntu18 给terminal改个漂亮的命令行提示符
重新安装了VMware和Ubuntu,但是命令行提示符太单调,不美观,如何更改呢.于是在网上巴拉巴拉搜寻一番. 1.更改PS1环境变量,这俩都可以,我选择第一个: export PS1="\ ...
- Ubuntu 16.04 安装摄像头驱动usb_cam
!!需要在ROS平台上安装 ROS见 https://www.cnblogs.com/haijian/p/8782560.html cd ~/catkin_ws/src 下载usb_cam包 gi ...
- Docker(三)：Docker入门教程-CentOS Docker 安装
CentOS Docker 安装 Docker支持以下的CentOS版本: CentOS 7 (64-bit) CentOS 6.5 (64-bit) 或更高的版本 前提条件 目前,CentOS 仅发 ...
- 【usaco 2013 open yinyang】阴阳
题目 Farmer John 正在在计划自己的农场漫步.他的农场的结构就像一棵树:农场有N个谷仓(1<= N <=100,000),分别由N-1条路链接.这样,他便可以通过这些谷仓间的道路 ...
- 【GDOI2016模拟3.10】习用之语
前言 这道题看上去很水,结果我在比赛上浪费了N多时间在上面,但还是没AC.比赛结束后发现:实际上这道题还是是大水. 题目 分析 设字符串c1c2c3c4,其中c1.c2.c3.c4={'0'~'9', ...