Vue.jsでHTML要素に直接アクセスする

jQueryでは、セレクタというものを使って直接HTML要素にアクセスし、属性を変更できていたのですが、Vue.jsではそれが出来ません。

Vue.jsの入門書を読んでも索引に『セレクタ』の項目がありません。

いろいろ調べた結果、HTMLタグにrefという属性をつけると、Vueオブジェクト側からthis.$refsというプロパティでアクセスできるそうです。

■例
HTMLファイル

<a ref="hoge" href="https://www.yahoo.co.jp">Yahoo!Japan</a>

Vue.jsプログラム

var app = new Vue({
    // 〜省略〜
    methods: {
        myfunc: function() {
            // href属性を変更する
            var comp = this.$refs.hoge;
            comp.setAttribute("href", "https://www.google.co.jp");
        }
    }
});

参考サイト

[Vue.js] $refsでコンポーネント内の子要素を触る