$开头的变量
It's just Vue
a naming rule, in order to 区分普通变量属性
avoid our own declaration or adding 自定义
attributes 覆盖
.
1. $data
The instance attribute of vue $data
is used to get data
the data in the equivalent of using this
get.
<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
$watch
The function is actually watch
the same as the configuration item, both are used to monitor a variable, the difference is:
$watch
The function is more flexible, you can add monitoring anytime and anywhere$watch
The function needs to be destroyed manually, and the configuration itemwatch
will 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 Vue
associated with the instance DOM
, pointing to the root tag in the $el
current component template.template
Four, $set
4.1 Problems with two-way data binding in vue
Limited by ES5
, cannot Vue
detect 对象属性
or 添加
. 删除
Because Vue
at 初始化实例
the time 属性转为 getter/setter
, the attribute 必须
can data
对象上
才
be Vue.js
converted to make it be 响应的
.
Just like the following, there is one more vue并不能察觉
to data
the 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.$set
the instance method, which is Vue.set
an 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
vue
Instance attributes $options
are one 对象
, the sum vue
of 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 ref
the 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.
$refs
Basic usage ofref
The attribute is added to普通元素
the above, andthis.refs.(ref值)
the obtained isdom元素
ref
The attribute is added to子组件
the above, andthis.refs.(ref值)
what is obtained with is that组件实例
you can use all components方法
.- If
ref
is循环
out, there are multiple重名
, thenref
the value of will be one数组
vue
$refs
Points to pay attention to the attributes inref
It needsdom渲染完成
to be available later, make sure when using itdom已经渲染完成
. Such as calling in a lifecyclemounted(){}
hook, orthis.$nextTick(()=>{})
calling in .$ref
itself as渲染结果
being created,初始渲染
they cannot be accessed at the time, and do not exist$refs
Not 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
$emit
In fact, a broadcast event is sent, and $emit
two 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 $emit
broadcast events:
- Use
$on
the 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, query
the 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
$root
Access 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