Di manakah templat vue perlu diletakkan dalam projek?-Soal Jawab bahagian hadapan-php.cn

Di manakah templat vue perlu diletakkan dalam projek?

PHPz

Lepaskan： 2023-04-08 11:30:01

asal

1092 orang telah melayarinya

Templat Vue berbeza mengikut keperluan sebenar pembangun dan alatan yang digunakan Secara amnya, ia boleh diletakkan di tempat berikut:

templat dalam komponen Vue

<.> Komponen Vue boleh menentukan templat mereka sendiri dalam templat, yang merupakan ciri teras Vue. Dalam teg skrip komponen, gunakan templat untuk menentukan templat dan mengikat templat pada komponen untuk digunakan. Contohnya:

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

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    }
  }
</script>

Salin selepas log masuk

Apabila komponen Vue menjadi semakin kompleks, adalah lebih mudah untuk menggunakan komponen berbilang fail, yang memerlukan penggunaan Komponen fail tunggal. Ciri utama komponen fail tunggal ialah templat, gaya dan logik semuanya terkandung dalam fail .vue. Contohnya:

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

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    }
  }
</script>

Salin selepas log masuk

Kadangkala, anda mungkin mahu menggunakan beberapa templat Vue generik dan bukannya menulis templat baharu sepenuhnya. Dalam kes ini, anda boleh memilih untuk menggunakan templat terbenam untuk mencapai matlamat ini. Templat terbenam boleh ditulis seperti ini:

<template id="my-template">
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
  export default {
    name: 'MyComponent',
    data() {
      return {
        title: 'Vue Template',
        content: 'This is a Vue template example'
      }
    },
    template: document.getElementById('my-template')
  }
</script>

Salin selepas log masuk

Vue CLI boleh memberi anda templat awam yang dipratentukan supaya anda boleh dengan cepat Memulakan Projek Vue. Templat awam termasuk: webpack, webpack-simple, browserify, browserify-simple, simple, dsb. Templat ini boleh dimuat turun dan digunakan melalui dokumentasi rasmi.

Ringkasan

Di atas ialah lokasi storan utama dan bentuk templat Vue. Templat boleh ditakrifkan dengan mudah sama ada di dalam komponen Vue atau dalam komponen fail tunggal. Sudah tentu, anda juga boleh memilih templat awam untuk membangunkan aplikasi Vue anda sendiri untuk memulakan projek dan membangunkannya dengan cepat.

Atas ialah kandungan terperinci Di manakah templat vue perlu diletakkan dalam projek?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!