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:界面代码结构
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:界面效果
为人：谦逊、激情、博学、审问、慎思、明辨、 笃行
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 换了个头像，静静的想，默默的思恋，一丝淡淡的忧伤 ----------
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
====================================================================
