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& ...
随机推荐
- jenkins插件send files or execute commands over ssh插件parameterized publishing选项使用
1.设置一个参数 2.设置label 3.勾选parameterized publishing
- Apache HttpClient 读取响应乱码问题总结
Apache HttpClient 读取响应乱码问题总结 setCharacterEncoding Content-Type HttpClient 起因 最近公司产品线研发人员调整,集中兵力做战 ...
- 【长期计划】Atcoder题目泛做
之前学长跟我说的是700-的应该都能自己做? 然后1000-的应该都能有一定的思路? 记不清了 但总之是要智力康复一下 又加上文化课比较紧 所以这个大概就会是长期计划了 ————————————分鸽线 ...
- 1.使用kubeadm安装kubernetes
一.环境准备 所有规划主机(一台master,两台node)均需操作 1.关闭防火墙,selinux [root@node1 ~]# systemctl stop firewalld [root@no ...
- 【NOIP2016提高A组8.11】种树
题目 分析 题目要求把图删点,删成树. 考虑一下树的定义,点数n=边数m+1 并且,树中点两两之间联通,那么选的点就不能是割点. 可以用tarjan将图中最大的联通块,保证其中点两两之间有不止一条路径 ...
- 多线程之同时更改数据问题--启用lock
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- mysql CHECK约束 语法
mysql CHECK约束 语法 作用:CHECK 约束用于限制列中的值的范围. 直线电机 说明:如果对单个列定义 CHECK 约束,那么该列只允许特定的值.如果对一个表定义 CHECK 约束,那么此 ...
- mysql Update语句 语法
mysql Update语句 语法 作用:用于修改表中的数据.广州大理石机械构件 语法:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 mysql Update语句 示例 ...
- HDU 6620 Just an Old Puzzle
Time limit 2000 ms Memory limit 262144 kB OS Windows 解题过程 感觉搜索不可行,状态太多了,120步,判断状态是否重复时,即使用std::map也太 ...
- 官方文档翻译-Today
原文链接: Today 最后更新:2017-02-18 译文: 应用的今日视图扩展被称作小部件.小部件为用户提供快速访问重要信息的入口.例如,用户打开今日视图实时查看股票价格或天气情况,查看今天的日程 ...