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 Post处理后不进入回调的原因及解决方法
Jul 15 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
node.js中的fs.realpathSync方法使用说明
Dec 16 Javascript
JavaScript 学习笔记之操作符
Jan 14 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
js实现从左向右滑动式轮播图效果
Jul 07 Javascript
vue.js 中使用(...)运算符报错的解决方法
Aug 09 Javascript
微信小程序云开发使用方法新手初体验
May 16 Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 Javascript
Vue2.0搭建脚手架
Mar 13 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
PHP eval函数使用介绍
2013/12/08 PHP
微信access_token的获取开发示例
2015/04/16 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
JavaScript 解析Json字符串的性能比较分析代码
2009/12/16 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
使用javascript创建快捷方式的简单实例
2013/08/09 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
jQuery+ajax简单实现文件上传的方法
2016/06/03 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
2017/06/13 Javascript
Vue添加请求拦截器及vue-resource 拦截器使用
2017/11/23 Javascript
js实现鼠标拖拽缩放div实例代码
2019/03/25 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
python冒泡排序算法的实现代码
2013/11/21 Python
python计算最小优先级队列代码分享
2013/12/18 Python
详细解读Python中解析XML数据的方法
2015/10/15 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
深入浅析Python中list的复制及深拷贝与浅拷贝
2018/09/03 Python
Python中实现单例模式的n种方式和原理
2018/11/14 Python
浅谈python中get pass用法
2019/03/19 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
CSS去掉A标签(链接)虚线框的方法
2014/04/01 HTML / CSS
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
最新的小工具和卓越的产品设计:Oh That Tech!
2019/08/07 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
腾讯技术类校园招聘笔试试题
2014/05/06 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
品质保证书格式
2015/02/28 职场文书
在人间读书笔记
2015/06/30 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技