vue寫法中 $有什麼用-前端問答-PHP中文網

vue寫法中 $有什麼用

王林

發布： 2023-05-08 12:35:37

原創

2325 人瀏覽過

Vue.js作為一個流行的JavaScript框架，提供了許多方便的功能和語法糖來加速我們的開發。在Vue.js中，經常可以看到以$開頭的關鍵字、變數和方法。本文就著重講解在Vue.js中以$開頭的使用方法，以及它們的作用。

1. $el

$el指的是Vue實例所掛載的元素html節點。每一個Vue實例都有$el屬性，用來取得實例所掛載的根DOM元素。我們可以在Vue實例建立之後，使用$el查看實例掛載到哪個元素上。

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

登入後複製

2. $data

$data指的是Vue實例中定義的資料物件。每一個Vue實例都有$data屬性，可以用它來取得目前實例的資料物件。透過$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指嵌套元件中父元件傳遞的屬性，在子元件中可以透過this.$props來得到。

<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是Vue.js實例的掛載方法。如果沒有在實例的選項中提供el屬性，則需要手動呼叫$mount方法來手動掛載Vue實例。

<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是Vue.js提供的監聽函數，用來觀察資料的變化。每當資料發生變化時，就會觸發$watch中的回呼函數。我們可以使用$watch監聽到資料變化，從而執行某些操作。

<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指向Vue實例上所擁有的所有參考。我們可以透過ref屬性來拿到對元素的引用。在Vue.js中透過$refs可以快速取得到DOM元素。

<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是Vue.js實例的一個方法，用來觸發一個自訂事件。當我們想要在子元件中觸發某個事件時，可以使用$emit來進行傳遞。

<!-- 父组件 -->
<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是Vue.js路由外掛程式的實例物件。我們可以透過$router來實現一些跳轉、頁面切換等功能。 $router提供了許多方法來實現路由跳轉的功能。

<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是Vue.js官方提供的狀態管理函式庫，$store是Vuex實例的屬性。我們可以透過$store來存取Vuex的狀態物件、方法。 $store提供了一種方便的方式來統一管理應用程式的狀態。

<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>

登入後複製