Vue 글쓰기에서 $의 용도는 무엇입니까?

Vue.js는 널리 사용되는 JavaScript 프레임워크로서 개발 속도를 높이기 위해 많은 편리한 기능과 구문 설탕을 제공합니다. Vue.js에서는 $로 시작하는 키워드, 변수, 메소드를 자주 볼 수 있습니다. 이 기사에서는 Vue.js의 $ 사용과 해당 기능에 중점을 둡니다.

1. $el

$el은 Vue 인스턴스에 의해 마운트된 html 노드 요소를 나타냅니다. 각 Vue 인스턴스에는 인스턴스에 의해 마운트된 루트 DOM 요소를 얻는 데 사용되는 $el 속성이 있습니다. 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>

Summary

Vue.js에서 $는 매우 중요한 문자이며 Vue 프레임워크의 내장 메소드에서 많이 사용됩니다. 여기에서는 $로 시작하는 일반적으로 사용되는 메소드와 변수를 소개합니다. $el 및 $data는 너무 기본적인 반면, Vue 구성 요소와 Vue 수명 주기를 이해하는 데 다른 방법이 더 많이 사용됩니다. 어떤 경우든 Vue.js 프레임워크를 더 잘 배우고 사용하려면 해당 목적과 실제 사용법을 숙지하고 이해해야 합니다.

위 내용은 Vue 글쓰기에서 $의 용도는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!