Bagaimana untuk memperkenalkan Vue ke dalam halaman web-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk memperkenalkan Vue ke dalam halaman web

PHPz

Lepaskan： 2023-04-13 13:35:28

asal

1386 orang telah melayarinya

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas untuk membina aplikasi satu halaman interaktif (SPA). Dalam artikel ini, kami akan memperkenalkan cara menulis Vue dalam halaman web.

Penggunaan Vue yang paling asas adalah untuk memperkenalkan Vue.js pada halaman dan kemudian mencipta tika Vue. Kejadian ini akan mengandungi beberapa sifat data, digunakan untuk menyimpan data dan objek kaedah, yang mengandungi beberapa kaedah untuk mengawal data ini.

Berikut ialah contoh contoh mudah Vue:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      },
      methods: {
        reverseMessage: function () {
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami mencipta tika Vue dan mengikatnya pada div "aplikasi" id. Kemudian atribut data mesej (nilai lalai ialah 'Hello Vue!') dan kaedah reverseMessage ditakrifkan. Dalam HTML, kami menggunakan interpolasi pendakap kerinting berganda untuk memaparkan mesej pada halaman dan mengikat kaedah reverseMessage menggunakan arahan v-on:click pada teg butang.

Selain mengikat data dan pengendalian acara, Vue juga menyediakan arahan, sifat yang dikira, komponen dan fungsi lain. Ciri-ciri ini memudahkan penggunaan Vue dalam halaman web.

Berikut ialah contoh memaparkan senarai imej, menggunakan arahan v-untuk dan sifat dikira:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="image in images">
        <img :src="image.url" :alt="image.title">
        <p>{{ image.title }}</p>
      </li>
    </ul>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data: {
        images: [
          { title: 'Image 1', url: 'https://via.placeholder.com/150' },
          { title: 'Image 2', url: 'https://via.placeholder.com/150' },
          { title: 'Image 3', url: 'https://via.placeholder.com/150' }
        ]
      },
      computed: {
        reverseImages: function () {
          return this.images.slice().reverse()
        }
      }
    })
  </script>
</body>
</html>

Salin selepas log masuk

Dalam contoh di atas, kami menggunakan arahan v-untuk untuk paparkan senarai Gambar, dan gunakan harta pengiraan yang dikira untuk membalikkan senarai gambar. Ambil perhatian bahawa dalam HTML, kami menggunakan singkatan v-bind :src dan :alt untuk mengikat atribut src dan alt bagi imej.

Untuk meringkaskan, Vue ialah rangka kerja berkuasa yang boleh digunakan untuk membina aplikasi satu halaman interaktif. Dengan memperkenalkan Vue.js ke dalam halaman web dan mencipta contoh Vue, kami boleh menggunakan pengikatan data, pemprosesan acara, arahan, sifat terkira dan fungsi lain Vue dengan mudah. Ini menjadikan penulisan Vue dalam halaman web lebih mudah dan lebih mudah difahami.

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan Vue ke dalam halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!