Rangka kerja Vue ialah rangka kerja JavaScript sumber terbuka yang membolehkan kami membina antara muka pengguna interaktif dengan lebih mudah. Dalam Vue, kami boleh mengendalikan logik dalam aplikasi kami dengan menambah skrip. Jadi, bagaimana untuk menambah skrip pada rangka kerja Vue? Artikel ini akan memberi anda panduan terperinci.
Dalam Vue, pengguna boleh menggunakan arahan dalam HTML untuk mengikat skrip pada elemen DOM tertentu. Tujuan arahan ini adalah untuk memberitahu rangka kerja Vue cara mengikat data dan mengendalikan acara. Di bawah ialah contoh Vue mudah yang mengikat teks input kepada pembolehubah dan menambah pembolehubah pada senarai pada klik butang.
<!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <input v-model="newItem" type="text"> <button v-on:click="addToList">Add Item</button> <ul v-if="list.length"> <li v-for="item in list" :key="item">{{ item }}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { newItem: '', list: [] }, methods: { addToList: function() { this.list.push(this.newItem); this.newItem = ''; } } }) </script> </body> </html>
Untuk menambah skrip pada rangka kerja Vue kita perlu mengikuti langkah berikut:
Kita perlu memasukkan perpustakaan Vue dalam halaman HTML. Kami boleh menggunakan CDN atau memuat turun perpustakaan Vue ke dalam mesin tempatan kami dan mengimportnya ke dalam fail HTML.
Kita perlu mencipta tika Vue untuk mengikat data dan mengendalikan acara. Dalam Vue, kami menggunakan pembina Vue untuk mencipta contoh Vue. Kita boleh menyimpannya dalam pembolehubah untuk kegunaan kemudian.
var app = new Vue({ // Vue选项 })
Dalam pembina Vue, kami perlu menyediakan satu set pilihan untuk mengkonfigurasi tika Vue. Antaranya, yang paling penting ialah data dan kaedah.
Dalam Vue, kita boleh menggunakan pilihan data untuk menentukan keadaan awal komponen. Data ini akan digunakan di seluruh komponen dan dinyatakan sebagai sifat komponen. Di bawah adalah contoh mudah.
data: { message: 'Hello Vue!' }
Dalam kod di atas, kami mengisytiharkan data bernama mesej, dan keadaan awalnya ialah "Hello Vue!".
Dalam Vue, kami menggunakan pilihan kaedah untuk mentakrifkan semua kaedah yang tersedia dalam komponen. Kaedah ini boleh ditakrifkan pada contoh Vue dan diakses dengan mengikat arahan Vue. Di bawah adalah contoh mudah.
methods: { sayHello: function() { alert('Hello World!'); } }
Dalam kod di atas, kami mentakrifkan kaedah bernama sayHello, yang akan muncul kotak amaran apabila dipanggil, memaparkan "Hello World!".
Kita boleh menggunakan pilihan el tika Vue untuk menentukan di dalam elemen DOM mana tika Vue akan berfungsi. Selepas tika Vue dibuat, kami boleh menentukan ID elemen HTML (seperti div atau bahagian) dalam el sebagai bekas.
Contohnya:
var app = new Vue({ el: '#my-element' })
Dalam kod di atas, kami mengikat tika Vue pada elemen HTML dengan ID "elemen saya".
Kami boleh menggunakan arahan untuk mengikat data dan sifat kepada elemen DOM dalam Vue. Arahan ialah atribut HTML khas yang diawali dengan "v-". Di bawah ialah contoh menggunakan arahan v-bind untuk mengikat sifat pada contoh Vue.
<template> <div> <h1 v-bind:title="myTitle">Welcome to my website!</h1> </div> </template> <script> export default { name: 'MyComponent', data: function () { return { myTitle: 'My Awesome Website' }; } }; </script>
Dalam kod di atas, kami menggunakan arahan v-bind untuk mengikat atribut myTitle kepada atribut tajuk bagi elemen h1.
Dalam Vue, kemas kini DOM yang akan diberikan dengan mengubah suai data yang diisytiharkan dalam data. Kami boleh menggunakan sintaks mengikat data {{}} untuk memaparkan data dalam DOM dan menggunakan fungsi untuk mengubah suai nilai data. Di bawah adalah contoh mudah.
<template> <div> <h1>{{ myTitle }}</h1> <button v-on:click="updateTitle">Update Title</button> </div> </template> <script> export default { name: 'MyComponent', data: function () { return { myTitle: 'My Awesome Website' }; }, methods: { updateTitle: function () { this.myTitle = 'New Title'; } } }; </script>
Dalam kod di atas, kami menggunakan sintaks mengikat data {{myTitle}} untuk memaparkan nilai myTitle dalam DOM dan menggunakan arahan v-on untuk mengikat kaedah updateTitle pada butang peristiwa. Kaedah ini akan mengemas kini nilai myTitle.
Menambah skrip dalam Vue melibatkan berbilang langkah. Kita perlu memasukkan pustaka Vue, mencipta tika Vue dan menentukan pilihan, mengikat tika Vue kepada elemen HTML dan menambah arahan kepada elemen DOM untuk mengurus data dan peristiwa. Dengan mengikuti langkah di atas, kami boleh membina aplikasi Vue interaktif dengan lebih mudah.
Atas ialah kandungan terperinci Bagaimana untuk menambah skrip pada rangka kerja vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!