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& ...
随机推荐
- Spring基础10——Bean之间关系
1.前言 不同的Bean之间存在两种关系:继承和依赖,这里的继承与java中的继承不同,它指的是配置上的继承. 2.继承bean配置 Spring允许继承bean的配置,被继承的bean成为父bean ...
- mysql基础知识和pymysql
一.视图 视图是指计算机数据库中的视图,是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的 ...
- Linux之文件内容查阅
1. 直接查看文件内容 (1)cat命令,由第一行开始显示文件内容 -b,列出行号,仅显示出非空白行,空白行不标行号 -n,列出行号,空白行也会标行号 (2)tac命令,由最后一行到第一行反向在屏幕上 ...
- 【学习】020 Redis
Java缓存机制 Java中要用到缓存的地方很多,首当其冲的就是持久层缓存,针对持久层谈一下: 要实现java缓存有很多种方式,最简单的无非就是static HashMap,这个显然是基于内存缓存, ...
- python3-安装第三方模块
在Python中,安装第三方模块,是通过包管理工具pip完成的. 如果你正在使用Mac或Linux,安装pip本身这个步骤就可以跳过了. 如果你正在使用Windows,请参考安装Python一节的内容 ...
- POJ 3741 Raid （平面最近点对）
$ POJ~3741~Raid $ (平面最近点对) $ solution: $ 有两种点,现在求最近的平面点对.这是一道分治板子,但是当时还是想了很久,明明知道有最近平面点对,但还是觉得有点不对劲. ...
- DevExpress ASP.NET Core Controls 2019发展蓝图（No.5)
本文主要为大家介绍DevExpress ASP.NET Core Controls 2019年的官方发展蓝图,更多精彩内容欢迎持续收藏关注哦~ [DevExpress ASP.NET Controls ...
- 未能写入输出文件“c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\......”--“拒绝访问。 ”错误
1.通常的解决方法:原因是由于系统目录下的Temp目录无相应的权限所致,具体操作如下: C:\Windows\temp-->属性-->安全-->编辑-->添加NETWORK S ...
- js的字符串是数字时过长的时候会被截断
JavaScript能表示并进行精确算术运算的整数范围为:正负2的53次方,也即从最小值-9007199254740992到最大值+9007199254740992之间的范围:对于超过这个范围的整数, ...
- 内核热patch
如下代码是一个内核patch #include <linux/init.h> #include <linux/module.h> #include <linux/modu ...