<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1">
<!--<link href="../Js/vue/index.css" rel="stylesheet" />-->
<script src="../Js/vue/vue.js"></script>
<script src="../Js/jQuery/1.8.3.js"></script>
<!-- 引入组件库 -->
<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/theme-chalk/index.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.14/index.js"></script>
<!-- 调用测试test.vue组件 -->
<script src="Product/test.vue" id="test" type="text/x-template">
</script>
</head>
<body style="margin:0px;padding:0px; overflow-y:hidden; ">
<div id="app">
<el-dialog title="提示"
:visible.sync="showSetting.showProductAdd"
width="30%">
<!-- 使用组件 -->
<test></test>
</el-dialog>
</div>
</body>
<script>
//2、JS调用C#s
var hostObject = window.chrome.webview.hostObjects.customHost; //定义对象customHost，方便js函数调用
var myVue = new Vue({
el: '#app',
components: {
'test': { // 组件名，在父组件中使用标签方式即可
// 定义组件模板，来自定义的script标签模板
template: '#test',
data() { // 注意此处data声明的方式与脚手架一致
return {
dialogVisible: true
}
},
}
}):
</script>
</html>
其中test.vue的内容
<template>
<div>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
</div>
</template>
<script>export default {
data() {
return {
dialogVisible: false
}
},
}</script>
其中报错了。
HTML5中调用vue组件报错了，vue是采用的2.0，辛苦各位指点
