vue复合组件实现注册表单功能
2017-11-06 11:08
971 查看
本文实例为大家分享了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动态绑定组件子父组件多表单验证功能的实现代码
- javascript实现较全功能注册表单
- vue.js实现用户评论、登录、注册、及修改信息功能
- vue.js通过子组件通信和父子组件通信实现动态表单动态绑定事件(适合交互系统统一使用)
- vue.js实现用户评论、登录、注册、及修改用户部分信息功能代码。
- PHP实现登录注册之BootStrap表单功能
- vue项目实现表单登录页保存账号和密码到cookie功能
- vue项目实现表单登录页保存账号和密码到cookie功能
- vue中子组件向父组件传递数据的实例代码(实现加减功能)
- Vue + Element UI 实现权限管理系统 前端篇(七):功能组件封装
- vue裁切预览组件功能的实现步骤
- thinkphp中create()方法实现简单的用户注册表单验证功能
- Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
- Servlet的5种方式实现表单提交(注册小功能),后台获取表单数据
- 超酷HTML5和CSS3实现的登录及其注册功能表单
- 仅一个form表单 js实现注册信息依次填写提交功能
- 超酷HTML5和CSS3实现的登录及其注册功能表单
- 基于Vue2x实现响应式自适应轮播组件插件VueSliderShow功能
- JavaScript实现表单注册、表单验证、运算符功能
- vue非父子组件通信(以实现全局“回到顶部”功能为例)