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 相关文章推荐
JavaScript Cookie 直接浏览网站分网址
Dec 08 Javascript
Jquey拖拽控件Draggable使用方法(asp.net环境)
Sep 28 Javascript
jquery 获取表单元素里面的值示例代码
Jul 28 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
Jun 27 Javascript
javascript获取checkbox复选框获取选中的选项
Aug 12 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript实现网页背景烟花效果的方法
Aug 06 Javascript
利用HTML5+Socket.io实现摇一摇控制PC端歌曲切换
Jan 13 Javascript
浅谈Webpack自动化构建实践指南
Dec 18 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
浅析vue中的nextTick
Dec 28 Vue.js
基于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/04/12 PHP
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
js更优雅的兼容
2010/08/12 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
jquery写个checkbox——类似邮箱全选功能
2013/03/19 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
node.js中的events.emitter.once方法使用说明
2014/12/10 Javascript
Jquery1.9.1源码分析系列(十五)动画处理之外篇
2015/12/04 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
ES6中箭头函数的定义与调用方式详解
2017/06/02 Javascript
微信小程序tabBar用法实例详解
2017/12/04 Javascript
pm2发布node配置文件ecosystem.json详解
2019/05/15 Javascript
JavaScript使用面向对象实现的拖拽功能详解
2019/06/12 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
各个系统下的Python解释器相关安装方法
2015/10/12 Python
python中类变量与成员变量的使用注意点总结
2017/04/29 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python安装tar.gz格式文件方法详解
2020/01/19 Python
解决jupyter notebook显示不全出现框框或者乱码问题
2020/04/09 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
个人自我鉴定范文
2013/10/04 职场文书
物理系毕业生自荐书范文
2014/02/22 职场文书
法制宣传口号
2014/06/16 职场文书
团队拓展活动方案
2014/08/28 职场文书
领导班子四风问题对照检查材料
2014/09/27 职场文书
青春雷锋观后感
2015/06/10 职场文书
企业法人任命书
2015/09/21 职场文书
人力资源部工作计划
2019/05/14 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript