13_vue属性ref操作DOM元素

1、ref的作用

1)ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
2)如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。
3)当 v-for 用于元素或组件的时候,引用信息将是包含 DOM 节点或组件实例的数组。

2、实例代码演示


<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>01_使用ref操作DOM元素title>
head>
<body>
	<div class="app">
		<p ref="para" @click="chgStyle">hahahahhap>
	div>
body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
<script>
	// ref如何使用
	// 第一:在需要获取的DOM元素上绑定 ref='变量名(如:name1)';
	// 第一:创建的Vue组件中使用this.$refs.变量名进行使用(如:this.$refs.name1.);
	var app = new Vue({
		el: '.app',
		data: {},
		methods: {
			chgStyle () {
				this.$refs.para.style.color = 'red';
				this.$refs.para.style.fontSize = '40px';
			},
		}
	})
script>
html>

你可能感兴趣的:(Vue前端框架)