Vue中獲取dom元素

Vue.js雖然說是數據驅動頁面的，但是有時候我們也要獲取dom對象進行一些操作。

vue的不同版本獲取dom對象的方法不一樣

 

Vue.js  1.0版本中，通過v-el綁定，然后通過this.els.XXX來獲取

Vue.js  2.0版本中。我們通過給元素綁定ref=“XXX”，然后通過this.$refs.XXX或者this.refs['XXX']來獲取

 

 

以2.0為例：

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">點擊</el-button>
  </section>
</template>
<script> export default { methods: { get() { console.log(this.$refs['hello']); console.log(this.$refs.hello); } } } </script>

 

 

 

vue中操作dom需要謹慎，尤其是添加或刪除dom的時候，特別是mounted()和created()的時候，此時dom對象還沒有生成，要放在this.nextTick()的回調函數中。

 

 

嗯，就醬~~