1、HTML DOM querySelector() 方法

按照以前jq方式， CSS 选择器来获取元素标签   [在mounted方法里面执行]

document.querySelector获取的是被选中元素的第一个元素；

document.querySelectorAll获取到所有被选中元素；

eg：document.querySelector("#demo");

document.querySelector(".demo");

document.querySelector("p");

document.querySelector("a, p")

document.querySelector("p.demo");

document.querySelector("a[target]");

2、vue的ref和$refs方法

ref是写在html里面的，相当于标签的索引，$refs 是所有注册过的ref的一个集合，然后通过$refs找到对应的ref，然后进行操作。

ref在dom标签上，则$refs是dom标签；ref在组件上，则$refs是子组件实例；

相同的ref时，到底取得哪一个时问题，所以ref优先级也是比较重要：

1、同一层级有相同的ref，最终通过$refs取得后面的元素(后>前)；

2、嵌套层级(父子关系)的标签，最终通过$refs取得父亲元素(父>子)；

使用方式：以下举例说明：

a、单纯获取当前组件的元素

你好

在js里面用this.$refs.test就可以获取到p标签

等同于：document.getElementById('demo')，但是$refs会减少获取dom节点的消耗

b、当获取的元素的ref是变量

你好

在js里面用this.$refs[this.test]就可以获取到p标签

c、父组件获取子组件的方法

子组件

name:"child",

methods: {

childClick(e) {

console.log(e)

}

}

}

父组件

export default{

name:"parent",

components: {

Child//将组件隐射为标签

},

methods: {

parentClick() {this.$refs.mychild.childClick("我是子组件里面的方法哦"); //调用子组件的方法childClick

}

}

}

既然是取dom，操作dom，所以最好不要在模板或computed里使用！

这里是漂亮的分割线