目標vuejs應用程序外包裝

我正在使用vue.js爲小型網絡應用程序。整個內容被包裝在一個div#app。如何觸發#app以外的功能？目標vuejs應用程序外包裝

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

<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>

來源

2017-04-11 Marian Rick

你不應該這樣做，這是不好的做法。但你總是可以添加id =「app」給body（這也不推薦） – Filip

@Filip你爲什麼認爲這是不好的做法？ – Bert

@BertEvans vue第一次嘗試將它添加到身體時給了我一個警告。 –

在你的情況，該警報是不會工作，因爲Vue公司只打算做什麼用裏面的代碼它的模板。你已經確定的模板#app，使Vue公司而言，唯一的HTML是

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

既然如此，你定義的事件處理程序中的其它地方連接到代碼的Vue公司特定手段你的HTML。

<button v-on:click="showAlert">Alert not working</button>

它不起作用的原因是因爲Vue甚至不知道代碼存在。它不在#app裏面。

如果您想從外部觸發警報，則可以使用任何普通的javascript方法將事件處理程序附加到按鈕並調用該方法。例如，

<button onclick="app.showAlert()">Alert not working</button>

Example。

注意：您可能不應該同時設置id和捕獲new Vue()結果的變量爲app。在大多數瀏覽器中，HTML元素的id暴露在全局範圍內，並且您現在有兩個變量，名稱分別爲app。在這種情況下，Vue獲勝，但您可以輕鬆將其更改爲類似於

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

以避免混淆。如果你這樣做，上面的行將是

<button onclick="myApp.showAlert()">Alert not working</button>

來源

2017-04-11 16:50:24 Bert

目標vuejs應用程序外包裝

回答

相關問題