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里使用!
这里是漂亮的分割线