Apakah kegunaan $ dalam penulisan vue?

Vue.js, sebagai rangka kerja JavaScript yang popular, menyediakan banyak ciri mudah dan gula sintaksis untuk mempercepatkan pembangunan kami. Dalam Vue.js, anda selalunya boleh melihat kata kunci, pembolehubah dan kaedah bermula dengan $. Artikel ini memberi tumpuan kepada penggunaan $ dalam Vue.js dan fungsinya.

1. $el

$el merujuk kepada nod html elemen yang dipasang oleh tika Vue. Setiap tika Vue mempunyai atribut $el, yang digunakan untuk mendapatkan elemen DOM akar yang dipasang oleh tika itu. Selepas tika Vue dibuat, kita boleh menggunakan $el untuk melihat elemen mana tika itu dipasang.

<div id="app"></div>
<script>
new Vue({
  el: '#app',
});
console.log(this.$el)// <div id="app"></div>
</script>

2. $data

$data merujuk kepada objek data yang ditakrifkan dalam tika Vue. Setiap tika Vue mempunyai sifat $data, yang boleh digunakan untuk mendapatkan objek data tika semasa. Melalui $data kita boleh melihat semua data dalam objek data.

<div id="app">
  <p>{{msg}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    msg: 'Hello Vue!'
  }
});
console.log(this.$data);// {msg: "Hello Vue!"}
</script>

3. $props

$props merujuk kepada sifat yang diluluskan oleh komponen induk dalam komponen bersarang, yang boleh diperolehi melalui ini.$props dalam komponen anak.

<div id="app">
  <child-component message="hello"></child-component>
</div>

<script>
Vue.component('child-component', {
  props: ['message'],
  mounted() {
    console.log(this.$props.message);// 'hello'
  }
});

new Vue({
  el: '#app',
});
</script>

4. $mount

$mount ialah kaedah pemasangan bagi contoh Vue.js. Jika atribut el tidak disediakan dalam pilihan contoh, anda perlu memanggil kaedah $mount secara manual untuk memasang tika Vue secara manual.

<div id="app"></div>
<script>
new Vue({
  data: {
    message: 'Hello Vue!'
  },
}).$mount('#app');
console.log(this.$el);// <div id="app"></div>
</script>

5. $watch

$watch ialah fungsi mendengar yang disediakan oleh Vue.js, digunakan untuk memerhati perubahan dalam data. Setiap kali data berubah, fungsi panggil balik dalam $watch dicetuskan. Kita boleh menggunakan $watch untuk memantau perubahan data dan melakukan operasi tertentu.

<div id="app">
  <p>{{message}}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('newValue:', newVal);
      console.log('oldValue:', oldVal);
    }
  }
});
</script>

6. $refs

$refs menunjuk kepada semua rujukan yang dimiliki oleh tika Vue. Kita boleh mendapatkan rujukan elemen melalui atribut ref. Elemen DOM boleh diperoleh dengan cepat melalui $refs dalam Vue.js.

<div id="app">
  <button ref="myButton" @click="clickButton">Click me</button>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    clickButton() {
      this.$refs.myButton.textContent = 'Button has been clicked';
    }
  }
});
</script>

7. $emit

$emit ialah kaedah contoh Vue.js, digunakan untuk mencetuskan acara tersuai. Apabila kita ingin mencetuskan peristiwa dalam komponen kanak-kanak, kita boleh menggunakan $emit untuk menghantarnya.

<!-- 父组件 -->
<div id="app">
  <child-component @myEvent="handleEvent"></child-component>
</div>

<script>
new Vue({
  el: '#app',
  methods: {
    handleEvent() {
      console.log("I'm from parent");
    }
  }
});

<!-- 子组件 -->
Vue.component('child-component', {
  template: '<button @click="clickButton">Click me</button>',
  methods: {
    clickButton() {
      this.$emit('myEvent');
    }
  }
});
</script>

8. $router

$router ialah objek contoh pemalam penghalaan Vue.js. Kita boleh menggunakan $router untuk melaksanakan beberapa lompatan, penukaran halaman dan fungsi lain. $router menyediakan banyak kaedah untuk melaksanakan fungsi lompat penghalaan.

<router-link to="/home">Home</router-link>

<script>
Vue.use(VueRouter);

var router = new VueRouter({
  routes: [{
    path: '/home',
    component: Home,
  }]
});

new Vue({
  el: '#app',
  router: router
});
</script>

9. $store

Vuex ialah perpustakaan pengurusan negeri yang disediakan secara rasmi oleh Vue.js, dan $store ialah hak milik contoh Vuex. Kami boleh mengakses objek dan kaedah keadaan Vuex melalui $store. $store menyediakan cara mudah untuk mengurus keadaan aplikasi secara seragam.

<script>
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

new Vue({
  el: '#app',
  store: store,
  methods: {
    incrementCount() {
      this.$store.commit('increment');
    }
  }
});
</script>

Ringkasan

Dalam Vue.js, $ ialah watak yang sangat penting dan banyak digunakan dalam kaedah terbina dalam rangka kerja Vue Berikut ialah beberapa kaedah yang biasa digunakan bermula dengan $ dan pembolehubah. $el dan $data adalah terlalu asas, manakala kaedah lain lebih banyak digunakan untuk memahami komponen Vue dan kitaran hayat Vue. Walau apa pun, kita perlu membiasakan diri dan memahami tujuan dan penggunaan sebenar mereka untuk mempelajari dan menggunakan rangka kerja Vue.js dengan lebih baik.

Atas ialah kandungan terperinci Apakah kegunaan $ dalam penulisan vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!