我是 Vue.js 的新手，我对文件结构以及如何构建一个简单的应用程序感到困惑。我已经使用以下命令在我的 mac 上安装了 Vue CLI：npm install -g @vue/cli然后我创建了一个计数器项目并使用了默认选项：vue create counter然后我启动了应用程序：cd counternpm run serve默认应用程序代码对我来说似乎很混乱，所以我想创建自己的简单应用程序，这对我来说更有意义：我在公共文件夹中创建了 counter.html： <html> <body> <div id="counter"></div> </body> <script src="../src/counter.js" type="text/javascript"></script></html> 我在 src 文件夹中创建了 counter.js 文件：import Vue from 'vue';import Counter from './components/counter.vue';new Vue({ render: h => h(Counter),}).$mount('#counter')我在 components 文件夹中创建了 counter.vue 文件：<template> <button v-on:click="count++">You clicked me {{ count }} times.</button></template><script type="text/javascript"> export default { name: 'Counter', props: [ 'count' ], }</script>然后我运行：npm run build当我访问我的页面时：http://localhost:8080/counter.html 我得到一个空白页面并且控制台显示以下错误：Uncaught SyntaxError: Unexpected token <非常感谢对我做错了什么的任何帮助。
1 回答
白猪掌柜的
TA贡献1893条经验 获得超10个赞
首先，正如@Dan 所说，脚本标签应该在<body>，而不是之后。
也就是说，您的代码存在一些根本性的缺陷：您的按钮正在改变 Count 组件中接收到的属性。
想象一下，您正在一个更大的应用程序中使用 Counter，并且您想用一个计数值对其进行初始化。你会写：<Counter count="3" />，但随后点击会发生变异这个“3”变成“4”，即使count="3"是静态写的; 由于按钮改变了属性，count 属性的公开声明与其实际值之间会存在不一致。
在这里，您有多种选择：
不要使用道具，只使用计数组件的内部状态。这种结构的优点是组件是独立的；缺点是在创建组件时无法使用自定义值初始化“计数”。
<template>
<button v-on:click="count++">You clicked me {{ count }} times.</button>
</template>
<script type="text/javascript">
export default {
name: 'Counter',
data: function() { return { count: 0 } },
}
</script>
改用事件，并将计数值保存在 Counter 组件之外。这可能是在组件中最容易实现的，但随后需要在父组件中添加额外的代码。这样做的好处是值保存在组件之外，因此可以进行自定义；缺点是，如果没有适当的绑定来更新值，它将无法工作。
<template>
<button v-on:click="$emit('increment')">You clicked me {{ count }} times</button>
</template>
<script type="text/javascript">
export default {
name: 'Counter',
props: [
'count'
],
}
</script>
然后在您的应用程序中：
<template>
<counter :count="count" @increment="count++" />
</template>
<script>
export default {
data: () => ({ count: 0 })
}
</script>
前两种解决方案的组合。保持一个内部状态，以便按钮可以管理自己，但也可以使用观察者与外部世界正确同步。
<template>
<button v-on:click="internal_count++">You clicked me {{ internal_count }} times</button>
</template>
<script type="text/javascript">
export default {
name: 'Counter',
props: [
'count'
],
watch: {
count(val) { this.internal_count = val },
internal_count(val) { this.$emit('update', val) },
},
}
</script>
然后在您的应用中：
<template>
<counter :count="count" @update="v => count = v" />
</template>
<script>
export default {
data: () => ({ count: 0 })
}
</script>
基本上，经验法则是：
不要改变道具并认为它是唯一的真相来源
如果你想改变一个道具，发送一个事件，并希望接收者为你更新道具，然后你可以接收它回来更新。
希望这有帮助，
添加回答
举报
0/150
提交
取消