Vue.JS 2.5.1:未捕获的SyntaxError:意外的令牌导出 [英] Vue.JS 2.5.1 : Uncaught SyntaxError: Unexpected token export
问题描述
我试图使用VueJS和Bootstrap Vue制作一个单选按钮，但是当我这样做时会发生这种情况.我希望这和它说的一样是语法错误，但是我似乎找不到任何线索.
I was trying to make a radio button using VueJS and Bootstrap Vue, but this happens when I make it. I'm expecting this to be syntax error just like what it said, but I can't seem find any clue.
所以我试图复制粘贴的代码，这是test_radio.php的完整代码
So I tried to copy pasted the code, here's the full code of test_radio.php
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
</head>
<body>
<template>
<div>
<b-form-group label="Radios using <code>options</code>">
<b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
</b-form-radio-group>
</b-form-group>
<b-form-group label="Radios using sub-components">
<b-form-radio-group id="radios2" v-model="selected" name="radioSubComponent">
<b-form-radio value="first">Toggle this custom radio</b-form-radio>
<b-form-radio value="second">Or toggle this other custom radio</b-form-radio>
<b-form-radio value="third" disabled>This one is Disabled</b-form-radio>
<b-form-radio :value="{fourth: 4}">This is the 4th radio</b-form-radio>
</b-form-radio-group>
</b-form-group>
<div class="mt-3">
Selected: <strong>{{ selected }}</strong>
</div>
</div>
</template>
<!-- Vue.js @2.5.1 -->
<script type="text/javascript" src="js/vue.js"></script>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<!-- The error is below -->
<script>
export default {
data () {
return {
selected: 'first',
options: [
{ text: 'Toggle this custom radio', value: 'first' },
{ text: 'Or toggle this other custom radio', value: 'second' },
{ text: 'This one is Disabled', value: 'third', disabled: true },
{ text: 'This is the 4th radio', value: {fourth: 4} }
]
}
}
}
</script>
</body>
</html>
我很确定Export上的代码有错误，但是我已经检查了很多次，而且似乎找不到语法上的错误.
I'm pretty sure there's a mistake on the code on Export, but I already checked many times and I can't seem to find the error in the syntax.
我对Javascript，Vue.JS和Bootstrap Vue还是陌生的，所以任何帮助都会有用，谢谢！无论如何，这段代码来自Bootstrap Vue的文档.
I'm still new to Javascript, Vue.JS, and Bootstrap Vue, so any help would be useful, thanks! Anyway this code comes from Bootstrap Vue's documentation.
推荐答案
如果您要使用CDN方法，则VueJS的启动方式类似于
If you are going to use the CDN approach, VueJS starts out like
<!-- Begin of area that is impacted by VueJS -->
<div id="app">
<b-form-group label="Radios using <code>options</code>">
<b-form-radio-group id="radios1" v-model="selected" :options="options" name="radioOpenions">
</b-form-radio-group>
</b-form-group>
</div>
<!-- End of area that is impacted by VueJS -->
<script>
var app = new Vue({
el: '#app',
data: {
...
}
})
<script>
'#app'是将各节绑定在一起的，而不是将它们导入/导出的
The '#app' is what ties the sections together, not import/export
这篇关于Vue.JS 2.5.1:未捕获的SyntaxError:意外的令牌导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
