Heim Web-Frontend js-Tutorial Detailliertes Beispiel einer Vue-Verbundkomponente zur Implementierung der Registrierungsformularfunktion

Detailliertes Beispiel einer Vue-Verbundkomponente zur Implementierung der Registrierungsformularfunktion

Dec 26, 2017 pm 02:05 PM
实现 组件

In diesem Artikel wird hauptsächlich die Vue-Verbundkomponente vorgestellt, um die Registrierungsformularfunktion im Detail zu realisieren. Interessierte Freunde können darauf verweisen.


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


<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="js/vue.js"></script>
 </head>
 <body>
 <p id="container">
    <p>{{msg}}</p>
    <!--调用根组件 -->
    <my-form></my-form>
  </p>
  <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、p等……
      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>
Nach dem Login kopieren

Verwandte Empfehlungen:

Wie man HTML und verwendet CSS So implementieren Sie ein einfaches Beispiel für ein Registrierungsformular

Analyse, wie die Überprüfung des Registrierungsformulars in JavaScript implementiert wird (Bild)

Verwenden Sie jQuery validieren um das Registrierungsformular zu überprüfen, Demonstration_jquery

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel einer Vue-Verbundkomponente zur Implementierung der Registrierungsformularfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So installieren Sie die DirectPlay-Komponente der alten Windows 10-Version So installieren Sie die DirectPlay-Komponente der alten Windows 10-Version Dec 28, 2023 pm 03:43 PM

Viele Benutzer stoßen beim Spielen einiger Spiele unter Win10 immer auf Probleme, wie z. B. ein Einfrieren des Bildschirms und unscharfe Bildschirme. Zu diesem Zeitpunkt können wir das Problem lösen, indem wir die Directplay-Funktion aktivieren, und die Bedienungsmethode der Funktion ist ebenfalls sehr einfach. So installieren Sie DirectPlay, die alte Komponente von Win10 1. Geben Sie „Systemsteuerung“ in das Suchfeld ein und öffnen Sie es. 2. Wählen Sie große Symbole als Anzeigemethode. 3. Suchen Sie nach „Programme und Funktionen“. 4. Klicken Sie links, um oder zu aktivieren Win-Funktionen ausschalten 5. Wählen Sie hier die alte Version aus. Aktivieren Sie einfach das Kontrollkästchen

Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mar 24, 2024 am 11:27 AM

Wie implementiert man die doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen? Mit dem Aufkommen der sozialen Medien ist WeChat zu einem unverzichtbaren Kommunikationsmittel im täglichen Leben der Menschen geworden. Viele Menschen können jedoch auf ein Problem stoßen: Sie können sich gleichzeitig auf demselben Mobiltelefon bei mehreren WeChat-Konten anmelden. Für Huawei-Mobiltelefonbenutzer ist es nicht schwierig, eine doppelte WeChat-Anmeldung zu erreichen. In diesem Artikel wird erläutert, wie eine doppelte WeChat-Anmeldung auf Huawei-Mobiltelefonen erreicht wird. Erstens bietet das EMUI-System, das mit Huawei-Mobiltelefonen geliefert wird, eine sehr praktische Funktion – das doppelte Öffnen von Anwendungen. Durch die doppelte Öffnungsfunktion der Anwendung können Benutzer gleichzeitig

Verwenden Sie Java, um Code zur Implementierung von Liebesanimationen zu schreiben Verwenden Sie Java, um Code zur Implementierung von Liebesanimationen zu schreiben Dec 23, 2023 pm 12:09 PM

Liebesanimationseffekte durch Java-Code realisieren Im Bereich der Programmierung sind Animationseffekte sehr verbreitet und beliebt. Mit Java-Code können verschiedene Animationseffekte erzielt werden, darunter der Herzanimationseffekt. In diesem Artikel wird erläutert, wie Sie mithilfe von Java-Code diesen Effekt erzielen, und es werden spezifische Codebeispiele aufgeführt. Der Schlüssel zum Realisieren des Herzanimationseffekts besteht darin, das herzförmige Muster zu zeichnen und den Animationseffekt durch Ändern der Position und Farbe der Herzform zu erzielen. Hier ist der Code für ein einfaches Beispiel: importjavax.swing.

So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mar 24, 2024 pm 06:03 PM

