Rumah hujung hadapan web tutorial js vue组件注册表单

vue组件注册表单

Apr 14, 2018 pm 05:45 PM
mendaftar komponen bentuk

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

<!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:'<p>源于纯净,归于健康</p>'
  })
  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>
Salin selepas log masuk
<!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>
Salin selepas log masuk

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

推荐阅读:

vue如何调用mock数据

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

Atas ialah kandungan terperinci vue组件注册表单. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Arahan sembang dan cara menggunakannya
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mendaftar berbilang akaun di Xiaohongshu? Adakah saya akan ditemui jika saya mendaftar berbilang akaun? Bagaimana untuk mendaftar berbilang akaun di Xiaohongshu? Adakah saya akan ditemui jika saya mendaftar berbilang akaun? Mar 25, 2024 am 09:41 AM

Sebagai platform yang menyepadukan rangkaian sosial dan e-dagang, Xiaohongshu telah menarik lebih ramai pengguna untuk menyertainya. Sesetengah pengguna berharap untuk mendaftar berbilang akaun untuk pengalaman yang lebih baik berinteraksi dengan Xiaohongshu. Jadi, bagaimana untuk mendaftar berbilang akaun di Xiaohongshu? 1. Bagaimana untuk mendaftar berbilang akaun di Xiaohongshu? 1. Gunakan nombor telefon mudah alih yang berbeza untuk mendaftar Pada masa ini, Xiaohongshu terutamanya menggunakan nombor telefon bimbit untuk mendaftar akaun. Pengguna kadangkala cuba membeli berbilang kad nombor telefon mudah alih dan menggunakannya untuk mendaftar berbilang akaun Xiaohongshu. Walau bagaimanapun, pendekatan ini mempunyai beberapa had, kerana membeli berbilang kad nombor telefon mudah alih adalah menyusahkan dan mahal. 2. Gunakan e-mel untuk mendaftar Selain nombor telefon bimbit anda, e-mel anda juga boleh digunakan untuk mendaftar akaun Xiaohongshu. Pengguna boleh menyediakan berbilang alamat e-mel dan kemudian menggunakan alamat e-mel ini untuk mendaftar akaun. tetapi

Cara mendaftar akaun Manwa Comics Cara mendaftar akaun Manwa Comics Feb 28, 2024 am 08:00 AM

Pada platform Komik Manwa, terdapat sumber komik yang kaya menunggu untuk diterokai oleh semua orang. Selagi anda mudah memasuki platform rasmi Komik Manwa, anda boleh menikmati semua jenis karya komik yang menarik. Semua orang boleh dengan mudah mencari komik kegemaran mereka untuk dibaca mengikut pilihan mereka sendiri. Jadi bagaimana untuk mendaftar akaun rasmi Komik Manwa? Editor laman web ini akan membawakan anda panduan tutorial terperinci ini, dengan harapan dapat membantu semua orang yang memerlukan. Pintu masuk rasmi Komik Manwa: https://fuw11.cc/mw666 Alamat muat turun aplikasi Komik Manwa: https://www.siemens-home.cn/soft/74440.html Pintu masuk bukan kawasan tanah besar Manwa Comics: https: /

Bagaimana untuk menyemak perkara yang didaftarkan dengan nombor telefon bimbit 'Penjelasan terperinci: Kaedah pertanyaan APP untuk pendaftaran nombor telefon bimbit' Bagaimana untuk menyemak perkara yang didaftarkan dengan nombor telefon bimbit 'Penjelasan terperinci: Kaedah pertanyaan APP untuk pendaftaran nombor telefon bimbit' Feb 07, 2024 am 08:24 AM

Saya tidak tahu sama ada anda mempunyai pengalaman sedemikian Telefon mudah alih anda sering menerima beberapa mesej teks yang tidak dapat dijelaskan, atau maklumat pendaftaran untuk beberapa tapak web atau maklumat pengesahan lain, nombor telefon mudah alih kami mungkin terikat pada banyak tapak web yang tidak dikenali diri kita Walaupun anda tidak tahu, apa yang saya akan kongsikan dengan anda hari ini adalah untuk mengajar anda cara menyahikat semua tapak web yang tidak dikenali dengan satu klik. Langkah 1: Buka platform perkhidmatan nombor Teknik ini sangat praktikal. Langkah-langkahnya adalah seperti berikut: Buka WeChat, klik ikon tambah dalam kotak carian, pilih Tambah Rakan, dan kemudian masukkan platform perkhidmatan nombor kod untuk mencari. Kita dapat melihat bahawa terdapat platform perkhidmatan nombor Sudah tentu, ia adalah milik institusi awam dan telah dilancarkan oleh Institut Teknologi Maklumat dan Komunikasi Negara Ia boleh membantu semua orang melepaskan maklumat nombor telefon bimbit dengan satu klik. Langkah 2: Semak sama ada telefon telah ditandakan untuk saya

Bagaimana untuk mendaftar akaun Xiaohongshu? Apakah yang diperlukan untuk mendaftar akaun Xiaohongshu? Bagaimana untuk mendaftar akaun Xiaohongshu? Apakah yang diperlukan untuk mendaftar akaun Xiaohongshu? Mar 22, 2024 am 10:16 AM

