获取DOM元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <!-- <App></App> --> </div> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript"> var subComponent = { template: ` <div></div> ` }; Vue.component('subCom', subComponent); var App = { data: function() { return { } }, template: ` <div class='app'> <button ref = 'btn2'>我是另外一个按钮</button> <button ref = 'btn'>我是按钮1</button> <button ref = 'btn'>我是按钮2</button> <subCom ref = 'subc'></subCom> </div> `, created: function() { console.log(this.$refs.btn); //返回的是undefined }, beforeMount: function() { console.log(this.$refs.btn); //返回的是undefined }, mounted: function() { // 如果是给标签绑定ref属性，使用this.$refs.xxx 获取的是原生js的DOM对象 // ref 属性值 不能重名 // 如果是给组件绑定的ref属性 那么this.$refs.xxx获取的是组件对象 console.log(this.$refs.btn); console.log(this.$refs.btn2); console.log(this.$refs.subc); } } new Vue({ el: '#app', data: function() { return { } }, template: `<App />`, components: { App } }); </script> </body> </html>
给DOM元素添加事件的特殊情况
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> </div> <script type="text/javascript" src="../js/vue.min.js"></script> <script type="text/javascript"> // 需求：input输入框 获取焦点 var App = { data: function() { return { isShow: false } }, template: ` <div class='app'> <input type="text" v-show = 'isShow' ref = 'input'/> </div> `, mounted: function() { this.isShow = true; console.log(this.$refs.input); // $nextTick 是在DOM更新循环结束之后执行延迟回调，在修改数据之后使用$nextTick 可以在回调中获取到更新后的DOM this.$nextTick(function() { // 更新之后的DOM this.$refs.input.focus(); }) } } new Vue({ el: '#app', data: function() { return { } }, template: `<App />`, components: { App } }); </script> </body> </html>