Apakah fungsi yang ada pada vuejs?-View.js-php.cn

Jadual Kandungan

Ketahui tentang fungsi asas Vue.js~

1 Pemberian data

2. Syarat dan gelung

Vue menyediakan arahan

Untuk membolehkan pengguna berinteraksi dengan aplikasi anda, kami boleh gunakan

Rumah

hujung hadapan web

View.js

Apakah fungsi yang ada pada vuejs?

青灯夜游

Oct 26, 2021 pm 03:22 PM

vuejs

Fungsi vuejs: 1. Gunakan sintaks templat ringkas untuk mengisytiharkan data ke dalam DOM 2. Gunakan arahan "v-if" dan "v-for" untuk melaksanakan struktur bersyarat dan gelung; arahan v-model" untuk mencapai pengikatan data dua hala; 4. Gunakan pendengar acara untuk mencapai interaksi antara muka; 5. Pembangunan berasaskan komponen, dsb.

Apakah fungsi yang ada pada vuejs?

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

Ketahui tentang fungsi asas Vue.js~

1 Pemberian data

Teras Vue. js ialah menggunakan sintaks templat Ringkas untuk mengisytiharkan data ke dalam DOM!

Contoh 1:

<div id="app">{{ message }}</div>

<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </script>

Ini telah menghasilkan aplikasi vue Kini data dan DOM telah diikat bersama selagi app.message diubah suai dikemas kini dengan sewajarnya.

Contoh 2:

    <div id="app_2">
        <span v-bind:title="message">
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        </span>
    </div>

<script type="text/javascript">
        var app_2=new Vue({
            el:&#39;#app_2&#39;,
            data:{
                message:&#39;You loaded this page on &#39;+new Date()
            }
        })
    </script>

Contoh 2 melibatkan atribut khas Vue arahan v-bind, yang juga akan dipaparkan pada elemen DOM yang sepadan!

2. Syarat dan gelung

Vue bukan sahaja boleh mengikat teks DOM kepada data, tetapi juga mengikat struktur DOM kepada data!

1. Keadaan

Kita boleh menggunakan perintah v-if untuk mencapai tetapan keadaan, dan juga sangat mudah untuk mengawal paparan elemen dalam aplikasi praktikal .

Contoh 3:

<div id="app_3">
  <p v-if="flags">Now you see me</p>
</div>

<script>
        var app_3=new Vue({
            el:&#39;#app_3&#39;,
            data:{
                flags:true
            }
        })
    </script>

Anda juga boleh mengubah suai atribut data untuk mencapai respons.

2. Gelung

Setiap arahan mempunyai fungsi khas Perintah v-for boleh mengikat data tatasusunan untuk menghasilkan senarai >Contoh 4:

<div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

Buka konsol dan masukkan app_3_2

