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& ...
随机推荐
- Springboot 打jar包项目无法访问jsp问题解决方案
maven编译插件,请选择1.4.2.RELEASE版本,1.5.x的版本已经不再支持 pom.xml重要部分如下: <build> <resources> <resou ...
- 对Xcode菜单选项的详细探索(来自董铂然的微博http://www.cnblogs.com/dsxniubility/p/4983614.html)
本文调研Xcode的版本是 7.1,基本是探索了菜单的每一个按钮.虽然从xcode4一直用到了xcode7,但是一般都只是用了一些基础的功能,说来也惭愧.在一次偶然的机遇突然发现了“显示调用层级”的选 ...
- Linux vim程序编辑器
Tips: 在 vi 里面, [tab] 这个按钮所得到的结果与空格符所得到的结果是不一样的,特别强调一下! 一般模式 移动光标 30↓ 向下移动30行 40→ 向右移动40个字符 gg 移动到档案第 ...
- ubuntu下安装3.6.5
1.下载python3.6.5安装包 地址:https://www.python.org/ftp/python/3.6.5/Python-3.6.5.tgz 解压:tar -xvzf Python-3 ...
- 矩阵快速幂 求斐波那契第N项
#include<cstdio> #include<algorithm> #include<cstring> #include<iostream> us ...
- so 调用
dlsym dlopen dlclose
- test dword ptr [eax],eax ; probe page.局部数组变量定义所分配的最大空间为1M
问题的出现 使用VS2017编写程序时,程序编译可以通过,但运行时就会弹出错误 经过查证发现: 这跟局部数组变量定义所分配的最大空间设置大小有关. 局部变量的申请空间是存放于栈中,windows里默认 ...
- 微信 PHP － SDK 包
下载 个人公众号谢谢各位老铁支持
- java 工具包
https://www.cnblogs.com/aligege/p/8521934.html https://gitee.com/loolly/hutool https://blog.csdn.net ...
- 转载--C 的回归
转载自http://blog.codingnow.com/2007/09/c_vs_cplusplus.html 周末出差,去另一个城市给公司的一个项目解决点问题.回程去机场的路上,我用手机上 goo ...