Vue_Demo/20_脚手架/vue_code/01.src_ref属性解析/App.vue

<template>
  <div>
    <h2 v-text="msg" ref="title"></h2>
    <h2 v-text="msg" id="title2"></h2>
    <button @click="showDOM">点击打印上面DOM</button>
    <School ref="sch"/>
    <School id="sch2"/>
  </div>
</template>

<script>
import School from "./components/School.vue";
export default {
  name: "App",
  components: {
    School
  },
  data() {
    return {
      msg: "Hello!"
    }
  },
  methods:{
    showDOM() {
      // 获取html标签对应的DOM
      console.log("title", this.$refs.title)
      // 获取html标签对应的DOM
      console.log("title2", document.getElementById('title2'))
      // 获取VueComponent对应实例
      console.log("sch", this.$refs.sch)
      // 获取html标签对应的DOM
      console.log("sch2", document.getElementById('sch2'))
    }
  }
}
</script>

<style scoped>

</style>