var app_3_2=new Vue({
            el:&#39;#app_3_2&#39;,
            data:{
                todos:[
                    { text:&#39;Learn JavaScript&#39; },
                    { text:&#39;Learn Vue&#39; },
                    { text:&#39;Learn Other &#39; }
                ]
            }
        })

, anda akan mendapati item baharu telah ditambahkan pada senarai.

.todos.push({ text: '新项目' })

3. Pengikatan dua hala

Vue menyediakan arahan

, yang boleh merealisasikan hubungan antara input borang dan keadaan aplikasi dengan mudah . v-model Contoh 5:

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>

var app5 = new Vue({
        el: &#39;#app5&#39;,
        data: {
        　　msg2: &#39;# hello &#39;
     　　}
    })

4 Interaksi antara muka

Untuk membolehkan pengguna berinteraksi dengan aplikasi anda, kami boleh gunakan

Arahan mengikat pendengar acara dan memanggil kaedah yang ditakrifkan dalam contoh Vue kami melaluinya v-on Contoh 6:

     <div id="app6">
         <p>{{message}}</p>
         <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

Nota! : Dalam kaedah kaedah, hanya status dikemas kini dan DOM tidak disentuh

var app6=new Vue({
            el:&#39;#app6&#39;,
            data:{
                message:&#39;Hello Vue.js!&#39;
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
                }
            }
        })

5 Pembinaan komponen (versi mudah)

Pastikan untuk! daftar Komponen pertama, instantiate lagi!

Pastikan anda mendaftarkan komponen sebelum memulakan contoh akar!

Jika tidak, ralat akan dilaporkan jika anda menggunakannya tanpa mendaftar!

　 Komponen ini agak berkuasa, boleh dipanjangkan dan merangkumi kod yang boleh digunakan semula, tetapi ia agak menjengkelkan (*@ο@*) Wow ~ anda mesti biasa dengannya !

Contoh 7:

     <div id="app_7">
         <ol>
            <todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item>
        </ol>
    </div>

Komponen adalah bahagian yang sangat penting Selepas anda biasa dengan kandungan di atas, anda harus mengkaji sistem komponen dengan teliti Ia melibatkan banyak kandungan yang memerlukan penguasaan yang lebih terperinci.

Vue.component(&#39;todo-item&#39;,{
            props:[&#39;todo&#39;],
            template:&#39;<li>{{todo.text}}</li>&#39;
        });
        var app_7=new Vue({
            el:&#39;#app_7&#39;,
            data:{
                itemsList:[
                    {text:&#39;Vegetables&#39;},
                    {text:&#39;Cheese&#39;},
                    {text:&#39;Whatever else humans are supposed to eat&#39;}
                ]
            }
        })

Apabila digunakan dalam projek sebenar, berbilang halaman mempunyai bahagian yang sama dan komponen

digunakan semula

Ia sangat hebat~O(∩_∩)O~~Cadangan berkaitan: "

tutorial vue.js

Atas ialah kandungan terperinci Apakah fungsi yang ada pada vuejs?. 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

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

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

Tunjukkan Lagi

Artikel Panas

Cara melaporkan akaun penyamaran di Instagram

3 minggu yang lalu By 下次还敢

Cara Mengubah Keperibadian ChatGPT dalam Tetapan (Cynic, Robot, Pendengar, Nerd)

2 minggu yang lalu By DDD

Alternatif 123movies terbaik pada tahun 2025 (pilihan streaming percuma & undang -undang)

1 bulan yang lalu By DDD

Cara melawan Eris di neon Abyss

3 minggu yang lalu By Jack chen

Wuchang: Bulu Jatuh - Kaisar Naga Zhu Youja Boss Fight Guide

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial PHP

1595

276

Tunjukkan Lagi

Related knowledge

Beberapa petua untuk membangunkan aplikasi Android menggunakan bahasa Vue.js dan Kotlin Jul 31, 2023 pm 02:17 PM

Beberapa petua untuk membangunkan aplikasi Android menggunakan bahasa Vue.js dan Kotlin Dengan populariti aplikasi mudah alih dan pertumbuhan berterusan keperluan pengguna, pembangunan aplikasi Android telah menarik lebih banyak perhatian daripada pembangun. Apabila membangunkan apl Android, memilih tindanan teknologi yang betul adalah penting. Dalam beberapa tahun kebelakangan ini, bahasa Vue.js dan Kotlin secara beransur-ansur menjadi pilihan popular untuk pembangunan aplikasi Android. Artikel ini akan memperkenalkan beberapa teknik untuk membangunkan aplikasi Android menggunakan bahasa Vue.js dan Kotlin serta memberikan contoh kod yang sepadan. 1. Sediakan persekitaran pembangunan pada permulaan

Penyepaduan bahasa Vue.js dan Lua, amalan terbaik dan perkongsian pengalaman dalam membina enjin bahagian hadapan untuk pembangunan permainan Aug 01, 2023 pm 08:14 PM

Penyepaduan bahasa Vue.js dan Lua, amalan terbaik dan perkongsian pengalaman untuk membina enjin bahagian hadapan untuk pembangunan permainan Pengenalan: Dengan pembangunan berterusan pembangunan permainan, pilihan enjin bahagian hadapan permainan telah menjadi keputusan penting. Antara pilihan ini, rangka kerja Vue.js dan bahasa Lua telah menjadi tumpuan ramai pembangun. Sebagai rangka kerja hadapan yang popular, Vue.js mempunyai ekosistem yang kaya dan kaedah pembangunan yang mudah, manakala bahasa Lua digunakan secara meluas dalam pembangunan permainan kerana prestasinya yang ringan dan cekap. Artikel ini akan meneroka bagaimana untuk

Beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python Jul 31, 2023 pm 07:53 PM

Beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python Pengenalan: Dengan kemunculan era data besar, visualisasi data telah menjadi penyelesaian penting. Dalam pembangunan aplikasi visualisasi data, gabungan Vue.js dan Python boleh memberikan fleksibiliti dan fungsi yang berkuasa. Artikel ini akan berkongsi beberapa petua untuk membangunkan aplikasi visualisasi data menggunakan Vue.js dan Python, dan melampirkan contoh kod yang sepadan. 1. Pengenalan kepada Vue.js Vue.js ialah JavaScript yang ringan

Cara menggunakan Vue untuk melaksanakan kesan gelembung sembang seperti QQ Sep 20, 2023 pm 02:27 PM

Cara menggunakan Vue untuk melaksanakan kesan gelembung sembang seperti QQ Dalam era sosial hari ini, fungsi sembang telah menjadi salah satu fungsi teras aplikasi mudah alih dan aplikasi web. Salah satu elemen yang paling biasa dalam antara muka sembang ialah gelembung sembang, yang boleh membezakan dengan jelas mesej penghantar dan penerima, dengan berkesan meningkatkan kebolehbacaan mesej. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan gelembung sembang seperti QQ dan memberikan contoh kod khusus. Pertama, kita perlu mencipta komponen Vue untuk mewakili gelembung sembang. Komponen ini terdiri daripada dua bahagian utama

Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta Aug 27, 2023 am 11:51 AM

Cara menggunakan PHP dan Vue.js untuk melaksanakan fungsi penapisan dan pengisihan data pada carta Dalam pembangunan web, carta ialah cara yang sangat biasa untuk memaparkan data. Menggunakan PHP dan Vue.js, anda boleh melaksanakan fungsi penapisan dan pengisihan data dengan mudah pada carta, membolehkan pengguna menyesuaikan paparan data pada carta, meningkatkan visualisasi data dan pengalaman pengguna. Pertama, kita perlu menyediakan satu set data untuk carta digunakan. Katakan kita mempunyai jadual data yang mengandungi tiga lajur: nama, umur dan gred Data adalah seperti berikut: Nama, Umur, Gred Zhang San 1890 Li

Bangunkan penyelesaian aplikasi mudah alih dengan sokongan pengantarabangsaan menggunakan bahasa Vue.js dan Kotlin Jul 31, 2023 pm 12:01 PM

Gunakan bahasa Vue.js dan Kotlin untuk membangunkan penyelesaian aplikasi mudah alih dengan sokongan antarabangsa Apabila proses globalisasi semakin pantas, semakin banyak aplikasi mudah alih perlu menyediakan sokongan berbilang bahasa untuk memenuhi keperluan pengguna global. Semasa proses pembangunan, kami boleh menggunakan bahasa Vue.js dan Kotlin untuk melaksanakan fungsi pengantarabangsaan supaya aplikasi boleh berjalan secara normal dalam persekitaran bahasa yang berbeza. 1. Sokongan antarabangsa Vue.js Vue.js ialah rangka kerja JavaScript popular yang menyediakan pelbagai alatan dan ciri.

Penyepaduan bahasa Vue.js dan Dart, kemahiran praktikal dan pembangunan untuk membina antara muka UI aplikasi mudah alih yang hebat Aug 02, 2023 pm 03:33 PM

Penyepaduan bahasa Vue.js dan Dart, amalan dan kemahiran pembangunan untuk membina antara muka UI aplikasi mudah alih yang hebat Pengenalan: Dalam pembangunan aplikasi mudah alih, reka bentuk dan pelaksanaan antara muka pengguna (UI) adalah bahagian yang sangat penting. Untuk mencapai antara muka aplikasi mudah alih yang hebat, kami boleh menyepadukan Vue.js dengan bahasa Dart, dan menggunakan ciri pengikatan data dan komponenisasi yang berkuasa Vue.js dan perpustakaan pembangunan aplikasi mudah alih yang kaya bagi bahasa Dart untuk membina aplikasi mudah alih yang Memukau. antara muka UI. Artikel ini akan menunjukkan kepada anda bagaimana untuk

Mengintegrasikan Vue.js dengan Objektif-C, petua dan nasihat untuk membangunkan apl Mac yang boleh dipercayai Jul 30, 2023 pm 03:01 PM

Penyepaduan bahasa Vue.js dan Objektif-C, petua dan cadangan untuk membangunkan aplikasi Mac yang boleh dipercayai Dalam beberapa tahun kebelakangan ini, dengan populariti Vue.js dalam pembangunan bahagian hadapan dan kestabilan Objective-C dalam pembangunan aplikasi Mac, pembangun Mula. cuba menggabungkan kedua-duanya untuk membangunkan aplikasi Mac yang lebih dipercayai dan cekap. Artikel ini akan memperkenalkan beberapa petua dan cadangan untuk membantu pembangun menyepadukan Vue.js dan Objective-C dengan betul serta membangunkan aplikasi Mac berkualiti tinggi. satu

See all articles