vue.js web_Vue.js Web开发最佳实践-CSDN博客

vue.js web

I am a full-stack developer at Syncrasy Tech (IT solutions company). I love writing React codes. But why I am telling you this as we are here to discuss the Vue.js best practices for web development. I am telling you this so that you can understand my background and why I’m discussing here the Vue.js.

我是Syncrasy Tech(IT解决方案公司)的全职开发人员。我喜欢编写React代码。但是，为什么我要在这里告诉您这一点，以讨论Web开发的Vue.js最佳实践。我告诉您这一点，以便您可以了解我的背景以及为什么我在这里讨论Vue.js。

I love working on React codes, but I hate reading them. This is the reason where I fail to code. Even with the best code review practices, I can’t figure out the nesting of React components that simply helps to create more complex UI structures in web apps.

我喜欢编写React代码，但我讨厌阅读它们。这就是我无法编码的原因。即使采用最佳的代码审查实践，我也无法弄清楚React组件的嵌套，这些嵌套仅有助于在Web应用程序中创建更复杂的UI结构。

The solution to this problem is Vue that is now not so new in the block of web app development. I have heard a lot about Vue async components, server-side rendering, tools, and libraries. Perhaps you find this myriad of terms to be confusing. Believe me, you’re not alone in that, many developers of all levels feel the same way when they don’t know the Vue best practices.

解决这个问题的方法是Vue，它在Web应用程序开发中并不是那么新。我听说过很多有关Vue异步组件，服务器端渲染，工具和库的信息。也许您会发现无数的术语令人困惑。相信我，您并不止于此，许多不同级别的开发人员在不了解Vue最佳实践时也会有相同的感受。

A few days later, I finally decided to get my codes into it. What I am sharing here are the numerous best practices that I have learned through my experience with Vue. I’m ready to share what I’d find.

几天后，我终于决定将代码纳入其中。我在这里分享的是从我在Vue的经验中学到的众多最佳实践。我准备分享我的发现。

开始吧 (Let’s Start)

Try to learn everything at once on Vue can be overwhelming. Let’s start with the numbers. Today Vue has 147K Github’s stars leaving behind the JS giants like Angular (50.6k stars) and React (135k stars).

尝试一次在Vue上学习所有内容可能会让人不知所措。让我们从数字开始。如今，Vue拥有14.7万个Github的星星，仅落后于Angular(50.6k星星)和React(135k星星)等JS巨人。

我将Vue的最佳做法分为四类： (I have split Vue’s best practices into four categories:)

Vue功能 (Vue Functionalities)

Vue’s functionalities have a lot of stuff to discuss under the hood automatically. Vue.js is a simple view-oriented platform that is its first main advantage. All information in coding is valid only if it interacts correctly with the named and nested named views.

Vue的功能有很多东西可以在后台自动讨论。 Vue.js是一个简单的面向视图的平台，这是它的第一个主要优点。编码中的所有信息仅在与命名视图和嵌套命名视图正确交互时才有效。

Creating a single view is pretty simple in Vue, you only have to load the interface and add JavaScript to start the development of your web app.

在Vue中，创建单个视图非常简单，您只需加载界面并添加JavaScript即可开始开发Web应用程序。

let vm = new Vue({
  el: "#my-webapp",
  data: {
    firstName: "MyFamous",
    lastName: "Magazine",
  }
})

然后，进行一些标记以获得最终视图： (Then, a bit of markup to get the final view:)

<div id="my-webapp">

<h1>Hello, {{firstName}} {{lastName}}!</h1>

</div>

上面的代码揭示了什么？ (What does the above code reveal?)

The above coding example shows how Vue automatically renders elements without using codes. Simple syntax is used to send the data to view directly. Adding instance properties can be used for Vue elements rendering.

上面的编码示例显示了Vue如何在不使用代码的情况下自动呈现元素。简单语法用于发送数据以直接查看。添加实例属性可用于Vue元素渲染。

Vue systems such as JQuery keep the information in DOM and for all the additional changes developers need to perform rendering and modification of the related parts. Let’s move onto the other parts of Vue functionalities.

Vue系统(例如JQuery)将信息保留在DOM中，并且对于开发人员需要执行的所有其他更改，需要对相关部分进行渲染和修改。让我们进入Vue功能的其他部分。

Components

组件

For web apps, Vue developers can use components just like other libraries by using Vue.compoment. A component can include a name, configuration or identifier.

对于Web应用程序，Vue开发人员可以通过使用Vue.compoment像其他库一样使用组件。组件可以包括名称，配置或标识符。

Vue.component('component-name', {
  /* options */
})

The single-file components work very well for small to medium-sized web development projects. It is pretty easy to use Vue components in a single file and because of the benefits of JavaScript logic, CSS styling, and HTML code template. Also, see an example:

单文件组件非常适合中小型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 single file components use WebPack to provide the ability to use and apply modern web features to your web app. Coders can specify a template built using Pug using preprocessors:

Vue单个文件组件使用WebPack来提供使用现代Web功能并将其应用到Web应用程序的能力。编码人员可以使用预处理器指定使用Pug构建的模板：

TypeScript SCSS Sass Less PostCSS Pug

TypeScript SCSS少用PostCSS Pug

Vue v-bind function allows components to accept data from the parent components (Props) that can be seen in the array of strings:

