登录  /  注册
首页 > web前端 > js教程 > 正文

vue组件注册表单

php中世界最好的语言
发布: 2018-04-14 17:45:13
原创
1730人浏览过

这次给大家带来vue组件注册表单,vue组件注册表单的注意事项有哪些,下面就是实战案例,一起来看一下。

nbsp;html>

 
 <meta>
 <title></title>
  <script></script>
 
 
 <p>
    </p><p>{{msg}}</p>
    <my-article></my-article>
  
  <script>
    //要采用组件化的方式来编写页面,
  // 把任何一个可被重用的元素封装成组件
  // everything is component
  Vue.component("my-title",{
    template:`<p>
          <h1>清风手纸
          <h4>原木
    `
  })
  Vue.component("my-content",{
  //一个就可以用引号或者``
    template:&#39;<p>源于纯净,归于健康&#39;
  })
  Vue.component("my-article",{
    //当调用多个组件时要用``符号,而且要用顶层标签包含
    template:`
      <p>
        <my-title>
        <my-content>
      
    `
  })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 
登录后复制
nbsp;html&gt;

 
 <meta>
 <title></title>
  <script></script>
 
 
 <p>
    </p><p>{{msg}}</p>
    <!--调用根组件 -->
    <my-form></my-form>
  
  <script>
    //创建组件my-user
    Vue.component("my-user",{
      template:`
        <label>用户名:
      `
    })
    Vue.component("user-input",{
      template:`
        <input type="text" placeholder="请输入用户名"/>
      `
    })
    Vue.component("my-pwd",{
      template:`
        <label>密码:
      `
    })
    Vue.component("pwd-input",{
      template:`
        <input type="text" placeholder="请输入密码"/>
      `
    })
    Vue.component("my-login",{
      template:`
        <button>登录
      `
    })
    Vue.component("my-resign",{
      template:`
        <button>注册
      `
    })
    //复合组件作为根组件名字必须是烤串式的,驼峰的会报错
    Vue.component("my-form",{
    //可以用table、form、p等……
      template:`
        <form>
          <my-user>
          <user-input>
          <br>
          <my-pwd>
          <pwd-input>
          <br>      
          <my-resign>
          <my-login>
              //写法或者
                 <my-login/>
        
      `
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 
登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

vue如何调用mock数据

js字符串indexof与search使用时有什么区别

以上就是vue组件注册表单的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
相关标签:
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号