Cara menggunakan JavaScript dalam vue

Dengan aplikasi yang meluas dan populariti Vue, semakin ramai pembangun mula melibatkan penggunaan JavaScript dalam Vue. Artikel ini akan memperkenalkan kaedah dan teknik penggunaan JavaScript dalam Vue, membantu pembaca menguasai kemahiran menggunakan JavaScript untuk pembangunan Vue dengan cepat.

1. Pengetahuan asas menggunakan JavaScript dalam Vue

Vue ialah rangka kerja JavaScript, jadi JavaScript tidak boleh dipisahkan apabila menggunakan Vue. Bahasa JavaScript ES6 dan ke atas digunakan terutamanya dalam Vue. ES6 menambah banyak sintaks dan ciri baharu pada JavaScript, seperti fungsi anak panah dan rentetan templat.

Selain itu, Vue juga mempunyai konsep teras - Instance Vue dicipta melalui pembina Vue dan boleh difahami sebagai komponen Vue. Kod JavaScript boleh digunakan dalam contoh Vue untuk melaksanakan pelbagai fungsi.

2. Cara menggunakan JavaScript dalam Vue

Terdapat beberapa cara untuk menggunakan JavaScript dalam Vue:

1 Gunakan ungkapan JavaScript secara langsung dalam templat Vue

Templat Vue menyokong penggunaan ungkapan JavaScript secara langsung dalam templat dan akan memaparkan data dalam masa nyata. Contohnya:

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

Pada masa ini, Vue akan memberikan nilai pembolehubah mesej ke dalam div dalam templat.

2. Tentukan kaedah dan sifat yang dikira dalam tika Vue

Banyak kaedah dan sifat yang dikira boleh ditakrifkan dalam contoh Vue, contohnya:

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  methods: {
    greet: function () {
      alert('Hello ' + this.message + '!')
    }
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Dalam contoh di atas , Kami mentakrifkan salam kaedah dan sifat terkira reversedMessage untuk mengembalikan rentetan terbalik rentetan mesej. Kaedah dan sifat yang dikira ini boleh dipanggil dalam templat melalui nama contoh vm.

3. Gunakan kod JavaScript dalam fungsi cangkuk kitaran hayat Vue

Vue menyediakan pelbagai fungsi cangkuk kitaran hayat, yang akan dipanggil secara automatik semasa kitaran hayat contoh Tulis kod JavaScript dalam fungsi untuk melaksanakan fungsi tertentu.

Sebagai contoh, tentukan pembolehubah dalam fungsi cangkuk yang dicipta:

var vm = new Vue({
  el: '#app',
  created: function () {
    this.count = 0;
  },
  methods: {
    addCount: function () {
      this.count++;
    }
  }
})

Dalam contoh di atas, kami mentakrifkan kiraan pembolehubah dalam fungsi cangkuk yang dicipta dan menambahnya setiap kali dalam kaedah addCount 1 . Pembolehubah ini boleh diakses dalam templat melalui pembolehubah kiraan dalam contoh.

3. Fungsi biasa JavaScript dalam Vue

Dalam Vue, kami boleh menggunakan JavaScript untuk melaksanakan banyak fungsi disenaraikan di bawah:

1

boleh diperoleh menggunakan JavaScript, dan data dalam elemen DOM boleh disimpan ke tika Vue melalui mekanisme responsif Vue. Contohnya:

var vm = new Vue({
  el: '#app',
  data: {
    message: ''
  },
  methods: {
    showMessage: function () {
      alert('you input is:' + this.message);
    }
  },
  mounted: function () {
    var input = document.getElementById('messageInput');
    input.addEventListener('input', function (event) {
      vm.message = event.target.value;
    })
  }
})

Dalam contoh di atas, kami memperoleh elemen DOM dengan ID messageInput dalam fungsi cangkuk yang dipasang dan menambah pendengar acara Apabila pengguna memasukkan data, peristiwa dicetuskan dan data yang dimasukkan adalah disimpan ke Dalam mesej contoh Vue.

2. Mengikat acara

Vue menggunakan arahan v-on untuk mengikat pengendali acara, contohnya:

<button v-on:click="increment">+</button>

Dalam contoh di atas, kami menggunakan arahan v- The on mengikat acara klik, dan kaedah kenaikan dicetuskan apabila pengguna mengklik butang.

3 Gelung senarai pemaparan

Dalam Vue, anda boleh menggunakan arahan v-for untuk menggelungkan senarai pemaparan, contohnya:

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

Dalam contoh di atas, kami menggunakan v- The for gelung arahan melalui senarai rendering dan menjadikan setiap elemen dalam item menjadi elemen li.

4. Paparan bersyarat

Dalam Vue, anda boleh menggunakan arahan v-if dan v-else untuk melaksanakan pemaparan bersyarat, contohnya:

<div v-if="show">
  <p>{{ message }}</p>
</div>
<div v-else>
  <p>It is hidden now.</p>
</div>

Dalam contoh di atas , kami Gunakan arahan v-if untuk menentukan nilai pembolehubah tunjukkan Jika show adalah benar, div pertama diberikan, jika tidak div kedua diberikan.

4. Ringkasan

Menggunakan JavaScript dalam Vue akan menjadikan kod kami lebih fleksibel dan cekap. Dengan mempelajari kaedah dan teknik yang diperkenalkan dalam artikel ini, kami dapat memahami dengan lebih baik kepentingan dan penggunaan JavaScript dalam Vue, dengan itu meningkatkan kecekapan dan kecekapan kami dalam pembangunan Vue.

Atas ialah kandungan terperinci Cara menggunakan JavaScript dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!