Bagaimana untuk menyediakan halaman statik dalam vue-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyediakan halaman statik dalam vue

PHPz

Lepaskan： 2023-04-13 09:58:55

asal

2630 orang telah melayarinya

Kata Pengantar

Vue ialah rangka kerja bahagian hadapan yang popular Melalui Vue, kami boleh membuat halaman dinamik dengan mudah. Tetapi kadangkala, kita perlu mencipta halaman statik Artikel ini akan memperkenalkan cara menggunakan Vue untuk mencipta halaman statik.

Halaman statik Vue

Dalam Vue, kita boleh mencipta halaman statik dalam bentuk "Komponen Fail Tunggal". Komponen fail tunggal ialah fail dengan akhiran .vue komponen Vue boleh menyusun kod HTML, CSS dan JavaScript menjadi komponen bebas yang boleh digunakan semula.

Berikut ialah komponen fail tunggal Vue yang mudah:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

Salin selepas log masuk

Kod di atas mentakrifkan komponen Vue bernama StaticPage, menggunakan dua tajuk atribut data dan kandungan dalam templat dan terikat kepada halaman tersebut. Dua gaya pemilih h1 dan p ditakrifkan dalam gaya.

Menggunakan Vue untuk mencipta halaman statik mempunyai kelebihan berikut:

Pengikatan data: Tidak seperti halaman statik yang memerlukan pengubahsuaian manual kandungan dalam teg, Vue mengikat data ke halaman. Kemas kini automatik;
Organisasi kod: susun kod HTML, CSS dan JavaScript ke dalam komponen bebas untuk memudahkan kod
Kebolehgunaan semula: Komponen Vue adalah bebas dan boleh digunakan pada halaman yang berbeza Guna semula dalam kod untuk meningkatkan kebolehgunaan semula kod.

Bagaimana untuk menggunakan halaman statik dalam Vue?

Terdapat beberapa langkah untuk mencipta halaman statik menggunakan Vue:

Pasang Vue
Buat komponen fail tunggal
Daftar dalam Komponen contoh Vue
Tambahkan komponen pada halaman

Seterusnya, kita akan meneruskan langkah demi langkah.

Pasang Vue

Sebelum menggunakan Vue, anda perlu memasangnya. Kami boleh memasang Vue melalui npm atau CDN. Dalam artikel ini, kami memperkenalkannya dalam mod CDN:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Salin selepas log masuk

Kod di atas memperkenalkan perpustakaan Vue dan memasang Vue secara global.

Buat satu komponen fail

Buat fail .vue dalam direktori projek Berikut ialah contoh komponen fail tunggal yang mudah untuk halaman statik:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'StaticPage',
  data() {
    return {
      title: '这是一个静态页面',
      content: '欢迎使用Vue创建静态页面。'
    };
  }
};
</script>

<style>
h1 {
  font-size: 32px;
  color: #333333;
}
p {
  font-size: 24px;
  color: #666666;
}
</style>

Salin selepas log masuk

Daftar komponen dalam contoh Vue

Daftar komponen yang baru dibuat dalam contoh Vue:

Vue.component('static-page', staticPage);

Salin selepas log masuk

Di sini komponennya ialah dinamakan "halaman statik".

Tambah komponen pada halaman

Tambahkan komponen pada halaman dengan kod berikut:

<div id="app">
  <static-page></static-page>
</div>

Salin selepas log masuk

Kod di atas menambah komponen ke Dalam teg div dengan id "aplikasi".

Contoh halaman statik Vue lengkap

Berikut ialah contoh halaman statik Vue yang lengkap:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue Static Page</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  </head>
  <body>
    <div id="app">
      <static-page></static-page>
    </div>
    
    <template id="static-page-template">
      <div>
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
      </div>
    </template>
    
    <script>
      var staticPage = {
        template: '#static-page-template',
        data() {
          return {
            title: '这是一个静态页面',
            content: '欢迎使用Vue创建静态页面。'
          };
        }
      };
    
      new Vue({
        el: '#app',
        components: {
          'static-page': staticPage
        }
      });
    </script>
    
    <style>
      h1 {
        font-size: 32px;
        color: #333333;
      }
      p {
        font-size: 24px;
        color: #666666;
      }
    </style>
  </body>
</html>

Salin selepas log masuk

Kod di atas mentakrifkan contoh Vue dan mendaftarkan komponen staticPage ke contoh. Komponen menggunakan templat dengan id "static-page-template", menggunakan dua tajuk atribut data dan kandungan dalam templat dan mengikatnya pada halaman. Dua gaya pemilih h1 dan p ditakrifkan dalam gaya.

Kesimpulan

Artikel ini memperkenalkan secara ringkas cara menggunakan Vue untuk mencipta halaman statik. Halaman statik Vue mempunyai kelebihan pengikatan data, organisasi kod dan kebolehgunaan semula serta sesuai untuk mencipta tapak web statik bersaiz kecil dan sederhana. Melalui pengenalan artikel ini, saya berharap pembaca dapat lebih memahami penggunaan Vue.

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