在 Vue 中获取 DOM 元素
一、获取 DOM 元素。
1、在 template 中标识元素 ref="xxx"。
2、通过 this.$refs.xxx 获取元素。
3、在组件内通过 this.$el 可以获取整个组件的 DOM。
<div> <button>我是按钮</button> <button>我是另一个按钮</button> <div></div> </div>
代码如下:
<div id="app"> <App></App> </div> <script type="text/javascript" src="../vue/vue.js"></script> <script type="text/javascript"> var subComponent = { template:`<div></div>` }; Vue.component('subCom',subComponent); var App = { template:` <div> <button ref='btn'>我是按钮</button> <button ref='btn2'>我是另一个按钮</button> <subCom ref='subc'></subCom> </div> `, data(){ return{ } }, beforeCreate:function(){ // 组件创建之前 console.log("创建之前:" + this.$refs.btn); }, created:function(){ // 组件创建之后 // 使用该组件,就会调用created方法,在created这个方法中可以操作后端的数据,数据响应视图 console.log("组件创建之后获取:" +this.$refs.btn); }, beforeMount:function(){ // 挂载数据到DOM之前会调用 console.log("挂载数据到DOM之前" + this.$refs.btn); }, mounted:function(){ // 挂载数据到DOM之后会调用 Vue作用以后的DOM //如果给标签绑定ref属性,使用this.$refs.xxx获取的是原生js的DOM对象 // 如果给组件绑定的ref属性,那么this.$refs.xxx 获取的是组件对象 // ref属性值不能重名 console.log(this.$refs.btn); console.log(this.$refs.btn2); console.log(this.$refs.subc); }, beforeUpdate:function(){ }, updated:function(){ }, } new Vue({ el:'#app', data(){ return{ } }, template:``, components:{ App, } }); </script>
总结:一是 ref 在DOM 上获取的是原生 DOM 对象。二是 ref 在组件上获取的是组件对象,这个对象就相当于我们平时玩的this,也可以直接调用函数。
二、给 DOM 元素添加事件。
需求:input 输入框获取焦点事件。
this.$nextTick 是在DOM更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick可以在回调中获取更新后的DOM。
<div id="app"> <App></App> </div> <script type="text/javascript" src="../vue/vue.js"></script> <script type="text/javascript"> // 需求:input 输入框获取焦点 var App = { template:` <div> <input type="text" v-show = 'isShow' ref='input' /> </div> `, data(){ return{ isShow:false } }, mounted:function(){ this.isShow = true; /*$nextTick 是在DOM更新循环结束之后执行延迟回调, 在修改数据之后使用$nextTick可以在回调中获取更新后的DOM*/ this.$nextTick(function(){ // 更新之后的DOM this.$refs.input.focus(); }); }, } new Vue({ el:'#app', data(){ return{ } }, template:``, components:{ App, } }); </script>