Apakah fungsi yang ada pada 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.

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:

ab509c080ec9f7ec77efedb1cdcd4bed{{ message }}16b28748ea4df4d9c2150843fecfba68

<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:

    8ee39084f353b8cd4554f1e862f090af
        5440a9a6580508c1df68d3f056adcfc7
            Hover your mouse over me for a few seconds to see my dynamically bound title!
        54bdf357c58b8a65c66d7c19c8e4d114
    16b28748ea4df4d9c2150843fecfba68

<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:

7b9e7549f8274d6577302a05a9a959fa
  14c94224c52d5f3c96b83a32bf0ae031Now you see me94b3e26ee717c64999d7867364b1b4a3
16b28748ea4df4d9c2150843fecfba68

<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:'#app_3_2',
            data:{
                todos:[
                    { text:'Learn JavaScript' },
                    { text:'Learn Vue' },
                    { text:'Learn Other ' }
                ]
            }
        })

, 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: '#app5',
        data: {
        　　msg2: '# hello '
     　　}
    })

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:'#app6',
            data:{
                message:'Hello Vue.js!'
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })

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:

     359b90552b49455a72fd011a2d73b952
         c34106e0b4e09414b63b2ea253ff83d6
            6b7aaeae674c2cc163cd7dde12a69fd5e353ee0ad68c807be61e217b71df5f91
        f6f112ef45f603be226bc581f9dd5e90
    16b28748ea4df4d9c2150843fecfba68

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('todo-item',{
            props:['todo'],
            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!