vue复合组件实现注册表单功能


Posted in Javascript onNovember 06, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
Mar 31 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
Feb 23 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
基于Vue实现微信小程序的图文编辑器
Jul 25 Javascript
vuex入门最详细整理
Mar 04 Javascript
VSCode插件安装完成后的配置(常用配置)
Aug 24 Javascript
JS中队列和双端队列实现及应用详解
Sep 29 Javascript
在vue中嵌入外部网站的实现
Nov 13 Javascript
基于vue组件实现猜数字游戏
May 28 #Javascript
vue路由嵌套的SPA实现步骤
Nov 06 #Javascript
vue综合组件间的通信详解
Nov 06 #Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 #Javascript
详解基于vue-cli优化的webpack配置
Nov 06 #Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 #Javascript
js中apply与call简单用法详解
Nov 06 #Javascript
You might like
php中文本操作的类
2007/03/17 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
第三章 php操作符与控制结构代码
2011/12/30 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
Nginx实现反向代理
2017/09/20 Servers
用javascript实现分割提取页面所需内容
2007/05/09 Javascript
用js的for循环获取radio选中的值
2013/10/21 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
js闭包实例汇总
2014/11/09 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
Jquery Easyui表单组件Form使用详解(30)
2016/12/19 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
2017/08/17 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
Python中使用不同编码读写txt文件详解
2015/05/28 Python
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
Python入门_浅谈for循环、while循环
2017/05/16 Python
python模糊图片过滤的方法
2018/12/14 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
3D动画《斗罗大陆》上线当日播放过亿
2021/03/16 国漫
财务管理专业应届毕业生求职信
2013/09/22 职场文书
大四本科生的自我评价
2013/12/30 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
乡党政领导班子群众路线教育实践活动个人对照检查材料
2014/09/20 职场文书
项目合作协议书
2014/09/23 职场文书
乡镇党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
教师节领导致辞
2015/07/29 职场文书
《仙剑客栈2》第一弹正式宣传片公开 年内发售
2022/04/07 其他游戏
小喇叭开始广播了! 四十多年前珍贵老照片
2022/05/09 无线电