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的一种模块模式
Mar 22 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
jquery select 设置默认选中的示例代码
Feb 07 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
vue中data里面的数据相互使用方式
Jun 05 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
搜索和替换文件或目录的一个好类--很实用
2006/10/09 PHP
三种php连接access数据库方法
2013/11/11 PHP
PHP实现简单数字分页效果
2015/07/26 PHP
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
2014/03/25 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
vue利用axios来完成数据的交互
2018/03/23 Javascript
Vue在页面右上角实现可悬浮/隐藏的系统菜单
2018/05/04 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
vue elementUI table 自定义表头和行合并的实例代码
2019/05/22 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
vue将文件/图片批量打包下载zip的教程
2020/10/21 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python基于tkinter canvas实现图片裁剪功能
2020/11/05 Python
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
超市业务员岗位职责
2013/12/05 职场文书
关于人生的感言
2014/01/17 职场文书
在校生自我鉴定
2014/01/23 职场文书
自荐书4要点
2014/01/25 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
元旦文艺汇演主持词
2014/03/26 职场文书
商务助理求职信范文
2014/04/20 职场文书
爱情保证书大全
2014/04/29 职场文书
开工仪式策划方案
2014/05/23 职场文书
培训讲师开场白
2015/06/01 职场文书
高中政治教师教学反思
2016/02/23 职场文书