如何使用单独的模板文件构建一个简单的 Vue.js 应用程序？

首先，正如@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>基本上，经验法则是：不要改变道具并认为它是唯一的真相来源如果你想改变一个道具，发送一个事件，并希望接收者为你更新道具，然后你可以接收它回来更新。希望这有帮助，

如何使用单独的模板文件构建一个简单的 Vue.js 应用程序？

1回答