链接1：https://www.cnblogs.com/xumqfaith/p/7743387.html
链接2：https://www.cnblogs.com/goloving/p/9404099.html
简书链接1：https://www.jianshu.com/p/623c8b009a85
简书链接2：https://www.jianshu.com/p/1eb0f9b53ee4
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。--官网简介
ref 有三种用法：
1、ref 加在普通的元素上，用this.$refs.name 获取到的是dom元素
2、ref 加在子组件上，用this.$refs.name 获取到的是组件实例，可以使用组件的所有方法。
3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
ref本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs也不是响应式的，因此不可以用它在模板中做数据绑定。 <!-- jQuery 疯狂的操作DOM节点
VUE 不去操作DOM节点，数据驱动
ref的使用场景
音乐或者视频的操作
找到节点
建议大家不要经常去操作DOM,尽量少的去使用ref，能用vue内置的方法，我们就用内置方法
-->
<div id="app">
<h1 ref=‘msg‘>{{msg}}</h1>
<div>
<p>音乐</p>
<audio ref=‘a‘
src="http://m8.music.126.net/20200302101820/185c6e30b5062a0b55fd153b08cec986/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3"></audio>
//音乐地址
</div>
<button @click=‘goPlay‘>播放音乐</button>
<button @click=‘goPause‘>暂停音乐</button>
<button @click=‘onebut‘>点击一下试试</button>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
// 属性
msg: ‘今天周一，真好‘
},
methods: {
// 方法
//音乐播放事件
goPlay() {
console.log(‘我要播放了‘)
this.$refs.a.play()
},
//暂停音乐事件
goPause() {
this.$refs.a.pause()
},
onebut() {
console.log(this.$refs.a);
// <audio src="http://m8.music.126.net/20200302101820/185c6e30b5062a0b55fd153b08cec986/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3" ></audio>
}
},
watch: {
// 监听
},
computed: {
// 计算属性
},
filter: {
// 局部过滤器
},
// 在挂载时
mounted() {
console.log(this, ‘vue实例‘)
console.log(this.$refs.a, ‘获取音乐播放器‘)
console.log(this.$refs.msg.innerText, ‘获取h1标签的内容‘)
},
beforeDestroy() {
},
})
// let audio = document.querySelector(‘audio‘)
// console.log(audio,‘播放器‘)
</script>
基本组件网址1：https://www.cnblogs.com/wentutu/p/10917228.html
基本组件网址2：https://www.cnblogs.com/ly2646/p/9462369.html
组件网址3：https://www.cnblogs.com/awjbky/p/11465261.html
csdn 组件网址4：https://blog.csdn.net/wxw20147854/article/details/82829096
网址四 ：https://segmentfault.com/a/1190000010527064
1、
<div id="app">
<h1>{{msg}}</h1>
<hello></hello>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
msg: ‘今天周一，真好 下方简单的组件‘
},
methods: {},
watch: {},
computed: {},
filters: {},
components: {
//把组件名称 当做一个标签去使用
hello: {
template: ‘<h1>你好我是一个组件</h1>‘
}
},
mounted() {},
beforeDestroy() {},
})
</script>
<div id="app">
<h1>{{msg}}</h1>
<one></one>
<DIV></DIV>
<P>我是大写段落</P>
<p>我是小写段落</p>
<as></as>
<a-H></a-H>
<a-h></a-h>
</div>
<script>
new Vue({
el: ‘#app‘,
data: {
msg: ‘今天周一，真好‘
},
methods: {},
watch: {},
computed: {},
filters: {},
components: {
one: {
template: "<h1>采菊东篱下</h1>"
},
DIV: {
template: ‘<span>我是div组件<span>‘
},
as: {
template: ‘<div>我是as组件</div>‘
},
aH: {
template: ‘<h1>我是aS驼峰命名法</h1>‘
}
},
mounted() {},
beforeDestroy() {},
})
</script>
<div id="app">
<h1>{{msg}}</h1>
<one></one>
<h1>{{str}} 121212不能出现</h1>
</div>
<template id="one">
<div>
<h1>我是组件一</h1>
{{str}}
<hr>
<button @click=‘getShow‘>点击我有惊喜</button>
<hr>
<!-- <one></one> -->
<hr>
</div>
</template>
<script>
new Vue({
el: ‘#app‘,
data: {
msg: ‘今天周一，真好‘,
str: ‘白毛浮绿水vue data中的‘
},
// data(){
// return {
// msg: ‘今天周一，真好 方法里的‘,
// str: ‘白毛浮绿 水 方法里的‘
// }
// },
methods: {},
watch: {},
computed: {},
filters: {},
// 组件的
components: {
/* The "data" option should be a function that returns a per-instance value in component definitions.
这个错误信息的意思是，组件中这个data应该是个函数
data functions should return an object:
而且这个函数必须有一个return ，return一个对象
*/
one: {
template: ‘#one‘,
data() {
return {
str: ‘我是组件中str‘
}
},
methods: {
getShow() {
console.log(‘我就是惊喜‘)
}
},
watch: {},
computed: {},
filters: {},
components: {}
}
},
mounted() {},
beforeDestroy() {},
})
</script>
原文：https://www.cnblogs.com/3526527690qq/p/12396964.html