Vue v-bind函数允许组件接受来自父组件(Props)的数据，这些数据可以在字符串数组中看到：

props:{
  title: String,
  likes: Number,
  isPublished: Boolean,
  commentIds: Array,
  author: Object,
  callback: Function,
  contactsPromise: Promise // or any other constructor
}

This will not only document your components but will also warn you when you pass a wrong code type in the browser’s JavaScript console.

这不仅会记录您的组件，还会在浏览器JavaScript控制台中传递错误的代码类型时向您发出警告。

In short, Vue offers great flexibility to web app developers that suits different development strategies and also facilitates the interaction with different Vue libraries.

简而言之，Vue为Web应用程序开发人员提供了极大的灵活性，使其适合于不同的开发策略，并且还促进了与不同Vue库的交互。

Events and Handlers to Handle Errors in Vue Vue JS is a progressive JS framework that focuses on the view layer and a system of supporting libraries. For all stages of web app development that use Vue, events are created on the directives v-on and colons that are used to identify the event type such as v-on click.

Vue中的事件和处理错误的处理程序 Vue JS是一个渐进式JS框架，专注于视图层和支持库的系统。对于使用Vue的Web应用程序开发的所有阶段，将在指令v-on和冒号v-on创建事件，这些指令用于识别事件类型，例如v-on点击。

v-on的一个简单示例可以是： (A simple example of v-on can be this:)

<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事件的一些示例： (Some examples of HTML DOM Events in Vue:)

on change on click on hover on load on mouse-out on mouse-over on load

鼠标悬停时鼠标悬停时的负载变化

Vue JS中的事件处理程序 (Event Handlers in Vue JS)

Handlers are assigned to deal with the errors occur in the Events. It allows a developer to write the code when a specified event is triggered.

分配了处理程序来处理事件中发生的错误。当指定的事件被触发时，它允许开发人员编写代码。

Vue中的条件渲染和循环 (Conditional Rendering and Loops in Vue)

Conditional rendering in Vue means to remove or add some elements from the DOM if a specified value is true. This is the best way for conditional data binding that allows developers to connect information when a particular condition is true. You can use v-if directive for conditional rendering.

Vue中的条件渲染意味着如果指定值为true，则从DOM中删除或添加一些元素。这是条件数据绑定的最佳方法，该条件允许开发人员在特定条件为真时连接信息。您可以使用v-if指令进行条件渲染。

看一个例子： (See an example:)

<template>
  <div>

 <!-- v-if="javascript expression" -->
  <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指令： (You can use v-else to extend the v-if directive:)

<h1 v-if="isActive">Hello Vuejs</h1>

  <h1 v-else>Hey Vuejs</h1>

您可以使用v-else-if块进一步扩展它： (You can extend it further by using v-else-if block:)

<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>

If the value that a programmer wants to evaluate is true, then run the v-if template. For further extensions, v-else or v-if-else directive is triggered.

如果程序员想要评估的值是true，则运行v-if模板。对于进一步的扩展，将触发v-else或v-if-else指令。

Vue JS contains a simple API protocol that allows making space for the v-for directive that renders a list of items into the DOM.

Vue JS包含一个简单的API协议，该协议允许为v-for指令腾出空间，该指令将项目列表呈现到DOM中。

例： (Example:)

<template>
 <ul>
   <!-- list rendering starts -->

 <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>

In the above coding, a loop runs through the code in the form of the array using v-for directive. The array refers to objects that allow users to see properties present inside the array.

在上面的编码中，循环使用v-for指令以数组的形式遍历代码。数组是指允许用户查看数组内部存在的属性的对象。

输出： (Output:)

samuel
queen
rinha

双向数据绑定以加快开发过程 (Two-way data binding to speed up the development process)

One of the main features of Vue is its reactive two-way binding that keeps your data, arrays, and variables in sync with DOM without requiring you to do anything else. Vue uses v-model directive for two-way binding. The v-model directive binds the input element to the name property using v-model directives that update the input field and also updates the name property field linked to it.

Vue的主要功能之一是其React性双向绑定，该绑定使您的数据，数组和变量与DOM保持同步，而无需执行任何其他操作。 Vue使用v-model指令进行双向绑定。在v-model的指令结合使用输入元素的name属性v-model指示该更新的输入字段，并更新链接到它的名称属性字段。

它是如何工作的？ (How does it work?)

<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>

The v-model directive comes with the option of .lazy modifier that updates the data property after change event occurs.

v-model指令带有.lazy修饰符的选项， .lazy修饰符在发生change事件后更新data属性。

You can also use .trim function to remove the white space from your code.

您还可以使用.trim函数从代码中删除空格。

The option of .number modifier is there if you want to accept numbers to the input field.

如果要在输入字段中接受数字，则可以使用.number修饰符选项。

Finally, these are key strengths of Vue.js that you can use to code your web apps correctly. So, if you are starting out a new web development project, then Vue.js is your choice. It leads the game with its elegant features, style guidelines, easy coding, and also save your efforts.

最后，这些是Vue.js的关键优势，可用于正确地编写Web应用程序代码。因此，如果您要开始一个新的Web开发项目，那么Vue.js是您的选择。它以其优雅的功能，样式指南，易于编码的方式引领游戏，还节省了您的精力。