Xiaohongshu, platform sosial yang menyepadukan kehidupan, hiburan, membeli-belah dan perkongsian, telah menjadi bahagian yang sangat diperlukan dalam kehidupan seharian ramai orang muda. Jadi, bagaimana untuk mendaftar akaun Xiaohongshu? 1. Bagaimana untuk mendaftar akaun Xiaohongshu? 1. Buka laman web rasmi Xiaohongshu atau muat turun APP Xiaohongshu. Klik butang "Daftar" di bawah dan anda boleh memilih kaedah pendaftaran yang berbeza. Pada masa ini, Xiaohongshu menyokong pendaftaran dengan nombor telefon mudah alih, alamat e-mel dan akaun pihak ketiga (seperti WeChat, QQ, Weibo, dll.). 3. Isikan maklumat yang berkaitan. Mengikut kaedah pendaftaran yang dipilih, isikan nombor telefon bimbit, alamat e-mel atau maklumat akaun pihak ketiga yang sepadan. 4. Tetapkan kata laluan. Tetapkan kata laluan yang kukuh untuk memastikan akaun anda selamat. 5. Lengkapkan pengesahan. Ikut gesaan untuk melengkapkan pengesahan telefon mudah alih atau pengesahan e-mel. 6. Menyempurnakan individu

Bagaimana untuk mendaftar 163 e-mel Bagaimana untuk mendaftar 163 e-mel Feb 14, 2024 am 09:20 AM

Sesetengah pengguna mendapati bahawa mereka tidak mempunyai akaun apabila mereka ingin menggunakan peti mel 163 Jadi apakah yang perlu mereka lakukan jika mereka perlu mendaftar akaun pada masa ini? Sekarang mari kita lihat kaedah pendaftaran e-mel 163 yang dibawa oleh editor. 1. Mula-mula, cari laman web rasmi 163 E-mel dalam pelayar dan klik [Daftar akaun baharu] pada halaman 2. Kemudian pilih [E-mel Percuma] atau [E-mel VIP]; dan klik [Sekarang Hanya daftar];

Bagaimana untuk mendaftar akaun Xiaohongshu? Bagaimana untuk memulihkan jika akaunnya tidak normal? Bagaimana untuk mendaftar akaun Xiaohongshu? Bagaimana untuk memulihkan jika akaunnya tidak normal? Mar 21, 2024 pm 04:57 PM

Sebagai salah satu platform perkongsian gaya hidup paling popular di dunia, Xiaohongshu telah menarik sejumlah besar pengguna. Jadi, bagaimana untuk mendaftar akaun Xiaohongshu? Artikel ini akan memperkenalkan anda kepada proses pendaftaran akaun Xiaohongshu secara terperinci, dan menjawab soalan tentang cara memulihkan akaun Xiaohongshu yang tidak normal. 1. Bagaimana untuk mendaftar akaun Xiaohongshu? 1. Muat turun APP Xiaohongshu: Cari dan muat turun APP Xiaohongshu dalam gedung aplikasi mudah alih, dan bukanya selepas pemasangan selesai. 2. Daftar akaun: Selepas membuka APP Xiaohongshu, klik butang "Saya" di penjuru kanan sebelah bawah halaman utama, dan kemudian pilih "Daftar". 3. Isikan maklumat pendaftaran: Isikan nombor telefon bimbit, tetapkan kata laluan, kod pengesahan dan maklumat pendaftaran lain mengikut arahan. 4. Lengkapkan maklumat peribadi: Selepas pendaftaran berjaya, ikut gesaan untuk melengkapkan maklumat peribadi, seperti nama, jantina, hari lahir, dsb. 5. Tetapan

Bagaimana untuk mendaftar akaun qooapp Bagaimana untuk mendaftar akaun qooapp Mar 19, 2024 pm 08:58 PM

qooapp adalah perisian yang boleh memuat turun banyak permainan, jadi bagaimana untuk mendaftar akaun Pengguna perlu mengklik butang "Daftar" jika mereka belum mempunyai pas, dan kemudian memilih kaedah pendaftaran. Pengenalan kaedah pendaftaran akaun ini sudah cukup untuk memberitahu anda cara mengendalikannya. Berikut adalah pengenalan terperinci, jadi sila lihat. Bagaimana untuk mendaftar akaun qooapp? 2. Kemudian pilih kaedah log masuk yang anda perlukan. 3. Anda boleh menggunakannya terus selepas itu. Pendaftaran laman web rasmi: 1. Buka laman web https://apps.ppaooq.com/ dan klik pada sudut kanan atas untuk mendaftar. 2. Pilih pendaftaran

Cara memasang komponen versi lama Windows 10 DirectPlay Cara memasang komponen versi lama Windows 10 DirectPlay Dec 28, 2023 pm 03:43 PM

Ramai pengguna sentiasa menghadapi beberapa masalah apabila bermain beberapa permainan di win10, seperti skrin membeku dan skrin kabur Pada masa ini, kami boleh menyelesaikan masalah dengan menghidupkan fungsi directplay, dan kaedah operasi fungsi itu juga Sangat mudah. Cara memasang directplay, komponen lama win10 1. Masukkan "Panel Kawalan" dalam kotak carian dan bukanya 2. Pilih ikon besar sebagai kaedah tontonan 3. Cari "Program dan Ciri" 4. Klik di sebelah kiri untuk membolehkan atau matikan fungsi menang 5. Pilih versi lama di sini Hanya tandakan kotak

See all articles