Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambah skrip pada rangka kerja vue
Bagaimana untuk menambah skrip pada rangka kerja vue
- PHPzasal
- 2023-04-13 10:26:571319semak imbas
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.
Ketahui tentang skrip dalam Vue
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>
Menambah Skrip dalam Vue
Untuk menambah skrip pada rangka kerja Vue kita perlu mengikuti langkah berikut:
Langkah 1: Sertakan Perpustakaan Vue
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.
Langkah 2: Buat tika Vue
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选项
})
Langkah 3: Tentukan pilihan Vue
Dalam pembina Vue, kami perlu menyediakan satu set pilihan untuk mengkonfigurasi tika Vue. Antaranya, yang paling penting ialah data dan kaedah.
Data
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!".
Kaedah
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!".
Langkah 4: Ikat tika Vue ke HTML
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".
Langkah 5: Tambahkan arahan pada elemen DOM Vue
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.
Langkah 6: Kemas kini keadaan tika Vue
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.
Ringkasan
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!