Vue笔记四：Vue获取DOM元素和组件元素的方法

文章目录

Vue获取组件元素
ref获取组件元素

Vue获取组件元素

如果想使用哪个DOM元素，就给它加上ref属性，然后用$refs属性获取它的元素对象，示例如下：
全部代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue获取DOM元素的方法</title></head><body><div id="app"><!-- 为h1添加ref属性，属性自定义 --><h1 ref="h1text">yoyo!这里是h1</h1><input type="button" name="单击" @click="btn" value="单击" /></div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script>var vm=new Vue({el:'#app',data:{},methods:{btn(){// 使用this.$refs.自定义属性，即可获取到我们刚刚定义到的标签console.log(this.$refs.h1text)}}})</script></body>
</html>

运行：

ref获取组件元素

可在上一步代码基础之上进行修改
一共是三步
第一步：创建组件，声明数据和方法
第二步：为组件添加ref属性
第三步：通过$refs属性获取组件
全部代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Vue获取DOM元素的方法</title></head><body><div id="app"><!-- 为h1添加ref属性，属性自定义 --><h1 ref="h1text">yoyo!这里是h1</h1><input type="button" name="单击" @click="btn" value="单击" /><login ref="mylogin"></login></div><script src="js/vue.js" type="text/javascript" charset="utf-8"></script><script>// 创建组件loginvar login={template:'<div><h1>登录</h1></div>',data(){return {// 声明数据msg:'子组件内容'}},methods:{// 声明子组件的方法show(){console.log("子组件的方法")}}}var vm=new Vue({el:'#app',data:{},methods:{btn(){// 使用this.$refs.自定义属性，即可获取到我们刚刚定义到的标签console.log(this.$refs.h1text.innerText)console.log(this.$refs.mylogin.msg)this.$refs.mylogin.show()}},components:{login}})</script></body>
</html>

运行

Vue笔记四：Vue获取DOM元素和组件元素的方法相关推荐

Vue.js中$refs{}获取DOM元素
如果我们想获取DOM元素,一般使用js中的document.querySelector来获取这个dom节点,然后在获取元素的值,现在Vue提供给我们一种更便捷的方式来获取DOM元素-----$refs ...
Vue.js实例学习：获取DOM元素
一.获取DOM元素在Vue中获取DOM元素,我们可以用ref. 用法(和React一样): (1)在组件的DOM部分,任意标签中写上:ref="xxx" (2)通过组件对象 t ...
vue 点击div 获取位置_Vue中组件之间8种通信方式，值得收藏
之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么 ...
vue笔记（三）生命周期、组件（嵌套）、数据传递
生命周期文档一.生命周期 1.参考一 2.参考二二.自定义组件 1. 使用:<组件名></组件名> 2. 定义组件: (1)方法一:官网 let 组件变量名 = Vue.e ...
APIS——获取dom对象、操作元素内容和属性、间歇函数
APIS 变量声明 Web API基本认知作用和分类 DOM DOM树 DOM对象获取DOM对象根据CSS选择器来获取DOM元素(重点) 其它获取DOM元素方法(了解) 操作元素内容操作元素属 ...
vue 点击div 获取位置_vue 点击元素滚动到指定位置
{{item}} {{item}} data() {return{ navgator: ['列表A','列表B','列表C','列表D', ], navgatorIndex:0, listBox: [ ...
VUE中自定义一个获取输入车牌号码组件
VUE自定义一个组件来选择输入车牌号码展示样式: 组件事件列表: 事件名称 event 获取车牌 @carNum 返回参数是个数组,每个车牌元素上代码: <template><d ...
【Vue笔记】Vue生命周期函数详细图解
Vue生命周期函数详细图解如下:
vue 导入excel解析_【Vue 笔记】Vue 读取excel数据并生成数组
因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据.找了网上的资料后发现js-xlsx可以实现. 首先安装依赖: $ npm install xlsx HTML部分: 引入: im ...

Vue笔记四：Vue获取DOM元素和组件元素的方法

文章目录

Vue获取组件元素

ref获取组件元素

Vue笔记四：Vue获取DOM元素和组件元素的方法相关推荐

最新文章

热门文章