Tutorial asas VUE3: menggunakan templat rangka kerja responsif Vue.js

Vue.js ialah rangka kerja bahagian hadapan berdasarkan sistem responsif dan popular secara meluas dalam industri bahagian hadapan. Vue.js 3 ialah versi terbaharu Vue.js, menambahkan banyak ciri baharu, seperti kelajuan pemaparan yang lebih pantas, sokongan TypeScript yang lebih baik dan pengalaman pembangunan yang lebih baik. Artikel ini akan menumpukan pada salah satu tutorial asas Vue.js 3 - templat.

Apakah templat?

Dalam Vue.js, templat ialah cara menulis kod HTML Anda boleh menggunakannya untuk menerangkan struktur dan reka letak komponen, dan menggunakan arahan dan ungkapan yang disediakan oleh Vue.js untuk mengisytiharkan gelagat dan gelagat. daripada komponen. Sintaks templat Vue.js membantu anda mencipta komponen dinamik dan boleh guna semula dengan lebih mudah.

Berikut ialah contoh templat mudah di mana kami menggunakan komponen bernama hello:

<!-- 模板示例 -->
<template>
  <div>
    <h1>Hello {{ name }}!</h1>
    <input v-model="name" type="text">
  </div>
</template>

<!-- 定义一个名为 hello 的组件 -->
<script>
import { defineComponent } from 'vue';

export default defineComponent({
  data() {
    return {
      name: 'Vue',
    };
  },
});
</script>

Dalam kod di atas, kami mentakrifkan komponen bernama hello dan menggunakan Templat untuk menentukan strukturnya dan susun atur. Antaranya, teg <h1> menggunakan ungkapan interpolasi Vue.js {{ name }} untuk memaparkan teks dalam komponen secara dinamik Ungkapan ini akan terikat pada data dalam komponen untuk memastikan bahawa apabila data berubah, Teks juga dikemas kini dengan sewajarnya. Kami juga menggunakan arahan v-model dalam templat untuk mengikat data name, sekali gus merealisasikan kotak input pengikat dua hala yang dinamik.

Sintaks Templat

Dalam templat Vue.js, terdapat banyak sintaks yang boleh membantu kami menulis komponen dengan lebih baik. Berikut ialah beberapa sintaks templat yang biasa digunakan:

Ungkapan interpolasi

Ungkapan interpolasi boleh menyebabkan data dalam komponen ke lokasi yang ditentukan. Dalam templat, kami menggunakan dua pendakap kerinting {{ }} untuk membalut data yang hendak dijilid, seperti yang ditunjukkan di bawah:

<template>
  <div>
    {{ message }}
  </div>
</template>

Dalam contoh di atas, data message dimasukkan ke dalam elemen <div>. Apabila message berubah, kawasan paparan akan dikemas kini secara automatik.

Arahan

Arahan dalam Vue.js ialah atribut khas yang digunakan untuk menambah lebih banyak fungsi pada templat. Arahan bermula dengan awalan v-, seperti berikut:

<input v-model="message">

Di mana, arahan v-model digunakan untuk melaksanakan pengikatan dua hala data. Cara arahan berfungsi adalah untuk mengikat data yang ditentukan dan atribut elemen bersama-sama untuk mencapai kesan kemas kini dinamik.

Harta yang dikira

Harta terkira dalam Vue.js ialah sifat yang boleh mengira data secara dinamik. Nilai sifat yang dikira dikira secara dinamik berdasarkan data yang bergantung padanya dan hanya dikira semula apabila data yang bergantung padanya berubah. Berikut ialah definisi harta terkira yang mudah:

<template>
  <div>
    {{ reversedMessage }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue.js 3!',
    };
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    },
  },
};
</script>

Dalam contoh ini, nilai reversedMessage sifat terkira dikira berdasarkan data message dan hanya apabila message berubah, reversedMessage' s Nilai akan dikira semula.

Rendering Bersyarat

Kadangkala kita perlu memutuskan sama ada untuk memaparkan elemen atau komponen berdasarkan syarat. Dalam Vue.js, anda boleh menggunakan arahan v-if atau v-show untuk melaksanakan pemaparan bersyarat, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <div v-if="show">Hello Vue.js 3!</div>
    <div v-show="!show">Sorry, no message to show.</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
};
</script>

Dalam kod di atas, kami menggunakan arahan v-if dan v-show untuk render berdasarkan syarat Tentukan sama ada untuk memaparkan elemen yang ditentukan.

Pemaparan gelung

Pemaparan gelung dalam Vue.js ialah fungsi yang menggelungkan kawasan tertentu dan boleh memaparkan data dalam komponen secara dinamik. Vue.js menyokong pelbagai kaedah pemaparan gelung, yang paling biasa ialah menggunakan arahan v-for, seperti yang ditunjukkan di bawah:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ['item 1', 'item 2', 'item 3'],
    };
  },
};
</script>

Dalam kod di atas, kami menggunakan arahan v-for untuk gelung output data ke halaman. Dalam setiap gelung, kita boleh menggunakan ungkapan interpolasi {{ item }} untuk memaparkan item data yang sepadan.

Ringkasan

Templat Vue.js ialah cara yang mudah dan berkuasa untuk membantu kami mencipta komponen yang dinamik dan boleh digunakan semula. Menggunakan sintaks templat, kami boleh menulis kod HTML dengan lebih baik dan memisahkan data dan gelagat daripada paparan, meningkatkan kebolehbacaan dan kebolehselenggaraan kod. Dalam Vue.js 3, sintaks templat telah dipertingkatkan lagi dan dioptimumkan untuk memenuhi keperluan pembangun dengan lebih baik.

Atas ialah kandungan terperinci Tutorial asas VUE3: menggunakan templat rangka kerja responsif Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!