Question

我正在使用vue.js作为小型网络应用。整个内容包含在div#app中。如何触发#app之外的函数？

＆＃13;

var app = new Vue({
  el: '#app',
  data: {
    message: 'I am a working vue app'
  },
  methods: { 
    showAlert: function() {
      alert("Hello world");
    }
  }
})

＆＃13;

<html>
<head>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>

  <div id="app">
    {{ message }}
    <button v-on:click="showAlert">Alert</button>
  </div>
  
  <button v-on:click="showAlert">Alert not working</button>
  
</body>
</html>

＆＃13;

Answer 1

在您的情况下，警报不会起作用，因为Vue只会对其模板中的代码执行任何操作。您已将模板标识为recorderDisplayLink?.add(to: RunLoop.current, forMode: RunLoopMode.commonModes)，因此Vue唯一关注的HTML是

#app

在这种情况下，您已经定义了一种 Vue特定的方法，可以将事件处理程序附加到HTML中的其他代码。

<div id="app">
  {{ message }}
  <button v-on:click="showAlert">Alert</button>
</div>

它不起作用的原因是因为Vue甚至不知道代码存在。它不在<button v-on:click="showAlert">Alert not working</button>内。

如果您想从外部触发警报，可以使用任何普通的javascript方法将事件处理程序附加到按钮并调用该方法。例如，

#app

Example

注意：您可能不应将<button onclick="app.showAlert()">Alert not working</button>和捕获id结果的变量设置为相同的名称new Vue()。在大多数浏览器中，app HTML元素在全局范围内公开，现在您有两个名为id的变量。在这种情况下，Vue获胜，但您可以轻松将其更改为

app

以避免混淆。如果你这样做，上面的行将是

var myApp = new Vue({...})

在其包装器之外定位vuejs应用程序

1 个答案: