js ditukar kepada vue

Dalam pembangunan bahagian hadapan moden, JavaScript (pendek kata JS) sentiasa menjadi salah satu bahasa pengaturcaraan utama. Walau bagaimanapun, dalam jangka panjang, apabila aplikasi web menjadi lebih besar dan lebih kompleks, pembangunan JavaScript asli boleh menjadi sukar untuk dikekalkan. Oleh itu, berdasarkan peningkatan kecekapan pembangunan dan keperluan kualiti kod, penggunaan rangka kerja JavaScript lanjutan telah menjadi trend, dan sudah pasti Vue.js adalah yang terbaik di antara mereka.

Vue.js ialah perpustakaan JavaScript untuk membina antara muka pengguna. Berbanding dengan rangka kerja lain, Vue adalah ringan, mudah dipelajari dan digunakan serta progresif. Dalam Vue, aplikasi boleh dibahagikan kepada komponen bebas untuk meningkatkan kebolehgunaan semula dan kebolehselenggaraan kod. Vue telah digunakan secara meluas dalam banyak tapak web dan aplikasi dan telah menjadi salah satu pilihan pertama untuk pembangun bahagian hadapan.

Jadi, jika kita ingin menggunakan Vue untuk menambah baik aplikasi JavaScript, apakah yang perlu kita lakukan?

1. Memperkenalkan Vue.js

Pertama, kita perlu memperkenalkan perpustakaan Vue.js ke dalam aplikasi. Vue boleh dimuat turun, diperkenalkan dan diuruskan dengan memasukkannya ke dalam fail HTML, atau melalui alat pengurusan pakej seperti npm atau yarn.

Perkenalkan Vue ke dalam fail HTML:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Gunakan npm atau yarn untuk memasang dan perkenalkan Vue:

npm install vue

atau

yarn add vue

2. Refactor the Prosedur aplikasi

Sebelum mengalihkan aplikasi ke Vue, aplikasi perlu dianalisis untuk menentukan bahagian mana yang boleh diabstraksikan kepada komponen dan dibahagikan kepada komponen yang lebih kecil. Apabila aplikasi dipecahkan kepada beberapa komponen, setiap komponen boleh ditulis menggunakan Komponen Fail Tunggal (SFC) Vue. SFC menggabungkan templat, JavaScript dan CSS supaya setiap komponen dilengkapkan dalam satu fail, menjadikannya mudah dibaca dan diselenggara.

Sebagai contoh, fail JavaScript "main.js" boleh ditukar menjadi komponen Vue "App.vue":

// main.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

// App.vue
<template>
  <div id="app">
    <header>
      <h1>{{ title }}</h1>
    </header>
    <main>
      <p>Hello, World!</p>
    </main>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      title: 'My App'
    };
  }
};
</script>

<style scoped>
header {
  background-color: #fff;
  color: #333;
}
</style>

3. Pengikatan data

dalam Dalam Vue, paparan dipacu data. Keadaan komponen disimpan dalam data contoh Vue dan bahagian lain aplikasi mengikatnya pada komponen dengan keadaan yang sepadan. Apabila data berubah, paparan dikemas kini dengan sewajarnya.

Sebagai contoh, dalam komponen Vue, anda boleh menggunakan arahan "v-model" untuk mengikat elemen borang kepada data komponen:

<template>
  <div>
    <input v-model="message" type="text">
    {{ message }}
  </div>
</template>

<script>
export default {
  data () {
    return {
      message: ''
    };
  }
};
</script>

4. Kawalan Lihat

Dalam Vue, paparan boleh dikawal menggunakan kaedah dan sifat yang dikira. Kaedah ialah fungsi mudah yang mengambil input dan mengembalikan output. Sifat yang dikira ialah nilai yang dibina berdasarkan keadaan data komponen. Kedua-duanya boleh digunakan untuk mengawal paparan, tetapi anda harus memilih berdasarkan keperluan anda.

Sebagai contoh, dalam komponen Vue, anda boleh menggunakan kaedah untuk menukar data komponen apabila butang diklik:

<template>
  <div>
    <button @click="addCount">Add</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    };
  },
  methods: {
    addCount () {
      this.count++;
    }
  }
};
</script>

Sebagai alternatif, anda boleh menggunakan sifat yang dikira untuk mengemas kini paparan apabila data komponen berubah:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Doubled: {{ doubled }}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    };
  },
  computed: {
    doubled () {
      return this.count * 2;
    }
  }
};
</script>

Ringkasan:

Vue menyediakan cara yang mudah untuk menambah baik aplikasi JavaScript. Pembelajaran Vue boleh membantu kami menyusun kod dengan lebih baik dan meningkatkan kebolehselenggaraan dan kebolehskalaan aplikasi. Apabila menukar aplikasi anda, anda perlu memikirkan semula seni bina aplikasi anda, membahagikannya kepada komponen yang berasingan dan mengoptimumkannya menggunakan ciri Vue seperti pengikatan data, kawalan paparan, komponen dan banyak lagi. Walaupun ini memerlukan masa dan usaha, hasil akhirnya akan menjadi aplikasi JavaScript yang lebih mantap dan boleh dipercayai.

Atas ialah kandungan terperinci js ditukar kepada vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!