vue中使用ref獲取dom對象

前提條件

本文適用於所有使用 vue 的開發人， 包括初學者。在閱讀本文之前，你應該具備一些前提條件：

• Node.js 10.x或更高版本。在終端或命令提示符下運行 node -v 來驗證你的版本
• npm 6.7 或以上版本
• 代碼編輯器；我強烈推薦 Visual Studio Code
• 把最新版本的 vue 全局安裝在你的機器上
• 在你的計算機上安裝 Vue CLI 3.0。首先用 npm uninstall -g vue-cli 卸載舊的 CLI 版本，然后用 npm install -g @vue/cli 安裝新版本。
• 下載 Vue 入門項目（地址：https://github.com/viclotana/...）
• 解壓縮下載的項目，切換到它所做的目錄並運行 npm install 以使所有依賴項保持最新

 

什么是 ref？

Ref 是 Vue 的實例屬性，用於在應用程序模板中注冊或指示對 html 元素或子元素的引用。

如果將 ref 屬性添加到 Vue 模板中的 html 元素，那么就可以在 Vue 實例中引用該元素甚至子元素。你也可以直接訪問 DOM 元素，它是一個只讀屬性並返回一個對象。

 

為什么 ref 很重要？

ref 屬性對於通過在父 $ref 屬性中作為鍵來選擇包含它的 DOM 元素是至關重要的。例如在 input 元素中放置 ref 屬性會將父 DOM 節點公開為 this.$refs.input，也可以用 this.refs["input"] 的形式。

通過在特定元素的引用上定義方法，可以輕松地操縱 DOM 元素。一個典型的例子是用 this 將焦點添加到輸入元素上：

this.$refs["input"].focus()

通過這種方式，refs 的使用方法以像 JavaScript 中的 document.querySelector('.element') 或 jQuery 中的$('.element') 一樣。可以在 Vue.js 實例內部和外部訪問 $refs。但是它們並不是數據屬性，因此它們沒有響應性。

在瀏覽器中進行模板檢查時，它們根本不顯示，因為它不是 HTML 屬性，只是一個 Vue 模板屬性。

 

Demo

如果你從一開始就關注了這篇文章，現在應該已經下載了 Vue 入門項目並在 VS Code 上打開了它。打開 components 文件夾並將下面的代碼復制到 test.vue 文件中：

<template> <div> <h2>Hello this is for refs man!</h2> <p>You have counted {{this.counter}} times</p> <input type="text" ref="input"> <button @click="submit">Add 1 to counter</button> </div> </template> <script> export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.ref) } } } </script>

現在用以下命令在開發服務器中運行它：

npm run serve

你將看到用戶界面會顯示一個簡單的計數器，該計數器在單擊時會被更新，但是當你在瀏覽器中打開開發人員工具時，你會注意到它沒有記錄日志。

正確的使用語法非常重要，因為這意味着 Vue 不會將此視為錯誤，的確如此。根據我們已經知道的關於 Vue refs的內容，它們會返回一個對象，但是根據未定義的響應來判斷，有些東西是錯誤的。將下面的代碼復制到 test.vue 文件中：

<template> <div> <h2>Hello this is for refs man!</h2> <p>You have counted {{this.counter}} times</p> <input type="text" ref="input"> <button @click="submit">Add 1 to counter</button> </div> </template> <script> export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.$refs) } } } </script>

當你運行並檢查它時，你會發現現在返回了一個對象：

快速查看代碼塊將揭示正確的語法：在模板中它被稱為 ref，但是當我們在 Vue 實例中引用它時，它被稱為 $refs。當不返回 undefined時，這提示是非常重要的。你可以訪問引用元素的每個可能的屬性，包括模板中的元素。

接下來記錄一些我們可能感興趣的屬性。現在你的 test.vue 文件的內容應該是：

<template> <div> <h2>Hello this is for refs man!</h2> <p>You have counted {{this.counter}} times</p> <input type="text" ref="input"> <button @click="submit">Add 1 to counter</button> </div> </template> <script> export default { name: 'Test', data(){ return { counter: 0 } }, methods: { submit(){ this.counter++; console.log(this.$refs) } } } </script> <style scoped> p , input, button{ font-size: 30px; } input, button{ font-size: 20px; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

 

顯示元素

要顯示 DOM 中的 HTML 元素，請進入 submit 方法並將 methods 代碼更改為以下內容：

methods: {
    submit(){
      this.counter++; console.log(this.$refs.input) } }

這里的 input 是你之前在元素中創建的引用名稱（ ref="input"）。它可以是你選擇的任何名稱。

 

顯示輸入的值

要顯示 HTML 元素的輸入值（在用戶界面的文本框中鍵入的字符串），進入 submit 方法並將代碼更改為：

methods: {
    submit(){
      this.counter++; console.log(this.$refs.input.value) } }

這樣就顯示了你輸入的字符串，當然用 vanilla JavaScript 和 jQuery 也可以實現相同的功能。

 

顯示元素的 URL

進入 submit 方法並將代碼更改為：

methods: {
    submit(){
      this.counter++; console.log(this.$refs.input.baseURI) } }

還有許多其他可以通過 ref 返回的對象信息。

 

條件處理

Vue.js 的 refs 也可用於輸出 DOM 元素內部的多個元素，例如使用 v-for 指令的條件語句。 refs 在調用時返回一個 item 數組，而不是對象。為了說明這一點，可創建一個這樣的簡單列表：

<template> <div> <p v-for="car in 4" v-bind:key="car" ref="car"> I am car number {{car}}</p> <button @click="submit">View refs</button> </div> </template> <script> export default { name: 'Test', data(){ return { } }, methods: { submit(){ console.log(this.$refs) } } } </script>

資源搜索網站大全 https://www.renrenfan.com.cn 廣州VI設計公司https://www.houdianzi.com

你可以在 GitHub（https://github.com/viclotana/...）找到本教程的完整代碼。

 

結論

本文講解了怎樣在 Vue.js 中引用 DOM 中的 HTML 元素。你現在可以訪問和記錄所有的元素，例如值，子節點，數據屬性，甚至它的 base URL。

另外我們還學會了實現這一目標的方法。要注意要在 Vue 實例初始化並且渲染組件之后填充 refs，所以不鼓勵在計算屬性中使用 ref，因為它能夠直接操作子節點。