Detailed example of Vue composite component to implement registration form function-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Detailed example of Vue composite component to implement registration form function

Dec 26, 2017 pm 02:05 PM

accomplish components

This article mainly introduces the Vue composite component to realize the registration form function in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

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

Copy after login

&lt;!doctype html&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;UTF-8&quot;&gt;
 &lt;title&gt;&lt;/title&gt;
  &lt;script src=&quot;js/vue.js&quot;&gt;&lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;p id=&quot;container&quot;&gt;
    &lt;p&gt;{{msg}}&lt;/p&gt;
    &lt;!--调用根组件 --&gt;
    &lt;my-form&gt;&lt;/my-form&gt;
  &lt;/p&gt;
  &lt;script&gt;
    //创建组件my-user
    Vue.component(&quot;my-user&quot;,{
      template:`
        &lt;label&gt;用户名：&lt;/label&gt;
      `
    })
    Vue.component(&quot;user-input&quot;,{
      template:`
        &lt;input type=&quot;text&quot; placeholder=&quot;请输入用户名&quot;/&gt;
      `
    })
    Vue.component(&quot;my-pwd&quot;,{
      template:`
        &lt;label&gt;密码：&lt;/label&gt;
      `
    })
    Vue.component(&quot;pwd-input&quot;,{
      template:`
        &lt;input type=&quot;text&quot; placeholder=&quot;请输入密码&quot;/&gt;
      `
    })
    Vue.component(&quot;my-login&quot;,{
      template:`
        &lt;button&gt;登录&lt;/button&gt;
      `
    })
    Vue.component(&quot;my-resign&quot;,{
      template:`
        &lt;button&gt;注册&lt;/button&gt;
      `
    })
    //复合组件作为根组件名字必须是烤串式的,驼峰的会报错
    Vue.component(&quot;my-form&quot;,{
    //可以用table、form、p等……
      template:`
        &lt;form&gt;
          &lt;my-user&gt;&lt;/my-user&gt;
          &lt;user-input&gt;&lt;/user-input&gt;
          &lt;br&gt;
          &lt;my-pwd&gt;&lt;/my-pwd&gt;
          &lt;pwd-input&gt;&lt;/pwd-input&gt;
          &lt;br&gt;      
          &lt;my-resign&gt;&lt;/my-resign&gt;
          &lt;my-login&gt;&lt;/my-login&gt;
　　　　　　　　　　　 　　//写法或者
   　　　　　　　　　　　　　　&lt;my-login/&gt;
        &lt;/form&gt;
      `
    })
    new Vue({
      el:&quot;#container&quot;,
      data:{
        msg:&quot;Hello VueJs&quot;
      }
    })
  &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

Copy after login

Related recommendations:

How to use html and css to implement the registration form A simple example

How to implement the verification of the registration form in JavaScript Example analysis (picture)

Using jQuery validate to verify the registration form Example_ jquery

The above is the detailed content of Detailed example of Vue composite component to implement registration form function. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn