Vue の記述における $ の用途は何ですか?

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 属性を通じて要素の参照を取得できます。 DOM 要素は、Vue.js の $refs を通じてすぐに取得できます。

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

概要

Vue.js では、$ は非常に重要な文字であり、Vue フレームワークの組み込みメソッドでよく使用されます。$ で始まる一般的に使用されるメソッドをいくつか紹介します。そして変数。 $el と $data は基本的すぎますが、他のメソッドは Vue コンポーネントと Vue ライフサイクルを理解するためによく使用されます。いずれにせよ、Vue.js フレームワークをよりよく学び使用するには、その目的と実際の使用方法をよく理解し、理解する必要があります。

以上がVue の記述における $ の用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。