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 相关文章推荐
jquery ajax提交表单数据的两种实现方法
Apr 29 Javascript
基于jQuery实现的水平和垂直居中的div窗口
Aug 08 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
微信小程序 封装http请求实例详解
Jan 16 Javascript
webpack 单独打包指定JS文件的方法
Feb 22 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
vue-cli3中vue.config.js配置教程详解
May 29 Javascript
详解elementUI中input框无法输入的问题
Apr 27 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 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制作百度词典查词采集器
2015/01/29 PHP
codeigniter中实现一次性加载多个view的方法
2015/03/20 PHP
高质量PHP代码的50个实用技巧必备(下)
2016/01/22 PHP
php微信开发之关注事件
2018/06/14 PHP
一个收集图片的bookmarlet(js 刷新页面中的图片)
2010/05/27 Javascript
基于Jquery的仿照flash放大图片效果代码
2011/03/16 Javascript
jquery怎样实现ajax联动框(一)
2013/03/08 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
2017/04/18 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
js实现数字跳动到指定数字
2020/08/25 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
2020/11/12 Javascript
python 实现上传图片并预览的3种方法(推荐)
2017/07/14 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Python自定义函数实现求两个数最大公约数、最小公倍数示例
2018/05/21 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
pow在python中的含义及用法
2019/07/11 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
Python HTMLTestRunner可视化报告实现过程解析
2020/04/10 Python
AmazeUI底部导航栏与分享按钮的示例代码
2020/08/18 HTML / CSS
美国知名奢侈美容品牌零售商:Cos Bar
2017/04/21 全球购物
Smashbox英国官网:美国知名彩妆品牌
2017/11/13 全球购物
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
交通事故起诉书
2015/05/19 职场文书
基石观后感
2015/06/12 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
五年级作文之成长
2019/09/16 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
vue-cil之axios的二次封装与proxy反向代理使用说明
2022/04/07 Vue.js