/**PageBeginHtml Block Begin **/ /***自定义返回顶部小火箭***/ /*生成博客目录的JS 开始*/ /*生成博客目录的JS 结束*/

Vue 中的 Ref


Vue 中的 Ref

1：ref说明


 <!--
    ## ref属性

    1. 被用来给元素或子组件注册引用信息（id的替代者）
    2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
    3. 使用方式：
        1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
        2. 获取：```this.$refs.xxx```

 -->


2:界面代码结构

image

3：具体代码内容

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*关闭语法检查*/
})


main.js

 //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue生产提示
Vue.config.productionTip=false;
// 创建Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App)
   });

App.vue


 <!--
    ## ref属性

    1. 被用来给元素或子组件注册引用信息（id的替代者）
    2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
    3. 使用方式：
        1. 打标识：```<h1 ref="xxx">.....</h1>``` 或 ```<School ref="xxx"></School>```
        2. 获取：```this.$refs.xxx```

 -->

<template>
  <div>
    <!-- ref:标识符 原生Dom的id标识符替代者-->
    <h1  v-text="msg" ref="title"></h1>
    <button ref="btn" @click="showDom">点击输出上方的Dom元素信息</button>
    <hr/>
    <div class="divCss">
        <h1 class="h1Css">验证闭合标签组件在脚手架环境下渲染情况</h1>
        <School ref="schoolRef" />
        <School id="schoolId"/>
        <School />
    </div>

  </div>
</template>

<script>

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

    export default {
        name:'App',
        components:{
            School
        },
        data(){
            return {
                msg:"欢迎新同学来此学习！"
            }
        },
        methods: {
            showDom(){
               console.log("@@ title ===>",this.$refs.title); //真是DOM元素
               console.log("@@ btn ===>",this.$refs.btn); //真是DOM元素
               console.log("@@ schoolRef ===>",this.$refs.schoolRef); //School组件的 实例对象(vc)
               console.log("@@ schoolId ===>",document.getElementById("schoolId")); //真是DOM元素
            }
        }
    }
</script>


<style>
   .divCss{
        background-color: chocolate;
        margin: auto;
        padding: 20px;
   }
   .h1Css{
        font-size: 36px;
        color: white;
   }
</style>

School.vue

<template>
    <div  class="schoolClassStyle">
      <h2>学校名称：{{name}}</h2>
      <h2>学校地址：{{address}}</h2>
    </div>
</template>

  <script>

      export default {
        name:'School',
        data () {
          return {
            name:'华南师范大学',
            address:'广州市天河区中山大道西55号',
          }
        }
      }
  </script>


 <style>
    .schoolClassStyle{
      background-color: aquamarine;
    }
  </style>





index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 针对ie浏览器的一个特殊配置，含义是让ie浏览器以最高的渲染级别进行渲染界面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 开启移动端理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置页签的图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置网页的标题：找 package.json文件里的 "name": "vue_test" 值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果浏览器不支持js，则该标签的元素里的内容将会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>









4:界面效果

image

posted @ 2022-12-03 16:00  一品堂.技术学习笔记  阅读(334)  评论(0)  编辑  收藏  举报