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:

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

     <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('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!