$开头的变量It's just Vuea naming rule, in order to 区分普通变量属性avoid our own declaration or adding 自定义attributes 覆盖.
1. $data
The instance attribute of vue $datais used to get datathe data in the equivalent of using thisget.
<template>
<div>
<p>
<a @click="click()">$dataChange</a> | <a @click="click2()">thisChange</a>
</p>
<p>{
{ data1 }}</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
data1: 'data1'
};
},
mounted() {
console.log(this.$data);
},
methods: {
click() {
this.$data.data1 = '$dataChange'
},
click2() {
this.data1 = 'thisChange'
}
},
};
</script>
Two, $watch
$watchThe function is actually watchthe same as the configuration item, both are used to monitor a variable, the difference is:
$watchThe function is more flexible, you can add monitoring anytime and anywhere$watchThe function needs to be destroyed manually, and the configuration itemwatchwill be destroyed automatically when the life cycle of the component ends
<template>
<div>
<p>
<a @click="click()">add</a>
</p>
<p>{
{ demo.num }}</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
demo: {
num: 0
},
unwatch: null
};
},
mounted() {
this.unwatch = this.$watch('demo', () => {
console.log(this.demo.num);
}, {
deep: true
})
},
destroyed() {
this.unwatch && this.unwatch();
},
methods: {
click() {
this.demo.num++;
},
},
};
</script>
There are two possibilities for the first parameter:
- Pass in the observed object expression (string), for example
demo,demo.num - If the expression cannot represent the content that needs to be observed, it can be returned by a function, such as:
() => this.demo.num - When you need to cancel, execute
unwatch()to cancel
Three, $el
Get the element Vueassociated with the instance DOM, pointing to the root tag in the $elcurrent component template.template
Four, $set
4.1 Problems with two-way data binding in vue
Limited by ES5, cannot Vuedetect 对象属性or 添加. 删除Because Vueat 初始化实例the time 属性转为 getter/setter, the attribute 必须can data 对象上 才be Vue.jsconverted to make it be 响应的.
Just like the following, there is one more vue并不能察觉to datathe top :demo对象属性add
<template>
<div>
<p>
<a @click="click()">add</a>
</p>
<p>-{
{ demo.add }}-</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
demo: {
num: 0
}
};
},
mounted() {
this.demo.add = 0;
},
methods: {
click() {
this.demo.num++;
},
},
};
</script>
4.2 The problem to be solved by $set
To solve the data not being two-way bound we can use vm.$setthe instance method, which is Vue.setan alias of the global method.
4.3 When to use $set
Set was born to solve the failure of two-way binding. We only need to pay attention to when the two-way binding fails.
As long as the address of the value does not change, Vue cannot detect data changes:
- When you
索引directly set an array item, for example:vm.items[indexOfItem] = newValue - When you
修改have the length of the array, for example:vm.items.length = newLength - Due to JavaScript limitations, Vue cannot detect object properties
添加or删除
<template>
<div>
<p>
<a @click="click()">change1</a> | <a @click="click2()">change2</a>
</p>
<p>demo.add: {
{ demo.add }}</p>
<p>array1[0]: {
{ array1[0] }}</p>
<p>array2[2]: {
{ array2[0] }}</p>
</div>
</template>
<script>
export default {
name: "CT",
data() {
return {
demo: {
num: 0
},
array1: [1],
array2: [1]
};
},
mounted() {
},
methods: {
click() {
this.array1[0] = 2;
this.array2.length = 0;
this.demo.add = 0;
},
click2() {
this.$set(this.array1, 0, 2);
this.$set(this.array2, 'length', 0);
this.$set(this.demo, 'add', 0);
},
},
};
</script>
Five, $options
vueInstance attributes $optionsare one 对象, the sum vueof each component that can be called , that is, the things in curly brackets, collectively referred to as .方法数据new vue({})options
- Get and call the attributes defined outside the data,
this.$options.name - Reuse the methods in filters,
this.$options.filters.xxx - One-click to reset the data in data:
this.xxxx= this.$options.data().xxxx;this.data = this.$options.data();
<template>
<div>
<p><a @click="click()">click</a> | <a @click="reset()">reset</a></p>
<p>demo.num: {
{ demo.num }}</p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
demo: {
num: 0,
},
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.demo.num++;
},
reset() {
// 重置某一个数据
this.demo = this.$options.data().demo;
// 重置整个$data
this.data = this.$options.data();
},
},
};
</script>
Six, $refs
In vue2, we can directly use refthe acquisition element, that is, directly 在元素上绑定ref属性, and we can directly obtain it when we use it directly this.$refs['自定义属性名'] . $refs is a collection of all registered refs.
$refsBasic usage ofrefThe attribute is added to普通元素the above, andthis.refs.(ref值)the obtained isdom元素refThe attribute is added to子组件the above, andthis.refs.(ref值)what is obtained with is that组件实例you can use all components方法.- If
refis循环out, there are multiple重名, thenrefthe value of will be one数组
vue$refsPoints to pay attention to the attributes inrefIt needsdom渲染完成to be available later, make sure when using itdom已经渲染完成. Such as calling in a lifecyclemounted(){}hook, orthis.$nextTick(()=>{})calling in .$refitself as渲染结果being created,初始渲染they cannot be accessed at the time, and do not exist$refsNot responsive, only渲染完成后filled in the component
Seven, $event
$event has the following two functions:
- Get the event object of the native DOM event
- The parameters passed by the event registration (the child component passes the value to the parent component)
<template>
<div>
<p><a @click="click()">click</a></p>
</div>
</template>
<script>
export default {
name: "CT",
props: {
id: {
type: String,
default: "CT",
},
},
data() {
return {
};
},
mounted() {
console.log(this.$options.name);
},
methods: {
click() {
this.$emit('getData', 'from CT data');
},
},
};
</script>
<template>
<div>
<p @click="click($event)">BT</p>
<CT @getData="getData($event)"></CT>
</div>
</template>
<script>
import CT from "./CT.vue";
export default {
name: "BT",
components: {
CT },
data() {
return {
};
},
methods: {
click(event) {
console.log(event);
},
getData(event) {
console.log(event);
}
},
};
</script>
Eight, $emit
$emitIn fact, a broadcast event is sent, and $emittwo parameters can be passed when calling $emit('eventname', data):
- eventname: event name
- data: the data passed along with the event
There are two options for how to receive $emitbroadcast events:
- Use
$onthe method to receive broadcast events:vm.$on( 'eventname', fn ) - Use custom events:
<CT @eventname="fn($event)"></CT>. In fact, the custom event is that vue automatically callsvm.$on( 'eventname', fn )the function for us
Nine, $router
global router 实例. vue 根实例Inject through router 实例, and then inject into 每个子组件, so that the entire application has routing functions. It contains many properties and objects (such as the history object), and any page can also call its push(), replace(), go()methods.
10. $route
The information object of the current 激活route. Each object is 局部的, you can get path, name, params, querythe attributes of the current route.
Eleven, $store
representsnew Vuex({})
12. $nextTick
Execute the delayed callback after the next DOM update cycle ends, and use this method immediately after modifying the data to get the updated DOM.
Thirteen, $root
$rootAccess properties or methods in the root component
this.$root.genMethod();//genMethod()是根组件中的方法名
this.$root.genName;//genName是根组件data中的属性名
Fourteen, $parent
You can directly manipulate the parent component of the current component.
reference
- Talking about the meaning and usage in vue ( meaning and usage (Meaning and its usage ( where xxx refers)
- $ in vue
- The $ symbol of vue
- Common usage of $ in vue
- $ sign in vue
- Detailed explanation of $set usage in vue
- view之$options
- Basic usage of Vue-$refs
- Three usages of $refs in vue
- vue中this. p a r e n t 、 t h i s . parent、this. parent、this.root、this. c h i l d r e n 、 t h i s . children、this. The difference and function of c hi l d re n and t hi s . ref
- In Vue , root accesses the root component, root accesses the root component,root access root component, parent andemit access parent component, emit access parent component,e mi t accesses the parent component, ref accesses the child component