Welchen Nutzen hat $ beim Schreiben von Vue?

Vue.js bietet als beliebtes JavaScript-Framework viele praktische Funktionen und syntaktischen Zucker, um unsere Entwicklung zu beschleunigen. In Vue.js können Sie häufig Schlüsselwörter, Variablen und Methoden sehen, die mit $ beginnen. Dieser Artikel konzentriert sich auf die Erläuterung der Verwendung von $ in Vue.js und ihrer Funktionen.

1. $el

$el bezieht sich auf den von der Vue-Instanz bereitgestellten Element-HTML-Knoten. Jede Vue-Instanz verfügt über das Attribut $el, das verwendet wird, um das von der Instanz gemountete Root-DOM-Element abzurufen. Nachdem die Vue-Instanz erstellt wurde, können wir mit $el sehen, auf welchem ​​Element die Instanz gemountet ist.

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

2. $data

$data bezieht sich auf das in der Vue-Instanz definierte Datenobjekt. Jede Vue-Instanz verfügt über eine $data-Eigenschaft, mit der das Datenobjekt der aktuellen Instanz abgerufen werden kann. Über $data können wir alle Daten im Datenobjekt anzeigen.

<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 bezieht sich auf die von der übergeordneten Komponente in der verschachtelten Komponente übergebenen Eigenschaften, die dadurch abgerufen werden können.$props in der untergeordneten Komponente.

<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 ist die Mountmethode der Vue.js-Instanz. Wenn das el-Attribut nicht in den Optionen der Instanz bereitgestellt wird, müssen Sie die Methode $mount manuell aufrufen, um die Vue-Instanz manuell zu mounten.

<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 ist eine von Vue.js bereitgestellte Abhörfunktion, mit der Änderungen in Daten beobachtet werden können. Immer wenn sich die Daten ändern, wird die Callback-Funktion in $watch ausgelöst. Wir können $watch verwenden, um Datenänderungen zu überwachen und bestimmte Vorgänge auszuführen.

<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 verweist auf alle Referenzen, die der Vue-Instanz gehören. Wir können die Referenz des Elements über das ref-Attribut abrufen. DOM-Elemente können schnell über $refs in Vue.js abgerufen werden.

<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 ist eine Methode der Vue.js-Instanz, die zum Auslösen eines benutzerdefinierten Ereignisses verwendet wird. Wenn wir ein Ereignis in einer untergeordneten Komponente auslösen möchten, können wir es mit $emit übergeben.

<!-- 父组件 -->
<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 ist ein Instanzobjekt des Vue.js-Routing-Plugins. Wir können $router verwenden, um einige Sprünge, Seitenwechsel und andere Funktionen zu implementieren. $router bietet viele Methoden zum Implementieren von Routing-Sprungfunktionen.

<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 ist die offiziell von Vue.js bereitgestellte Statusverwaltungsbibliothek. $store ist eine Eigenschaft der Vuex-Instanz. Wir können über $store auf die Zustandsobjekte und -methoden von Vuex zugreifen. $store bietet eine praktische Möglichkeit, den Status der Anwendung einheitlich zu verwalten.

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

Zusammenfassung

In Vue.js ist $ ein sehr wichtiges Zeichen und wird häufig in den integrierten Methoden des Vue-Frameworks verwendet. Hier stellen wir einige häufig verwendete Methoden und Variablen vor, die mit $ beginnen. $el und $data sind zu einfach, während andere Methoden eher zum Verständnis der Vue-Komponenten und des Vue-Lebenszyklus verwendet werden. In jedem Fall müssen wir ihren Zweck und ihre tatsächliche Verwendung kennen und verstehen, um das Vue.js-Framework besser erlernen und nutzen zu können.

Das obige ist der detaillierte Inhalt vonWelchen Nutzen hat $ beim Schreiben von Vue?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!