vue.js - 如何从 Vue.js v-bind 调用 JavaScript 函数

Question

我想从 Vue.js v-bind 属性中调用纯 JavaScript 函数。我可以通过 Vue.js 数据变量引导它来实现，但直接从 v-bind 调用纯 JavaScript 函数会产生错误。

http://jsfiddle.net/edwardtanguay/2st0fruh

我怎样才能直接调用 JavaScript 函数，而不必映射到 Vue.js 中的变量或方法？

HTML

<div id="app">
  <div>
    The URL is: {{url}}
  </div>
  <div>
    <a target="_blank" v-bind:href="url">goto URL</a>
  </div>
  <div>
    <a target="_blank" v-bind:href="url2">goto URL2</a>
  </div>
  <div>
    <a target="_blank" v-bind:href="getUrl()">goto URL2 using javascript function</a>
  </div>
</div>

JavaScript

function getUrl() {
    return 'http://www.amazon.com';
}

var vm = new Vue({
    el: '#app',
    data: {
        url: 'http://www.google.com',
    url2: getUrl()
    }
});

Answer 1

为了让 Vue 能够绑定(bind)自己，它需要成为 Vue 实例的一部分。虽然您的函数在正常情况下可能可以访问，但它不是 vue 实例的一部分，因此无法访问。

正如您已经说过的，使用 data Prop 将其移动到 vue 实例的范围内。如果值可能发生变化，您也可以为此使用 computed 属性。

根据 this post from the vue author(Evan You)关于使用全局函数:

Because implicitly falling back to globals will be a maintainability nightmare. When you look at a template you will have no idea whether a variable belongs to the component, or some globals defined by someone you have no idea where.

值得注意的是，如果您觉得这是您非常想做的事情，您可以使用全局混合并在其中指定一些方法来获取 Urls。

有一种方法可以做到这一点，但我不推荐这样做:

参见 this fiddle

基本上，您将自己的函数添加到 Vue.prototype(这就是 Vue Router 和 Vuex 的工作方式):

Vue.prototype.$myFunc = function getUrl() {
    return 'http://www.amazon.com';
}

确保在创建var vm = new Vue() 调用之前声明它。

然后您可以通过模板中的 $myFunc() 或 vue 实例本身中的 this.$myFunc() 访问它。