构建你的第一个Vue.js组件

您可能已经注意到某些属性以冒号为前缀：这是该v-bind指令的简写，它将属性动态绑定到表达式。我们本来可以用它的不省略形式写出来：v-bind:class。

当星号处于激活状态时，我们需要

既然我们的star列表与实际数据绑定，那么我们就应该为计数器做同样的事了。最简单的方法是使用“胡子语法”进行文本插值：

{{ stars }} of {{ maxStars }}

很直白，不是吗？现在在我们的例子中，这可以解决问题，但如果我们需要更复杂的Javascript表达式，最好在计算属性中对其进行抽象。

export default {   ...   computed: {     counter() {       return `${this.stars} of ${this.maxStars}`     }   } }

这里有点矫枉过正。我们可以使用模板内表达式可以保持可读性。然而，当您必须处理更复杂的逻辑时，请记住计算属性。

我们需要做的另一件事是提供一种方法来隐藏计数器，如果我们不想要它。最简单的方法是使用v-if带有布尔值的指令。

{{ stars }} of {{ maxStars }}

data中添加hasCounter属性

export default {   ...   data() {     return {       stars: 3,       maxStars: 5,       hasCounter: true     }   } }

我们差不多完成了，但我们仍然需要实现组件中最有趣的部分：反应性。我们将使用v-on处理事件的Vue.js指令，以及methods一个可以附加所有方法的Vue.js属性。

methods中

export default {   ...   methods: {     rate(star) {       // do stuff     }   } }

我们在上面添加了一个@click属性

“等一下......这看起来非常熟悉HTML的属性。在HTML中使用内联Javascript不是一种过时的错误做法吗？“

确实如此，但即使语法看起来很像，比较两者也是一个错误。当您构建Vue.js组件时，您不应将其视为分离的HTML / CSS / JS，而应将其视为使用多种语言的一个组件。当项目在浏览器中编译后，所有HTML和指令都编译为纯Javascript。如果在浏览器中检查呈现的HTML，则不会看到任何指令的迹象，也不会看到任何属性。Vue.js编译了您的组件并创建了正确的绑定。这也是您可以直接从模板访问组件上下文的原因：因为指令绑定到视图模型。与具有单独HTML的传统项目相反，模板是组件的组成部分。

回到我们的rate方法。我们需要在click时候修改stars为当前li的索引，所以我们从@click指令传递索引，我们可以执行以下操作：

export default {   ...   methods: {     rate(star) {       this.stars = star     }   } }

在浏览器中查看页面并尝试点击星标：它有效！

如果您在浏览器devtools中打开Vue面板并选择该组件，您将在单击星标时看到数据发生变化。这表明您的stars属性是被绑定的：当您对其进行修改时，它会将其更改分派给视图。这个概念称为数据绑定，如果你曾经使用过像Backbone.js或Knockout这样的框架，你应该熟悉它。不同之处在于Vue.js与React一样，仅在一个方向上执行：这称为单向数据绑定。但这个话题又可以用另一篇文章来讨论了

到这个点上，我们可以称之为完成，但我们可以做更多的工作来改善用户体验。

现在，我们实际上不能给出零等级，因为点击一个星标将stars设置为其索引，而li的索引永远大于0。更好的做法是重新点击同一颗星并让它切换当前状态而不是保持活跃状态。

export default {   ...   methods: {     rate(star) {       this.stars = this.stars === star ? star - 1 : star     }   } }

现在，如果点击的星的索引等于当前值stars，我们减少它的值。否则，我们为其赋值star。

如果我们想彻底，我们还应该添加一层保护，以确保stars永远不会分配一个没有意义的值。我们需要确保stars永远不会少于0，永远不会超过maxStars，并且这是一个合适的数字。

export default {   ...   methods: {     rate(star) {       if (typeof star === 'number' && star <= this.maxStars && star >= 0) {         this.stars = this.stars === star ? star - 1 : star       }     }   } }

现在，组件的数据在data属性中是硬编码的。如果我们希望我们的组件实际可用，我们需要能够从其实例传递自定义数据。在Vue.js中，我们用props可以做到。

export default {   props: ['grade', 'maxStars', 'hasCounter'],   data() {     return {       stars: this.grade     }   },   ... }

并在main.js：

new Vue({   el: '#app',   template: '',   components: { Rating } })

这里有三件事需要注意：

首先，我们使用v-bind简写来从组件实例传递props：这就是Vue.js所谓的动态语法。当您想要传递字符串值时，您不需要它，使用文字语法（不带v-bind的正常属性）将起作用。但在我们的例子中，由于我们传递数字和布尔值，所以我们这样做很重要。

props和data特性是在编译时合并了，所以props中的属性会被视图模型中的标签绑定(如果定义了)。但出于同样的原因，我们不能使用相同的名称props和data属性，否则data中的属性会被props中的属性覆盖。

最后，我们定义了一个grade props，并通过它作为一个data的stars属性。之所以我们这样做，而不是直接使用grade props，是因为当我们改变等级时，star会发生修改。在Vue.js中，props是从父母组件传递给孩子组件，而不是相反，所以你不会意外地改变父母的状态。这将违反单向数据流原则并使事情更难调试。这就是为什么你应该不尝试修改子组件内的属性。相反，定义一个data使用prop的初始值作为自己的本地属性，也是一个很好的选择。

我们将使用Vue.js中的一个很不错的功能: prop validation

Vue.js允许您在将数据传递给组件之前对其进行控制。您可以执行以下四项主要操作：检查类型，要求定义prop，设置默认值以及执行自定义验证。

export default {   props: {     grade: {       type: Number,       required: true     },     maxStars: {       type: Number,       default: 5     },     hasCounter: {       type: Boolean,       default: true     }   },   ... }

我们使用类型检查来确保将正确类型的数据传递给组件。如果我们忘记使用动态语法传递非字符串值，这将特别有用。我们还确保grade是符合组件的给定要求进行传递的。对于其他道具，我们定义了默认值，因此即使没有传递自定义数据，组件也能正常工作。

现在我们可以通过执行以下操作来实例化组件：

就是这样！您创建了第一个Vue.js组件，并探讨了很多概念，包括生成与样板谟VUE-CLI，单文件组件，在组件数据传递，scope style，指令，事件处理，计算属性，Vue methods，单方式数据流，props和prop validation。而这仅仅是Vue.js所提供的浅显的功能！

这是一个非常密集的教程，所以如果你不理解一切，不要担心。再次阅读，在各部分之间暂停，探索并摆弄CodeSandbox上的代码。如果您对本教程有任何疑问或评论，请不要犹豫，在微博上@我！

如果您有幸已经读到这里，相信一定对您有所帮助。

本文为翻译文，并添加一些自己的讨论，很多地方不流畅，请见谅。

本文的源码rating-vue-component

作者：mdiep
链接：https://www.jianshu.com/p/d090df712746