Cara menambah ciri kebolehaksesan pada Vue

Dengan pembangunan berterusan rangka kerja bahagian hadapan, Vue, sebagai salah satu wakil, memainkan peranan penting dalam pembangunan bahagian hadapan. Vue mempunyai kelebihan kerana mudah dipelajari, fleksibel dan berprestasi tinggi. Walau bagaimanapun, fungsi asas Vue adalah terhad. Jika anda ingin melaksanakan fungsi yang lebih kompleks, anda perlu menambah beberapa fungsi tambahan. Artikel ini akan memperkenalkan cara menambah fungsi tambahan Vue untuk memenuhi keperluan pembangunan yang berbeza.

1. Pengenalan pemalam Vue

Pemalam Vue ialah satu bentuk merealisasikan fungsi Vue. Vue secara rasmi menyediakan beberapa pemalam yang biasa digunakan, seperti Vue-Router, Vuex, Vue-CLI, dsb. Kami boleh melanjutkan fungsi Vue dengan memperkenalkan pemalam ini.

1.Vue-Router

Vue-Router ialah pemalam pengurusan penghalaan yang disediakan secara rasmi oleh Vue. Melalui Vue-Router, kami boleh melaksanakan pengurusan penghalaan aplikasi satu halaman SPA. Jika kami ingin melaksanakan aplikasi berbilang halaman, kami boleh mempertimbangkan untuk menggunakan pemuatan dinamik dan menggunakan mekanisme pemuatan malas Vue.

Langkah-langkah untuk memperkenalkan pemalam Vue-Router adalah seperti berikut:

1) Gunakan npm untuk memasang Vue-Router

npm install vue-router --save

2) Perkenalkan Vue- Penghala dalam fail utama.js Pemalam

import VueRouter from 'vue-router'

Vue.use(VueRouter)

3) Tentukan laluan dalam fail router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    }
  ]
})

2.Vuex

Vuex ialah mod pengurusan negeri yang disediakan secara rasmi oleh Vue. Melalui Vuex, kami boleh mengurus secara berpusat status aplikasi dalam Vue dan merealisasikan fungsi seperti perkongsian data antara komponen dan penghantaran mesej antara komponen.

Langkah-langkah untuk memperkenalkan pemalam Vuex adalah seperti berikut:

1) Gunakan npm untuk memasang Vuex

npm install vuex --save

2) Perkenalkan pemalam Vuex fail utama.js

import Vuex from 'vuex'

Vue.use(Vuex)

3) Tentukan kedai Vuex dalam fail store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount(state) {
      return state.count
    }
  }
})

3.Vue-CLI

Vue-CLI ialah alat baris arahan yang disediakan secara rasmi oleh Vue, yang boleh membantu kami Membina projek Vue dengan cepat. Melalui Vue-CLI, kami boleh menjana projek, mengkonfigurasi pek web, menambah pemalam, dsb.

Langkah-langkah untuk memperkenalkan pemalam Vue-CLI adalah seperti berikut:

1) Pasang Vue-CLI menggunakan npm

npm install vue-cli -g

2) Jalankan arahan berikut dalam baris arahan untuk mencipta Projek Vue

vue init webpack my-project

3) Masukkan direktori projek Vue yang dibuat

cd my-project

4) Mulakan projek

npm run dev

2. Gunakan yang ketiga -pustaka pihak

Selain pemalam Vue, kami juga boleh menggunakan perpustakaan pihak ketiga untuk melanjutkan fungsi Vue. Pengguna Vue boleh memilih perpustakaan pihak ketiga yang sesuai dengan mereka mengikut keperluan mereka sendiri.

1.axios

axios ialah perpustakaan HTTP berasaskan Promise yang boleh digunakan untuk menghantar permintaan HTTP kepada pelayan dalam penyemak imbas dan Node.js.

Dengan memperkenalkan perpustakaan axios, kami boleh menghantar permintaan HTTP dengan mudah dalam Vue.

Langkah-langkah untuk memperkenalkan perpustakaan axios adalah seperti berikut:

1) Gunakan npm untuk memasang axios

npm install axios --save

2) Perkenalkan perpustakaan axios dalam main.js fail

import axios from 'axios'

Vue.prototype.$axios = axios;

3) Gunakan aksios dalam komponen

export default {
  data() {
    return {
      list: [],
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.$axios.get('url')
      .then(response => {
        this.list = response.data
      })
      .catch(error => {
        console.log(error)
      })
    }
  }
}

2.moment.js

moment.js ialah perpustakaan JavaScript yang mengendalikan tarikh dan masa dan boleh diformat dengan mudah, menghuraikan dan memanipulasi tarikh dan masa.

Langkah-langkah untuk memperkenalkan perpustakaan moment.js adalah seperti berikut:

1) Gunakan npm untuk memasang moment.js

npm install moment --save

2) Gunakan moment.js dalam komponen

export default {
  data() {
    return {
      date: ''
    }
  },
  mounted() {
    this.date = moment().format('YYYY-MM-DD')
  }
}

3. Arahan tersuai

arahan Vue ialah satu bentuk melanjutkan gelagat elemen HTML dalam Vue. Vue menyediakan banyak arahan terbina dalam, seperti v-if, v-show, v-for, dsb. Jika arahan terbina dalam dalam Vue tidak dapat memenuhi keperluan anda, anda boleh menyesuaikan arahan tersebut.

Sebagai contoh, kita boleh menyesuaikan arahan untuk menyelesaikan masalah bahawa borang hanya boleh diserahkan apabila nombor dimasukkan dalam kotak input.

1) Tentukan arahan tersuai

Vue.directive('number', {
  bind: function(el) {
    el.addEventListener('input', function() {
      this.value = this.value.replace(/[^\d]/g, '')
    })
  }
})

2) Gunakan arahan tersuai dalam komponen

<template>
  <div>
    <input type="text" v-number>
  </div>
</template>

4 memperkenalkan pemalam Vue, menggunakan perpustakaan pihak ketiga, arahan tersuai, dsb., kami boleh melanjutkan fungsi Vue dengan mudah untuk memenuhi keperluan pembangunan yang berbeza. Sudah tentu, kita juga boleh memilih untuk menambah fungsi tambahan atau membangunkannya sendiri mengikut keadaan tertentu. Walau apa pun, pastikan kod anda bersih dan boleh diselenggara. Semoga artikel ini membantu anda memahami dengan lebih baik cara menambahkan fungsi pada Vue.

Atas ialah kandungan terperinci Cara menambah ciri kebolehaksesan pada Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!