我是Syncrasy Tech（IT解决方案公司）的全职开发人员。 我喜欢编写React代码。 但是，为什么我要在这里告诉您这一点，以讨论Web开发的Vue.js最佳实践。 我告诉您这一点，以便您了解我的背景以及为什么在这里讨论Vue.js。
我喜欢编写React代码，但我讨厌阅读它们。 这就是我无法编码的原因。 即使采用了最佳的代码审查实践，我也无法弄清楚React组件的嵌套，它们只是有助于在Web应用程序中创建更复杂的UI结构。
解决此问题的方法是Vue，它现在在Web应用程序开发中并不是那么新。 我听说过很多有关Vue异步组件，服务器端渲染，工具和库的信息。 也许您会发现无数的术语令人困惑。 相信我，您并不孤单，许多不同级别的开发人员在不了解Vue最佳实践时也会有相同的感受。
几天后，我终于决定将代码纳入其中。 我在这里分享的是从我在Vue的经验中学到的众多最佳实践。 我准备分享我的发现。
让我们开始吧
尝试一次在Vue上学习所有内容可能会让人不知所措。 让我们从数字开始。 如今，Vue拥有14.7万个Github的星星，仅次于Angular（50.6k星星）和React（135k星星）等JS巨人。
我将Vue的最佳做法分为四类：
Vue功能
Vue的功能有很多东西可以在后台自动讨论。 Vue.js是一个简单的面向视图的平台，这是它的第一个主要优点。 编码中的所有信息只有与命名视图和嵌套命名视图正确交互时才有效。
在Vue中创建单个视图非常简单，您只需加载界面并添加JavaScript即可开始开发Web应用程序。
let vm = new Vue({ el: "#my-webapp", data: { firstName: "MyFamous", lastName: "Magazine", } })
然后，进行一些标记以获得最终视图：
<div id="my-webapp"> <h1>Hello, {{firstName}} {{lastName}}!</h1> </div>
上面的代码揭示了什么？
上面的编码示例显示了Vue如何在不使用代码的情况下自动呈现元素。 简单语法用于发送数据以直接查看。 添加实例属性可用于Vue元素渲染。
Vue系统（例如JQuery）将信息保存在DOM中，并且开发人员需要对所有其他更改进行渲染和修改相关部分。 让我们进入Vue功能的其他部分。
组成部分
对于Web应用程序，Vue开发人员可以通过使用Vue.compoment像其他库一样使用组件。 组件可以包括名称，配置或标识符。
Vue.component('component-name', { /* options */ })
单文件组件非常适合中小型Web开发项目。 由于JavaScript逻辑，CSS样式和HTML代码模板的优势，在单个文件中使用Vue组件非常容易。 另外，请参见示例：
<template> <p>{{ hi }}</p> </template> <script> export default { data() { return { hi: 'Hi Folks!' } } } </script> <style scoped> p { color: yellow; } </style>
Vue单个文件组件使用WebPack来提供使用现代Web功能并将其应用到Web应用程序的能力。 编码人员可以使用预处理器指定使用Pug构建的模板：
打字稿
SCSS
萨斯
少一点
邮政
哈巴狗
Vue v-bind函数允许组件接受来自父组件（Props）的数据，这些数据可以在字符串数组中看到：
props:{ title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise: Promise // or any other constructor }
这不仅会记录您的组件，还会在浏览器的JavaScript控制台中传递错误的代码类型时向您发出警告。
简而言之，Vue为Web应用程序开发人员提供了极大的灵活性，使其适合于不同的开发策略，并且还促进了与不同Vue库的交互。
事件和处理程序来处理Vue中的错误
Vue JS是一个渐进式JS框架，专注于视图层和支持库的系统。 对于使用Vue的Web应用程序开发的所有阶段，将在指令v-on和冒号v-on创建事件，这些指令用于识别事件类型，例如v-on点击。
v-on的一个简单示例可以是：
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div>
Vue中的HTML DOM事件的一些示例：
在变化
点击
悬停时
负载
鼠标移出时
鼠标悬停时
负载
Vue JS中的事件处理程序
分配了处理程序来处理事件中发生的错误。 它允许开发人员在触发指定事件时编写代码。
Vue中的条件渲染和循环
Vue中的条件渲染意味着如果指定值为true，则从DOM中删除或添加一些元素。 这是条件数据绑定的最佳方法，它允许开发人员在特定条件为真时连接信息。 您可以使用v-if指令进行条件渲染。
看一个例子：
<template> <div> <h1 v-if="isActive">Hello Vuejs</h1> <button @click="isActive= !isActive">Click</button> </div> </template> <script> export default{ data:function(){ return{ isActive:false } } } </script>
您可以使用v-else扩展v-if指令：
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else>Hey Vuejs</h1>
您可以使用v-else-if块进一步扩展它：
<h1 v-if="isActive">Hello Vuejs</h1> <h1 v-else-if="isActive && a.length===0">You're vuejs</h1> <h1 v-else>Hey Vuejs</h1>
如果程序员想要评估的值是true，则运行v-if模板。 对于进一步的扩展，将触发v-else或v-if-else指令。
Vue JS包含一个简单的API协议，该协议允许为v-for指令腾出空间，该指令将项目列表呈现到DOM中。
范例：
<template> <ul> <li v-for="user in users">{{user.name}}</li> </ul> </template> <script> export default{ data:function(){ return{ users:[ {id:1,name:"samuel"}, {id:2,name:"queen"}, {id:3,name:"rinha"}, ] } } } </script>
在上面的编码中，循环使用v-for指令以数组的形式遍历代码。 数组是指允许用户查看数组内部存在的属性的对象。
输出：
samuel queen rinha
双向数据绑定以加快开发过程
Vue的主要功能之一是它的反应性双向绑定，该绑定使您的数据，数组和变量与DOM保持同步，而无需执行任何其他操作。 Vue使用v-model指令进行双向绑定。 v-model指令使用v-model指令将输入元素绑定到name属性，该指令会更新输入字段并更新与其链接的name属性字段。
如何运作？
<template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script> <template> <input v-model="name" placeholder="name"/> <p>{{name}}</p> </template> <script> export default{ data:function(){ return{ name:"" } } } </script>
v-model指令带有.lazy修饰符的选项， .lazy修饰符在发生change事件后更新data属性。
您还可以使用.trim函数从代码中删除空格。
如果要接受输入字段中的数字，则可以使用.number修饰符选项。
最后，这些是Vue.js的关键优势，可用于正确地编写Web应用程序代码。 因此，如果您要开始一个新的Web开发项目，那么Vue.js是您的选择。 它以其优雅的功能，样式指南，易于编码的方式引领游戏，并节省了您的精力。