ref="Definition label named "
this.$refs.Tag name //Get the corresponding label elementthis.$refs //Get all defined tags
First, we use code to simply get a tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ref Get node</title>
<!-- Introduce vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- ref="aaa":Will mean div This tag is set to the tag that can be acquired and the acquisition name of the tag is aaa -->
<div ref="aaa">I'm a wave</div>
</div>
<script>
let vm = new Vue({
el:'#app',
mounted(){ //mounted lifecycle function (data is triggered when it is attached to a page)
console.log(this.$refs.aaa) //Here we print the results
}
})
</script>
</body>
</html>The operation results are as follows:
Use this.$refs to get multiple tags
Next let's get multiple tags at once:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ref Get node</title>
<!-- Introduce vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- Here are two tags with the same name. Let's see the results. -->
<!-- ref="aaa":Will mean div This tag is set to the available tag and the tag name is aaa -->
<div ref="aaa">I am div aaa paragraph</div>
<p ref="aaa">I am p aaa paragraph</p>
<span ref="xiaoming">I am span</span>
<!-- Introduce subcomponent and set label node name isson -->
<son ref="isson">I am a component.</son>
</div>
<!-- Set up subcomponents son Label -->
<template id="son">
<div>
<div>I am a subcomponent div</div>
<p>I am a subcomponent p</p>
</div>
</template>
<script>
//Define subcomponent son
let son = {
template:'#son'
}
let vm = new Vue({
el:'#app',
components:{ //Register the sub component son in the root component
son
},
mounted(){ //mounted lifecycle function (data is triggered when it is attached to a page)
console.log(this.$refs) //Get all label names that can be obtained by definition
}
})
</script>
</body>
</html>The operation results are as follows:
Next, we get the label of v-for traversal:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ref Get node</title>
<!-- Introduce vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- By giving v-for Can I get the traversal tag? Let's see the running results.-->
<ul>
<li v-for="item in 5" ref="aaa">I'm the number one{{item}}individual li</li>
</ul>
</div>
<script>
let vm = new Vue({
el:'#app',
mounted(){ //mounted lifecycle function (data is triggered when it is attached to a page)
console.log(this.$refs) //Get all tag names that can be obtained by definition
this.$refs.aaa[3].style.color = "red" //We dynamically set the following font colors for the fourth li
}
})
</script>
</body>
</html>The operation results are as follows:
Summary of this lesson:
this.$refs get
1. Get all single nodes with ref Tags 2. If v-for is used to get the same ref tag, multiple nodes will be obtained. 3. If ref is marked on the component, the whole component is obtained.