< / div >

在子组件(项目.vue):

<template>
  <div>
    <label>输入值: label><输入v-模型=“local价值” 类型=“文本”>
    <button class=“保存-btn” @点击=“submit价值”>保存button>
  div>
template>
 
<风格范围="">
.保存-btn{保证金: 10px;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue, 道具 }“vue-财产-decorator”;
 
@组件
出口 默认的 class Child组件 扩展 Vue {
  @道具({默认的: ""}) 私人价值: 字符串;
 
  私人local价值: 字符串 = "";
 
  私人安装() {
    .local价值 = .价值 //保存道具数据到它自己的数据并处理它
  }
 
  私人submit价值() {
    .美元发出(“on价值Change”, .local价值) //处理数据并返回给父进程
  }
}
script>
< / div >

自定义组件,九五至尊vi老品牌值得信赖可以用“”v模型” to create two-way data binding 与out using 道具 and event emitters.

使用“eventBus” in 不相关的组件 进行数据通信.

 11. 数据应该总是返回函数

当您声明一个Vue组件数据时,它的那个方面应该返回一个值. 在其他情况下,它不返回输出, 该数据信息将在组件值的所有实例中共享.

例子:

在下面的Vue示例中,函数数据没有返回任何输出. So, you cannot access properties outside the data 函数. 它将生成一个运行时错误.

 data: {
    价值: “Vue.js应用”,
    项List: [],
    计数器: 0
  },
< / div >

正确的方式:

data: 函数 () {
    返回 {
      价值: “Vue.js应用”,
      项List: [],
      计数器: 0
    };
  },
< / div >

12.  Template Expressions should only have Basic JavaScript Expressions

在Vue模板中, 您应用了更复杂的逻辑和一些格式化变量,如(日期格式化). 让九五至尊vi老品牌值得信赖看看第一个例子,九五至尊vi老品牌值得信赖可以看到模板中更复杂的逻辑. 九五至尊vi老品牌值得信赖在未来会面临什么样的问题.

<ul v-if=“项List && 项List.length > 0">
    <li> 
        v-=" 项List中的(项目、索引)"
	:关键=“指数”
	@点击=“delete项(指数)”>
        {{
             项.分裂(' ').map(函数 () {
               返回[0].包含() + 词.(1)
             }).加入(' ')
        }}
   li>
ul>
    0">
  • v-为=" 项List中的(项目、索引)" :关键= "指数” @点击=“delete项(指数)”> {{ 项.分割(' ').地图(函数(词){ 返回词[0].包含() +词.片(1) }).加入(' ') }}

< / div >

In the above example, some 为matting is applied to the 项 价值. As you can see in the list tag, it will increase the LOC (line of code). 在出现一些复杂格式或功能的时候, 这些LOC将在模板中增加,这将很难管理,并将更加混乱. So, 最好通过在代码中的某些函数中保持格式化或额外登录来分隔绑定.

创建一个单独的函数用于格式化.

<ul v-if=“项List && 项List.length > 0">
   <li> 
	v-=" 项List中的(项目、索引)" 
	:关键=“指数” 
	@点击=“delete项(指数)”>
        {{
	      normalized项价值()
        }}
   li>
ul>
    0">
  • v-为=" 项List中的(项目、索引)" :关键= "指数” @点击=“delete项(指数)”> {{ normalized项价值(项) }}

< / div >
私人normalized项价值(价值: 字符串) {
    返回 价值
      .分裂(" ")
      .map(=> {
        返回[0].包含() + 词.(1);
      })
      .加入(" ");
  }
< / div >

在这个“更新”函数示例中, 九五至尊vi老品牌值得信赖添加了一个新的Vue函数(normalized项价值)来管理UI格式,使UI干净, 对开发人员来说很容易理解, 而且很容易更新.

下图是输入的项目名称的输出,显示为大写的第一个字符.

输入项的输出

13. 干净的代码和重构

  • 为静态函数/属性使用一个共享/单独的文件,以实现可重用性. 在整个解决方案的同一个文件中保持共享/静态代码将会很有帮助.
  • 使用eslint或tslint分析工具来 <一个href=“http://www.purlyarn.com/blog/进口ance-code-quality/">保持代码质量.
  • 在Vue中,可以通过将UI缩小到更小的组件来减少代码行数.
  • 聪明地使用类型script提供的关键字(Const/Let),而不是javascript的var关键字.

例子:

:
var 测试: 数量 = 0;
 “标识符 “测试” 永远不会重新分配; 使用 “常量” 而不是 “var””
 
