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 相关文章推荐
js控制框架刷新
Aug 01 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
深入理解Javascript闭包 新手版
Dec 28 Javascript
js replace正则表达式应用案例讲解
Jan 17 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
整理Javascript数组学习笔记
Nov 29 Javascript
借助node实战JSONP跨域实例
Mar 30 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
layui数据表格实现重载数据表格功能(搜索功能)
Jul 27 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
Jul 17 Javascript
vue中可编辑树状表格的实现代码
Oct 31 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
很实用的一个完整email发送程序
2006/10/09 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP+Ajax实现的检测用户名功能简单示例
2019/02/12 PHP
PHP常用函数之获取汉字首字母功能示例
2019/10/21 PHP
Flash+XML滚动新闻代码 无图片 附源码下载
2007/11/22 Javascript
JavaScript实现动态增加文件域表单
2009/02/12 Javascript
JavaScript 未结束的字符串常量常见解决方法
2010/01/24 Javascript
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
使用impress.js制作幻灯片
2015/09/09 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue里input根据value改变背景色的实例
2018/09/29 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
Python通过websocket与js客户端通信示例分析
2014/06/25 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Python3解释器知识点总结
2019/02/19 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
python虚拟环境的安装和配置(virtualenv,virtualenvwrapper)
2019/08/09 Python
Skyscanner澳大利亚:全球领先的旅游搜索网站
2018/03/24 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
监察建议书格式
2014/05/19 职场文书
公务员党员评议表自我鉴定
2014/09/14 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
花木兰观后感
2015/06/10 职场文书
2016年幼儿园万圣节活动总结
2016/04/05 职场文书
Python基于Opencv识别两张相似图片
2021/04/25 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python
3050和2060哪个好 性能差多少 差距有多大 谁更有性价比
2022/06/17 数码科技