vue中动态给自定义属性data-xx赋值并读取内容

在 vue 中，尽量避免对dom的操作，通过对状态的管理实现需要的功能

举个例子：
vue获取dom元素可以使用 ref 要想获得自定义属性，可以通过设置 ref 实现

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>

    <button ref="dataNum" id="1"  data-msg="123" @click="togoId($event)">菜鸟教程btn</button>
</div>


<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "菜鸟教程",
            url: "www.runoob.com",
            alexa: "10000"
        },
        methods: {
            togoId(e){
                console.log('e----',e.target.dataset.msg)
                console.log('---1-',this.$refs.dataNum.id)
                console.log('---2-',this.$refs.dataNum.dataset.msg)
            },
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    })
</script>

结果，不同的获取方式，展示的结果