你会 得到 上面的错误 if 当你运行项目时,Tslint会被正确配置
 
好:
常量 测试: 数量 = 0; //如果是静态的,则使用常量
让测试: 数量 = 0; //如果可更新,使用let
< / div >

现在让九五至尊vi老品牌值得信赖看看Vue的常见安全最佳实践.js应用程序的专业开发者

14. 定义和验证道具

Undoubtedly, the most crucial best practices to follow are 为 Vuejs. 如果你问我它的意义是什么,那么答案是有很多原因. It essentially protects the future you 从 the current you. 很容易忘记具体的格式, 类型, and other conventions you 使用d 为 a prop when working on a huge project.

如果你是大型开发团队的一员, 那么你必须很好地沟通, so as to make sure they understand how to 使用 your 组件. 所以,请提供道具验证. 你需要避免挑战,小心翼翼地跟踪所有组件以确定道具的格式. 请查看Vue文档中的这个示例.

道具: {
  状态: {
    类型: 字符串,
    要求: 真正的,
    验证器: 函数 (价值) {
      返回 [
        “同步”,
        “同步”,
        “version-conflict”,
        “错误”
      ].indexOf(价值) !== -1
    }
  }
}
< / div >

15. 组件s declared and 使用d ONCE should have the prefix “The”

如果你不知道什么是单实例组件,那么让九五至尊vi老品牌值得信赖把它理解为每页只使用一次,不接受道具. 这些类型的组件有自己的名称方案,类似于基本组件. 这些是您的程序所特有的组件,例如页眉、侧边栏或页脚. For every 组件, there should only be one active instance.

全体代表.vue
TheFooter.vue
TheSidebar.vue
ThePopup.vue
< / div >

16. 使用指令简写的一致性

指令简写的使用是Vue开发人员的主要方法.

For example, @ stands 为 v-on; : colon- stands 为 v-bind; and similar other definitions

Using these shorthands in your Vue project is a wonderful idea.

然而, 如果您想建立一个项目范围的标准, you should either 使用 them all the time or never at all. Your project will be more unified and readable as a result of 这.

17. 不要在创建 AND 看上调用方法

毫无理由的, 如果你调用了一个创建并监视的方法,这是Vue开发者常犯的错误(或者可能只有我这样). 九五至尊vi老品牌值得信赖的想法是,手表挂钩应该在组件初始化后立即被调用.

坏!

创建: () {
  .handle道具ertyChange()
},
方法: {
  handle道具ertyChange() {
    / /东西发生
  }
},() {
  财产() {
    .handle道具ertyChange()
  }
}
< / div >

Vue, on the other hand, offers a predefined in-built solution 为 这. 这是九五至尊vi老品牌值得信赖经常忽略的Vue观众的一个特点.

九五至尊vi老品牌值得信赖现在需要做的就是重新组织观察器并声明两个属性:

  1. 处理程序 (新Val, oldVal) – here is the actual observer method:
  2. 真正的 – when our instance is 创建, our 处理程序 is called.

好!

方法: {0
  handle道具ertyChange() {
    / /东西发生
  }
},() {
  财产 {
    立即: 真正的
    处理程序() {
      .handle道具ertyChange()
    }
  }
}
< / div >

18. 使用动作:提交数据并进行API调用

我的大部分API调用都使用vex操作,因为它们使获取数据变得更加容易,并提供了一定程度的可重用性和封装性. If I need to fetch the same web p年龄 从 two separate locations, I can 使用 the dispatcher and the appropriate parameters to fetch, 提交, 返回时,除了分派器,没有其他代码.

If we apply the same logic after the p年龄 has already been fetched, you’ll have to do it in one place to reduce server traffic. 它在所有地方都能发挥最好的作用. The ability to track activities in Mixpanel events is quite convenient, 而且代码库很容易维护.

19. 使用单一约定方法提交

随着程序的稳定和成熟, we’ll all be 为ced to look over the 组件’s history. 如果您或您的团队成员没有对他们的提交使用相同的命名约定, 很难区分它们,也很难理解它们的作用.

To make 提交s easier when browsing through the project history, follow the criteria 状态d below as one of the Vue js best practices.

提交消息格式

< 类型 >( <  范围 > ): < 主题 >
< 空行 >
< body >
< 空行 >
< footer >
< / div >

20. 多个V-Condition

不推荐在Vue组件的渲染方法中使用大量的v-if条件来渲染多个元素. Wrap the elements 与

and the extra ones 与