如何使用单独的模板文件构建一个简单的 Vue.js 应用程序? [英] How to build a simple Vue.js application using a separate template file?
问题描述
我是 Vue.js 的新手，我对文件结构以及如何构建一个简单的应用程序感到困惑.
I'm new to Vue.js and I'm confused about file structure and how to build a simple application.
我已经使用以下命令在我的 mac 上安装了 Vue CLI:
I have installed Vue CLI on my mac using this command:
npm install -g @vue/cli
然后我创建了一个计数器项目并使用了默认选项:
Then I created a counter project and used the default option:
vue 创建计数器
然后我启动了应用程序:
Then I started the application:
cd 计数器
npm 运行服务
默认应用程序代码对我来说似乎很混乱，所以我想创建自己的简单应用程序，对我来说更有意义:
The default application code seemed confusing to me so I want to create my own simple application that makes more sense to me:
我在公共文件夹中创建了 counter.html:
I created counter.html inside the public folder:
<html lang="en">
<body>
<div id="counter"></div>
</body>
<script src="../src/counter.js" type="text/javascript"></script>
</html>
我在 src 文件夹中创建了 counter.js 文件:
I created counter.js file inside the src folder:
import Vue from 'vue';
import Counter from './components/counter.vue';
new Vue({
render: h => h(Counter),
}).$mount('#counter')
我在 components 文件夹中创建了 counter.vue 文件:
I created counter.vue file inside the components folder:
<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 <
When I visit my page: http://localhost:8080/counter.html I get a blank page and the console shows the following error: Uncaught SyntaxError: Unexpected token <
非常感谢您对我做错的任何帮助.
Any help on what I'm doing wrong is greatly appreciated.
推荐答案
首先，正如@Dan 所说，脚本标签应该在 中，而不是之后.
First, As @Dan said, the script tag should be in <body>, not after.
也就是说，您的代码存在一些根本性的缺陷:您的按钮正在改变 Count 组件中接收到的属性.
That said, there's something fundamentally flawed in your code : your button is mutating a property received in the Count component.
想象一下，您正在一个更大的应用程序中使用 Counter，并且您想用一个计数值对其进行初始化.你会写:<Counter count="3"/>，但是点击后会变异这个3"变成4"，即使count="3" 是静态写的；由于按钮改变了属性，count 属性的公开声明和它的实际值会不一致.
Imagine that you're using the Counter in a bigger application, and you want to initialize it with a count value. You'd write : <Counter count="3" />, but then clicking would mutate this "3" into a "4", even if count="3" is written statically ; there would be inconsistency between the public declaration of the count property and its actual value due to mutation of the property by the button.
在这里，您有多种选择:
Here, you have multiple choices :
- 不要使用道具，只使用计数组件的内部状态.这种结构的优点是组件是独立的；缺点是在创建组件时无法使用自定义值初始化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>
- 改用事件，并在计数器组件外部保存计数值.这可能是在组件中最容易实现的，但随后需要在父组件中添加额外的代码.这样做的好处是值保存在组件之外，因此可以进行自定义；缺点是，如果没有适当的绑定来更新值，它将无法工作.
- Use events instead, and hold the count value outside the Counter component. This is probably the easiest to implement in the component, but then requires extra code in the parent. The advantage of this is that the value is held outside the component, so customization is possible ; the disadvantage is that, without proper binding to update the value, it won't work.
<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>
然后在您的应用程序中:
and then in your application:
<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>
基本上，经验法则是:
- 不要改变道具并将其视为唯一的事实来源
- 如果您想改变道具，请改为发送一个事件，并希望接收者为您更新道具，然后您就可以收到它的更新.
- Don't mutate a prop and consider it unique source of truth
- If you want to mutate a prop, send an event instead and hope that the receiver will update the prop for you, then you can receive it back updated.
希望对您有所帮助
这篇关于如何使用单独的模板文件构建一个简单的 Vue.js 应用程序?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
