Question

在Vue.js中，v-on:click="..."和使用onclick="..."有什么区别？

我了解使用v-on：click时需要在Vue对象（如example in the docs）中编写处理程序，但是这样做有什么好处呢？只需编写一个onclick="..."来调用函数（在Vue对象外部）就足够简单了。

Answer 1

主要区别之一是范围访问。 onclick的绑定范围是全局的，因此您希望它调用的函数必须可以从全局范围访问。 v-on的范围是Vue模型。

另一件事是Vue提供了一个非常简单的API，用于通过vm.$emit()定义自定义事件。使用v-on:customevent="callback"听这些事件也很容易，可以很容易地在认知上映射到假设的onfizz="callback()"。

考虑到这一点，还应该为统一的API提供v-on:click以及v-on提供的其他扩展。

/*
 * This pollutes scope.  You would have to start
 * making very verbose function names or namespace your 
 * callbacks so as not collide with other handlers that
 * you need throughout your application.
 */
function onClickGlobal() {
  console.log("global");
}

const fizzbuzz = {
  template: "<button @click='onClick'>FizzBuzz</button>",
  methods: {
    onClick() {
      this.$emit("fizz");
    }
  }
};

const app = new Vue({
  el: "#app",
  components: {
    fizzbuzz
  },
  methods: {
    onClickModel() {
      console.log("model");
    },
    onFizz() {
      console.log("heard fizz");
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

<div id="app">
  <section>
    <h2>Buttons and Clicks</h2>

    <!-- Calling function of the bound scope -->
    <button @click="onClickModel">v-on Model</button>
    <!-- Works as well, but calls the global  -->
    <button @click="onClickGlobal">v-on Global</button>

    <!-- You need to explicitly invoke the function from onclick -->

    <!-- This won't work because onClickModel isn't global -->
    <button onclick="onClickModel()">onclick Model</button>
    <!-- Works because onClickGlobal is global -->
    <button onclick="onClickGlobal()">onclick Global</button>

    <!-- You can technically call onClickModel through the global app -->
    <!-- but you really shouldn't -->

    <!-- Works because app.onClickModel is technically global -->
    <button onclick="app.onClickModel()">onclick Global through app.onClickModel</button>

  </section>
  <section>
    <h2>Custom Events</h2>
    <fizzbuzz @fizz="onFizz"></fizzbuzz>
    <!-- The element below doesn't work -->
    <button onfizz="onClickGlobal">Hypothetical Fizz</button>
  </section>
</div>

Answer 2

这与范围有关。回答您的问题“但是有什么好处”：

只要您将它放在小框架中使用，就没有任何好处。但是，一旦您要使用它作为另一个项目，而该项目本身具有一些JS-Components，则您将不得不担心与某些现有全局函数的冲突。在组件本身拥有所有组件的同时，您不必担心任何事情。

v-on：click =“ ...”和Vue.js中使用onclick =“ ...”之间的区别

2 个答案: