VueJS 读取 Dom 属性答案

【问题标题】：VueJS Read Dom AttributesVueJS 读取 Dom 属性
【发布时间】：2017-01-14 09:47:04
【问题描述】：

我想获取按钮点击事件的 href 属性。

<a v-on:click.prevent="func($event)" href="/user/all/2">
    <i class="fa fa-edit"></i>
    <span>Get Data</span>
</a>

Main.JS 文件

new Vue({
el: 'body',

methods: {
    func: function (event) {
        element = event.target;

        console.log(element); // Output : Select span|i|a element

        href = element.getAttribute('href');
    },
}
});

目标事件不选择元素。它选择被点击的元素。

【问题讨论】：

欲了解更多信息：developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

标签： javascript vue.js vue-resource vue-component

【解决方案1】：

你想要event.currentTarget，而不是event.target。这是情况的一个小提琴：https://jsfiddle.net/crswll/553jtefh/

【讨论】：

不存在执行此操作的 Vue.js 方式吗？
没有。不过，理想情况下，您永远不需要接触 DOM。该 href 应该位于数据中的某个位置，以便您以更好的方式访问。这个问题可能是为了更有趣的事情。

【解决方案2】：

这是“Vue 方式”。 Vue 是关于可重用组件的。所以，先创建组件：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-comp></my-comp>
</div>

<script>
  // register component
  Vue.component('my-comp', {
    template: '<div>Just some text</div>'
  })

  // create instance
  new Vue({
    el: '#app'
  })
</script>

现在添加自定义属性并读取其值：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <my-comp my-attr="Any value"></my-comp>
</div>

<script>
  Vue.component('my-comp', {
    template: '<div>aaa</div>',
    created: function () {
      console.log(this.$attrs['my-attr']) // And here is - in $attrs object
    }
  })

  new Vue({
    el: '#app'
  })
</script>

【讨论】：

但这意味着什么？每个 html 元素都有 vue 组件？为什么在vuejs中获取html属性这么麻烦？
@FrenkyB Vue 并不要求每个元素都是 Vue 元素，但只有列出了子组件的 vue 应用程序/组件或自定义渲染函数才能渲染自定义 vue 标签。它们不会添加到 html 的有效标签清单中，它们会被解析并呈现为原始 html 标签。所以要使用 vue 的大部分功能，你必须嵌套在另一个 vue 中。作为一个快速 hack，我喜欢让 body 元素成为一个除了保存组件列表之外什么都不做的 vue，然后我可以在任何地方使用 Vue

【解决方案3】：

var app = {
        func: function (event) {
            console.log(event.currentTarget.id);//this will get whole html tag
            console.log(event.currentTarget.href);//this will show href value
        }
    }
    // Apps  
    var app_vue = new Vue({
        data: app,
    }).$mount("#app_vue");

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app_vue" v-cloak  class="card" >
    <a v-on:click.prevent="func" href="/user/all/2">
        <i class="fa fa-edit"></i>
        <span>Get Data</span>
    </a>
</div>

【讨论】：