vue使用方法,vue操作

　　本文主要介绍八个玩vue的小技巧，帮助你更好的理解和使用Vue框架。感兴趣的朋友可以了解一下。

1. 始终在 `v-for` 中使用 `:key`

　　当需要操作数据时，有必要在v-for指令中使用key属性，以保持程序的恒定和可预测性。通过这种方式，Vue可以跟踪组件的状态，并拥有对不同元素的持续引用。在使用动画或者Vue变换的时候，没有key，Vue只会尽量让DOM高效。这可能会导致v-for中的元素出现乱序，或者行为不可预测。如果我们对每个元素都有一个唯一的键引用，我们就可以更好地预测Vue应用程序处理DOM操作的准确性。

2. 使用驼峰式声明 props，并在模板中使用短横线命名来访问 props

　　最佳实践就是遵循每种语言的惯例。在JS中，驼峰声明是标准，在HTML中，是短横线命名。Vue提供了驼峰式声明和短破折号命名之间的转换，所以除了实际声明它们之外，我们不用担心任何事情。

3. 在事件中使用短横线命名

　　发出自定义事件时，最好用破折号命名，因为在父组件中，我们使用相同的语法来监听事件。因此，为了确保我们组件之间的一致性，并使您的代码更具可读性，请坚持在两个地方都使用短横线。

4. 函数式组件

　　一个功能组件是无状态的，它不能被实例化，也没有生命周期或方法。创建一个功能组件也很简单，只需在模板中添加一个功能声明即可。一般适用于只依赖于外部数据变化的组件。因为重量轻，渲染性能也会有所提升。组件所需的一切都通过上下文参数传递。它是一个上下文对象，其特定属性可用于查看文档。这里的props是一个包含所有绑定属性的对象。

5. 重用相同路由的组件

　　开发合作伙伴经常会遇到多条路由被解析到同一个Vue组件的情况。问题是，Vue，出于性能原因，默认情况下不会重新渲染共享组件。如果您尝试使用相同的组件在路由之间切换，什么都不会改变。如果您仍然希望重新呈现这些组件，可以通过在路由器视图组件中提供：key属性来实现。

6. $createElement

　　通常，每个Vue实例都可以访问$createElement方法来创建和返回虚拟节点。例如，您可以使用它在可以通过v-html指令传递的方法中使用标记。在函数组件中，您可以将此方法作为呈现函数中的第一个参数来访问。

7. 使用JSX

　　由于Vue CLI 3默认支持JSX，您现在可以使用JSX编写代码。如果你没有使用过Vue CLI 3，你可以使用巴别塔-插件-转换-vue-JSX获得JSX支持。

8. 作用域插槽实现 UI 和业务逻辑的分离

　　我们经常想要重用一个组件的业务逻辑，但是当我们不想使用组件的UI时，我们可以使用作用域槽将UI与业务逻辑分离。scope slot的总体思路是把DOM结构交给调用者来决定，组件只关注业务逻辑。最后将数据和事件传递给父组件进行处理，由：item=item 调用，从而实现UI和业务逻辑的分离。结合渲染功能，可以达到没有渲染组件的效果。

　　以上是vue看完会学到的八个小技巧的详细内容。更多关于Vue技能的信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。