使用Vue的2.1.10Vue.js綁定到DOM自定義事件與名點（如引導事件）
我可以綁定到DOM事件與v-on指令。例如：
v-on:click
綁定到DOM單擊。 但我不知道如何綁定到名稱中有點的事件。如引導程序中的「show.bs.modal」。
目前，我用一種變通方法在created鉤與常規的DOM方法結合，但我真的想用聲明的語法爲。這怎麼能實現？感謝
編輯： 問題是關於可以使用的語法：我怎麼可以這樣做：
Vue.component('comp',{
template:'<div v-on:show.bs.modal="sunrise"></div',
methods:{
sunrise:function(e){
}
}
})
我想點不是v-on支持，但你可以創建一個自定義指令創建活動聆聽該事件。
不知道，如果有什麼更容易，但像在下面的演示或本fiddle應該工作。
演示創建與名點的新的事件，但也應該有引導的事件工作（未測試）。請讓我知道，如果它不適用於引導程序，我會看看。
解除綁定只有當你使用v-if工作。如果你直接用Javascript去除那個元素。該活動將仍然在那裏。
var helloEvent = new Event('demo.event.hello');
document.addEventListener('demo.event.hello', function(e) {
// this is just for testing event dispatching!
console.log('main event listener');
}, false);
const bindCustomEvent = {
getName: function(binding) {
return binding.arg + '.' +
Object.keys(binding.modifiers).map(key => key).join('.');
},
bind: function(el, binding, vnode) {
const eventName = bindCustomEvent.getName(binding);
console.log(el, eventName);
document.addEventListener(eventName, binding.value);
},
unbind: function(el, binding) {
const eventName = bindCustomEvent.getName(binding);
console.log('unbinding', eventName);
document.removeEventListener(eventName, binding.value);
}
};
Vue.directive('bindCustomEvent', bindCustomEvent);
new Vue({
el: '#app',
data() {
return {
enabled: true,
eventMsg: ''
};
},
methods: {
sunrise: function(e) {
console.log('received event');
this.eventMsg = 'received event';
},
testEvent: function() {
document.dispatchEvent(helloEvent);
},
toggle: function() {
console.log('toggle', this.enabled);
this.enabled = !this.enabled;
if (!this.enabled) {
this.eventMsg = '';
}
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="app">
<div v-bind-custom-event:demo.event.hello="sunrise" v-if="enabled">
Hello, {{eventMsg}}
</div>
<!--
The following markup is not working
<div v-on="demo.event.hello:sunrise" v-if="enabled">
Hello, {{eventMsg}}
</div>-->
<button @click="testEvent()">
Change
</button>
<button @click="toggle">
<span v-if="enabled">disable custom event</span>
<span v-else>enable custom event</span>
</button>
</div>
用點你的意思是類的名字？ '.class.name' –
你可以在這個示範問題上拋出一個jsfiddle嗎？ – Austio
@Austio不是「搗鼓」的問題，語法問題，請編輯 – alonisser