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属性来拿到元素的引用。在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>

总结

在Vue.js中，$是一个十分重要的字符，在Vue框架的内置方法中有很多的使用，这里介绍了部分常用的$开头的方法和变量。$el、$data过于基础，而其他的方法更多地用于了解Vue组件和Vue生命周期。无论如何，我们需要熟悉并了解它们的用途和实际使用情况，以便更好地学习和使用Vue.js框架。

以上是vue写法中 $有什么用的详细内容。更多信息请关注PHP中文网其他相关文章！