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插件分享之气泡形提示控件grumble.js
May 20 Javascript
jQuery中:has选择器用法实例
Dec 30 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
Aug 13 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
JS简单实现DIV相对于浏览器固定位置不变的方法
Jun 17 Javascript
jQuery EasyUI tree 使用拖拽时遇到的错误小结
Oct 10 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Angularjs实现页面模板清除的方法
Jul 20 Javascript
js实现图片上传到服务器和回显
Jan 19 Javascript
JS实现放烟花效果
Mar 10 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实现定时执行任务的方法
2014/10/05 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
Laravel 队列使用的实现
2019/01/08 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
每天一篇javascript学习小结(Boolean对象)
2015/11/12 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
2016/09/19 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
微信小程序 安全包括(框架、功能模块、账户使用)详解
2017/01/16 Javascript
react-native-video实现视频全屏播放的方法
2018/03/19 Javascript
在Vue组件中获取全局的点击事件方法
2018/09/06 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
python 输出一个两行字符的变量
2009/02/05 Python
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
python递归打印某个目录的内容(实例讲解)
2017/08/30 Python
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
python实现视频分帧效果
2019/05/31 Python
Django组件cookie与session的具体使用
2019/06/05 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Mac 使用python3的matplot画图不显示的解决
2019/11/23 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
Paul’s Boutique官网:英国时尚手袋品牌
2018/03/31 全球购物
《姥姥的剪纸》教学反思
2014/02/25 职场文书
党员干部承诺书范文
2014/03/25 职场文书
2014年高校辅导员工作总结
2014/12/09 职场文书
2015年安全员工作总结范文
2015/04/22 职场文书
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang
Nginx内网单机反向代理的实现
2021/11/07 Servers
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技