Rumah hujung hadapan web tutorial js Vue.js中组件的创建与注册方法的介绍

Vue.js中组件的创建与注册方法的介绍

Aug 23, 2018 pm 04:00 PM
komponen

本篇文章给大家带来的内容是关于Vue.js中组件的创建与注册方法的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

使用之前要创建

在 components 文件下创建一个自己的 组件文件(.vue)

初始结构为

<!--html区域-->
<template>
    
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw"
    }
</script>

<!--css区域-->
<style scoped>

</style>
Salin selepas log masuk

加入自己的代码设置就完成了一个简单的 子组件文件 创建

<!--html区域-->
<template>
    <p class="hw">
      {{ name }}
    </p>
</template>

<!--JS区域-->
<script>
    export default {
        name: "hw",
      data(){
          return {
            name:"毛没齐"
        }
      }
    }
</script>

<!--css区域-->
<style scoped>
.hw{
  color: blue;
}
</style>
Salin selepas log masuk

子组件创建好后 就要注册它,只有注册了才能使用

注册分为 

                1.局部注册组件 :在App.vue文件中注册   也在App.vue文件使用
               

                2.全局注册组件:在main.js文件中注册

全局注册组件后,在 App.vue文件使用

 相关推荐:

 使用 Vue.js 创建的 Calendar_html/css_WEB-ITnose

 什么是Vue.js组件?Vue.js组件用法汇总

Atas ialah kandungan terperinci Vue.js中组件的创建与注册方法的介绍. 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

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

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)

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

Bagaimana untuk melaksanakan komponen kalendar menggunakan Vue? Bagaimana untuk melaksanakan komponen kalendar menggunakan Vue? Jun 25, 2023 pm 01:28 PM

Vue ialah rangka kerja bahagian hadapan yang sangat popular Ia menyediakan banyak alat dan fungsi, seperti pembahagian, pengikatan data, pemprosesan acara, dll., yang boleh membantu pembangun membina aplikasi Web yang cekap, fleksibel dan mudah diselenggara. Dalam artikel ini, saya akan memperkenalkan cara melaksanakan komponen kalendar menggunakan Vue. 1. Analisis keperluan Pertama, kita perlu menganalisis keperluan komponen kalendar ini. Kalendar asas harus mempunyai fungsi berikut: memaparkan halaman kalendar bulan semasa bertukar kepada bulan sebelumnya atau bulan hadapan dengan mengklik pada hari tertentu;

Asas pembangunan VUE3: menggunakan lanjutan untuk mewarisi komponen Asas pembangunan VUE3: menggunakan lanjutan untuk mewarisi komponen Jun 16, 2023 am 08:58 AM

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini, dan VUE3 ialah versi terkini rangka kerja Vue Berbanding dengan VUE2, VUE3 mempunyai prestasi yang lebih tinggi dan pengalaman pembangunan yang lebih baik, dan telah menjadi pilihan pertama banyak pembangun. Dalam VUE3, menggunakan extends untuk mewarisi komponen ialah kaedah pembangunan yang sangat praktikal Artikel ini akan memperkenalkan cara menggunakan extends untuk mewarisi komponen. Apa itu extends? Dalam Vue, extends ialah atribut yang sangat praktikal, yang boleh digunakan untuk komponen kanak-kanak diwarisi daripada ibu bapa mereka.

Komponen sudut dan sifat paparannya: memahami lalai bukan blok Komponen sudut dan sifat paparannya: memahami lalai bukan blok Mar 15, 2024 pm 04:51 PM

Tingkah laku paparan lalai untuk komponen dalam rangka kerja Angular bukan untuk elemen peringkat blok. Pilihan reka bentuk ini menggalakkan pengkapsulan gaya komponen dan menggalakkan pembangun untuk secara sedar menentukan cara setiap komponen dipaparkan. Dengan menetapkan paparan sifat CSS secara eksplisit, paparan komponen Sudut boleh dikawal sepenuhnya untuk mencapai reka letak dan responsif yang diingini.

Mari kita bincangkan tentang cara Vue memaparkan komponen secara dinamik melalui JSX Mari kita bincangkan tentang cara Vue memaparkan komponen secara dinamik melalui JSX Dec 05, 2022 pm 06:52 PM

Bagaimanakah Vue memaparkan komponen secara dinamik melalui JSX? Artikel berikut akan memperkenalkan kepada anda bagaimana Vue boleh menghasilkan komponen secara dinamik melalui JSX dengan cekap, saya harap ia akan membantu anda!

Bagaimana untuk membuka tetapan versi lama komponen win10 Bagaimana untuk membuka tetapan versi lama komponen win10 Dec 22, 2023 am 08:45 AM

Komponen versi lama Win10 perlu dihidupkan oleh pengguna sendiri dalam tetapan, kerana banyak komponen biasanya ditutup secara lalai Mula-mula kita perlu memasukkan tetapan yang sangat mudah komponen versi? Buka 1. Klik Start, kemudian klik "Win System" 2. Klik untuk masuk ke Control Panel 3. Kemudian klik program di bawah 4. Klik "Enable or turn off Win functions" 5. Di sini anda boleh memilih apa yang anda mahu untuk membuka

Pembangunan komponen Vue: kaedah pelaksanaan komponen bar kemajuan Pembangunan komponen Vue: kaedah pelaksanaan komponen bar kemajuan Nov 24, 2023 am 08:56 AM

Pembangunan komponen Vue: Kaedah pelaksanaan komponen bar kemajuan Prakata: Dalam pembangunan Web, bar kemajuan ialah komponen UI biasa, yang sering digunakan untuk memaparkan kemajuan operasi dalam senario seperti permintaan data, muat naik fail dan penyerahan borang. Dalam Vue.js, kami boleh melaksanakan komponen bar kemajuan dengan mudah dengan menyesuaikan komponen Artikel ini akan memperkenalkan kaedah pelaksanaan dan menyediakan contoh kod khusus. Saya harap ia akan membantu pemula Vue.js. Struktur dan gaya komponen Pertama, kita perlu mentakrifkan struktur asas dan gaya komponen bar kemajuan.

Amalan komponen Vue: pembangunan komponen halaman Amalan komponen Vue: pembangunan komponen halaman Nov 24, 2023 am 08:56 AM

Amalan komponen Vue: Pengenalan kepada pembangunan komponen halaman Dalam aplikasi web, fungsi halaman adalah komponen penting. Komponen paging yang baik hendaklah ringkas dan jelas dalam persembahan, kaya dengan fungsi, dan mudah untuk disepadukan dan digunakan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue.js untuk membangunkan komponen halaman yang sangat boleh disesuaikan. Kami akan menerangkan secara terperinci cara membangunkan menggunakan komponen Vue melalui contoh kod. Teknologi tindanan Vue.js2.xJavaScript (ES6) HTML5 dan persekitaran pembangunan CSS3

See all articles