So implementieren Sie die WeChat-Klonfunktion auf Huawei-Mobiltelefonen Mit der Popularität sozialer Software und der zunehmenden Bedeutung von Datenschutz und Sicherheit rückt die WeChat-Klonfunktion allmählich in den Mittelpunkt der Aufmerksamkeit der Menschen. Die WeChat-Klonfunktion kann Benutzern helfen, sich gleichzeitig bei mehreren WeChat-Konten auf demselben Mobiltelefon anzumelden, was die Verwaltung und Nutzung erleichtert. Es ist nicht schwierig, die WeChat-Klonfunktion auf Huawei-Mobiltelefonen zu implementieren. Sie müssen lediglich die folgenden Schritte ausführen. Schritt 1: Stellen Sie sicher, dass die Version Ihres Mobiltelefonsystems und die WeChat-Version den Anforderungen entsprechen. Stellen Sie zunächst sicher, dass die Version Ihres Huawei-Mobiltelefonsystems sowie die WeChat-App auf die neueste Version aktualisiert wurden.

PHP-Programmierhandbuch: Methoden zur Implementierung der Fibonacci-Folge PHP-Programmierhandbuch: Methoden zur Implementierung der Fibonacci-Folge Mar 20, 2024 pm 04:54 PM

Die Programmiersprache PHP ist ein leistungsstarkes Werkzeug für die Webentwicklung, das eine Vielzahl unterschiedlicher Programmierlogiken und Algorithmen unterstützen kann. Unter diesen ist die Implementierung der Fibonacci-Folge ein häufiges und klassisches Programmierproblem. In diesem Artikel stellen wir vor, wie Sie die Fibonacci-Folge mit der Programmiersprache PHP implementieren, und fügen spezifische Codebeispiele bei. Die Fibonacci-Folge ist eine mathematische Folge, die wie folgt definiert ist: Das erste und das zweite Element der Folge sind 1, und ab dem dritten Element ist der Wert jedes Elements gleich der Summe der beiden vorherigen Elemente. Die ersten paar Elemente der Sequenz

Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen Winkelkomponenten und ihre Anzeigeeigenschaften: Nicht-Block-Standardwerte verstehen Mar 15, 2024 pm 04:51 PM

Das Standardanzeigeverhalten für Komponenten im Angular-Framework gilt nicht für Elemente auf Blockebene. Diese Designwahl fördert die Kapselung von Komponentenstilen und ermutigt Entwickler, bewusst zu definieren, wie jede Komponente angezeigt wird. Durch explizites Festlegen der CSS-Eigenschaft display kann die Anzeige von Angular-Komponenten vollständig gesteuert werden, um das gewünschte Layout und die gewünschte Reaktionsfähigkeit zu erreichen.

So öffnen Sie die Einstellungen der alten Version von Win10-Komponenten So öffnen Sie die Einstellungen der alten Version von Win10-Komponenten Dec 22, 2023 am 08:45 AM

Die alten Win10-Komponenten müssen vom Benutzer selbst aktiviert werden, da viele Komponenten standardmäßig geschlossen sind. Der Vorgang ist sehr einfach Versionskomponenten? Öffnen 1. Klicken Sie auf Start und dann auf „Win-System“. 2. Klicken Sie, um die Systemsteuerung aufzurufen. 3. Klicken Sie dann auf das Programm unten. 4. Klicken Sie auf „Win-Funktionen aktivieren oder deaktivieren“. 5. Hier können Sie auswählen, was Sie möchten öffnen

Meistern Sie, wie Golang Möglichkeiten für die Spieleentwicklung eröffnet Meistern Sie, wie Golang Möglichkeiten für die Spieleentwicklung eröffnet Mar 16, 2024 pm 12:57 PM

Im heutigen Bereich der Softwareentwicklung wird Golang (Go-Sprache) als effiziente, prägnante und hochgradig parallele Programmiersprache von Entwicklern zunehmend bevorzugt. Seine umfangreiche Standardbibliothek und die effizienten Parallelitätsfunktionen machen es zu einer hochkarätigen Wahl im Bereich der Spieleentwicklung. In diesem Artikel wird untersucht, wie man Golang für die Spieleentwicklung verwendet, und seine leistungsstarken Möglichkeiten anhand spezifischer Codebeispiele demonstriert. 1. Golangs Vorteile bei der Spieleentwicklung: Als statisch typisierte Sprache wird Golang beim Aufbau großer Spielsysteme verwendet.

See all articles