vue--day38--vue的ref 属性

vue的ref 属性，，类似于原生 document.getElementById("smy")  获取标记dom 节点的信息

 

App.vue 的文件如下面所示

<template>

<div>

<h1 v-text="msg" ref="title"></h1>

<button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>

<!-- school 组件最外侧的根元素上面-->

<!-- <School id="sch"/> -->

<School ref="sch"/>

 

 

 

</div>

</template>

<script>

//引入school 组件

import School from './components/School.vue'

export default {

name: 'App',

components: {

School

},

data(){

return {

msg:"欢迎学习vue"

}

 

},

methods:{

showDOM(){

// 一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例

//类似原生的 document.getElementById("smy"）

//console.log(document.getElementById("smy"));

console.log(this.$refs.title); //真实dom 元素

console.log(this.$refs.btn); //真实dom 元素

console.log(this.$refs.sch); // School 组件的实力对象vc

//console.log(document.getElementById("sch"));

// school 组件最外侧的根元素上面

// <div data-v-3375b0b8="" class="school" id="sch">

// <h2 data-v-3375b0b8="">学校名称洛阳理工</h2>

// <h2 data-v-3375b0b8="">学校地址洛阳</h2>

// </div>

}

}

}

</script>

<style>

#app {

font-family: Avenir, Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

}

</style>