我一直在玩Vue Js，并希望在Eclipse的前端使用它创建一个虚拟的Java EE Web应用程序。根据我可以辨别的，Vue单个文件组件使用一些构建引擎（如Webpack等）编译成单个JavaScript文件。我现在不想这样做。所以我试图创建模拟.vue文件的JavaScript文件。但由于某种原因，Vue指令正被从生成的HTML中删除。这是说明性代码：
/** vuetest.js
* Javascript file that emulates a .vue file, to facilitate easy prototyping within an
* Eclipse Dynamic Web Application without having to compile single file Vue components
* outside of the IDE.
*/
var appTemplate = `
<div style="width:100%">
<div class="div-style"><a v-on:click ="alert('Working...');">Test</a></div>
<div class="div-style-two"><a onclick ="alert('Working...');">Test 2</a></div>
</div>
`;
var style = `<style type='text/css'>
.div-style {
float:left;
width: 50%;
background-color: orange;
}
.div-style-two {
float:right;
width: 50%;
background-color: blue;
}
</style>`;
$(style).appendTo("head");
Vue.component('app-content', {
template: appTemplate
});
var app = new Vue({
el: '#app'
});
和
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Vue Directives Test</title>
<script src="lib/vue.js"></script>
<script src="lib/jquery-3.3.1.js"></script>
</head>
<body>
<div id="app">
<app-content></app-content>
</div>
<script src="js/vuetest.js"></script>
</body>
</html>
除了v-on指令外，一切正常;它被从已编译的模板中删除。我错过了什么？
提前感谢您的帮助！
答案 0 :(得分：0)
v-on不存在v-on指令;它被从已编译的模板中删除。我错过了什么？
Vue.js在编译后删除所有指令属性，因此您呈现的标记干净整洁。 （source）
因此，v-on不在HTML中，但 。
在您的情况下，您还会收到如下错误：
VM5894 vue.js：584 [Vue警告]：财产或方法＆＃34;
alert＆＃34;不是 在实例上定义但在呈现期间引用。确保这一点 此属性在数据选项中是反应性的，或者用于 基于类的组件，通过初始化属性。看到： https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties在
中找到---＆GT;
<AppContent><Root>VM5906：2未捕获的TypeError：
alert不是函数
这是因为Vue希望alert成为组件上的方法。尝试将methods: { alert: alert.bind(window) }添加到您的组件声明中：
Vue.component('app-content', {
template: appTemplate,
methods: { alert: alert.bind(window) }
});
上面的代码会使组件的alert()方法成为window.alert()方法。