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框架。
