< >头

< / div >

首先,你必须下载Vue.js从Vue的官方网站.js. (http://Vuejs.org/v2/guide/installation.html)

2. 使用CDN

创建一个新的HTML页面,并包含使用CDN链接安装VueJS的脚本标记

<html>
	<head>
		<title>Vue.js 应用程序title>
		<脚本类型 =“文本 / javascript” src=“http://cdn.jsdelivr.net/npm/(电子邮件保护)/ dist / Vue.js">script>
	head>
	<body>
		Vue.js 应用程序
	body>
html>
< / div >

3. 使用Vue CLI

CLI即命令行接口,为快速Vue提供完整的系统.js应用程序开发. 它允许九五至尊vi老品牌值得信赖选择项目将使用哪些库,并自动将它们插入到项目中.

安装命令行(@ . exeVue/cli),在终端中运行如下命令.

npm我 -g @Vue/cli
< / div >

安装@Vue后/ cli 使用npm包,你所要做的就是使用Vue创建单页应用程序.

要使用CLI创建一个新项目, 在终端中运行下面的命令,它将启动Vue项目的创建 Vue-应用程序.

使用Vue-应用程序,“Vue create”

当您执行上述命令时, 你将被给予选择选择一个预设预设或手动选择功能. 选择手动选择功能选项,输入向下箭头键并选择功能.

完成这一步后,您可以选择Linter / Formatter. Select ESLint +漂亮 option.

之后添加附加特性 上保存.

选择放置配置的选项 在专用配置文件中.

然后,系统会要求您将所有这些设置保存为未来Vue项目的预先设置. 选择不与 N.

一旦你选择了所有的选项, Vue CLI安装所有第三方库并创建应用程序.

为了在浏览器中查看实时应用程序,运行以下命令:

cd Vue-应用程序
npm运行服务
< / div >

当您在代码编辑器中打开项目时, 您将发现在您的应用程序中创建了以下结构.

5. Vue的主要功能.js

  1. Template
  2. 组件
  3. 计算属性
  4. 道具
  5. 观察人士
  6. 数据绑定
  7. 事件处理
  8. 指令
  9. 呈现
  10. 修饰符
  11. EventBus
  12. 状态管理

5.1. Template

模板是为组件定义HTML代码和通用标记的地方. 任何HTML代码通过Vue都是有效的.js模板. Vue模板将数据绑定到DOM.

您可以将模板放入File组件中. 显示的DOM(文档对象模型)可以使用Vue的基于html的模板语法声明性地绑定到底层Vue实例数据.

例子:

<template>
	<h3>VueJs应用程序h3>
template>
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
@组件
出口 默认的 class 应用程序组件 扩展 Vue {}
script>
< / div >

5.2. Vue组件

这是Vue最基本的元素之一.js是组件. 它们是可重用的Vue实例,有自己的样式、状态和标记. 你可以定义一个单独的组件.Vue的文件. 这种“.Vue '文件包含该组件的HTML、CSS和JavaScript.

例如:应用程序.Vue

<template>
	<h3>Vue.js 应用程序h3>
template>
 
<风格范围>
style>
 
<脚本朗="ts">
进口 { 组件, Vue } 从 “vue-property-decorator”;
 
@组件
出口 默认的 class 应用程序 扩展 Vue {}
script>
< / div >

5.3. 计算属性

计算属性用于快速计算属性和响应视图. 默认情况下,计算属性只有一个得到ter,但也可以有一个setter. 通过拥有两者,九五至尊vi老品牌值得信赖可以将输入值正确地绑定到模型.

例子:

<template>
	<div class=“容器”>
		<h3>Vue.js 应用程序h3>
		<hr>
		<div>
		<label>输入消息: label><输入类型=“文本” v-模型=“消息” label=“消息”>
  		<p>原始消息: {{ 消息 }}p>
  		<p>计算了消息: {{ 反向d消息 }}p>
  		div>
	div>
template>
<风格范围="">
.容器{文本-对齐: center;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
 
@组件
出口 默认的 class 应用程序组件 扩展 Vue {
  私人的信息: 字符串 = “Vue.js应用”;
 
  私人 得到 反向d消息(): 字符串 {
	返回 .消息.分裂('').反向().加入('');
  }
}
script>
< / div >

5.4. 道具

道具是在不同组件之间传递变量和其他数据的方式. 道具是只读的,不能修改. 应该使用相对名称声明道具,并在子组件中提供默认值.

@道具({ 默认的: -1}) 公共数: 数量;
< / div >

九五至尊vi老品牌值得信赖可以像上面的例子一样声明prop并为prop提供一个默认值.

例子: 添加新 项.Vue (子组件).

<template>
	<div>
		<div>
		<label>物品的价格: label><输入类型=“数量” v-模型=“项Price”>
		div>
	div>
template>
 
<脚本朗="ts">
进口 { 组件, 道具, Vue }“Vue-property-decorator”;
 
@组件
出口 默认的 class扩展 Vue {
  @道具({默认的: -1}) 私人项Price: 数量;
}
script>
< / div >

将以下代码替换为 应用程序.Vue (父组件).

<template>
	<div class=“容器”>
		<:项price=“项Price”>>
	div>
template>
 
<风格范围="">
.容器{文本-对齐: center;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
进口 项目从 “@ /组件/ 项组件.Vue”;
 
@组件({
  组件: {},
})
出口 默认的 class 应用程序 扩展 Vue {
  私人项Price: 数量 = 50;
}
script>
< / div >

5.5. 观察人士

VueJS 看就是这样一个功能,它使开发人员能够观察所有组件的行为,并检查它如何执行特定的操作. 除了, 观察器还观察数据属性,并使开发团队能够在数据属性更改时检测到数据属性.

例子: 将以下代码替换为 项.Vue 组件.

<template>
	<div>
		<div>
	  	<label>物品的价格: label><输入类型=“数量” v-模型=“项Price” 禁用="">
		div>
		<div class="mt-10">
	  	<label>数量: label><输入类型=“数量” v-模型=“数量”>
		div>
		<div class="mt-10">
	  	<h4>总价格: {{ totalPrice }}h4>
		div>
	div>
template>
 
<风格范围="">
.mt-10{保证金-: 10px;}
style>
 
<脚本朗="ts">
进口 { 组件, 道具, Vue,}“Vue-property-decorator”;
 
@组件
出口 默认的 class扩展 Vue {
  @道具({默认的: -1}) 私人项Price: 数量;
 
  私人数量: 数量 = 0;
  私人totalPrice: 数量 = 0;
 
  @(“数量”)
  私人on数量Change(新价值: 数量, old价值: 数量) {
	if (新价值 !== old价值 && 新价值 > 1) {
  	.totalPrice = .项Price * .数量;
	}
  }
}
script>
< / div >

看er函数被赋值来查看可选接受的新属性值(可以是第一个参数),也可以查看旧属性值(可以是第二个参数).

私人on数量Change(新价值: 数量, old价值: 数量) {
   / / TODO:
}
< / div >

5.6. 数据绑定

响应式数据绑定是VueJs的一个非常流行的特性. 它是定义数据反应性的核心特性. 它指定了哪些组件数据与DOM同步的详细信息. 同步数据的过程是自动完成的,不会受到开发团队的任何干扰.

  • 单向数据绑定

该变量只是在单向数据绑定中绑定到DOM. VueJS是一种可以轻松处理DOM更新的技术,当变量的值发生更改时,不会出现任何问题. 

例如:应用程序.Vue 组件

<template>
	<div class=“容器”>
		<h4>{{消息}}h4>
	div>
template>
<风格范围="">
.容器{文本-对齐: center;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
 
@组件
出口 默认的 class 应用程序组件 扩展 Vue {
  私人的信息: 字符串 = “VueJs应用”;
  //消息值的变化会自动反映在DOM中.
}
script>
< / div >
  •  双向数据绑定

在VueJS技术中实现双向绑定时, 它可以使用v模型指令来完成. 当表单中的输入值发生更改时, 该模型捕获更新的UI元素或事件更改, 然后它开始用新属性更新数据属性值. 基本上,在这里,如果data属性的值改变,UI元素就会更新.

例如:应用程序.Vue 组件

<template>
	<div class=“容器”>>
		<label>输入消息: label><输入v-模型=“消息价值” 类型=“文本”>
		<h4>消息: {{消息}}h4>
	div>
template>
 
<风格范围="">
.容器{文本-对齐: center;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
 
@组件
出口 默认的 class 应用程序组件 扩展 Vue {
  私人消息价值: 字符串 = "";
}
script>
< / div >

5.7. 事件处理

通过使用" v: "指令,九五至尊vi老品牌值得信赖可以监听DOM事件,并在事件被触发时执行一些JavaScript代码.

例如:应用程序.Vue 组件

<template>
	<div class=“容器”>
		<按钮v-on:点击=“incrementCount”>增量计算button>
		<h4>总菌数: {{}}h4>
	div>
template>
 
<风格范围="">
.容器{文本-对齐: center;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
 
@组件
出口 默认的 class 应用程序组件 扩展 Vue {
  私人数: 数量 = 0;
 
  私人incrementCount() {
	.++;
  }
}
script>
< / div >

九五至尊vi老品牌值得信赖可以用速记法 @ 而不是 v:是这样的:

<button @点击=“incrementCount”>增量button>
< / div >

5.8. 指令

指令被称为特殊的令牌,它允许将它们作为属性附加到DOM的所有元素. 所有指令的前缀都是开发人员 v-,表示VueJS特殊属性.

 下面描述了一些常见的Vue指令.

v-文本:

<div v-文本=“数”>div>

< / div >

这里,指令Id是文本,表达式是数. 每当Vue实例上的数属性发生变化时,这个指令就会更新div的文本内容.

v: 使用v指令, 开发团队可以很容易地调用特定的方法,并在发生DOM事件时侦听它们.

<按钮v-on:点击=“incrementCount”>增量button>
< / div >

V-绑定: 指令v-绑定允许你把值绑定到Vue实例的一个动态属性上.

<a v-绑定:href=“url”>{{ urlLinkText }}a>
< / div >

v模型: 该指令允许VueJs开发团队开发双向数据绑定. 除了, 当表单字段内容发生变化时,VueJS能够自动更改数据的属性.

<输入v-模型=“三” 占位符=“输入文本”>
 
<p>输入文本: {{ 三种 }}p>

输入文本: {{ 三种 }}

< / div >

v: 指令“v”用于有条件地呈现一个块. 如果v指令返回一个真表达式,那么它只能呈现一个特定的块.

<div v-if=“show价值”>这是v-if 指令div>
这是v 指令

< / div >

在这里, show价值 只是在组件的数据中定义的一个术语吗.

v代表: 要渲染一个对象或项列表,九五至尊vi老品牌值得信赖可以使用v代表指令. 通常,v代表用于迭代数组值.

<ul>
 
<李v-=“生产产品” v-绑定:关键=“产品”>{{ 产品 }}li>
 
ul>
    <李v代表=“生产产品” v-绑定:关键=“产品”>{{ 产品 }}

< / div >

 在这里, v-绑定:关键 用于设置列表中的每个产品的属性.

5.9. 呈现

  • 有条件的呈现

用于DOM中元素的条件呈现 v, v-elsev-show 使用指令.

已经参观了
第一次访问
< / div >

这里,if property "参观了” is 真正的 然后它会添加 第一个 h1 返回到DOM,并打印文本“已经参观了”. If “参观了” is 然后它将渲染 第二个h1 进入DOM并打印文本“第一次访问”.

指令 v-show 是用于条件基渲染HTML元素. 如果条件返回假,则 v-show 指令 只有 隐藏HTML元素.

已经参观了
< / div >
  • 列表呈现

v代表 指令来呈现一列基于项的对象和数组. VueJS开发人员可以使用v—— 指令使用的语法:"用户在用户List”. 在这里, 用户List 表示它是用户列表. 在这个模型中, 用户 是一个 别名 为用户List的数组.

<ul>
 <李v-=用户List“用户” :关键=“用户”>{{ 用户 }}li>
ul>
    <李v代表=用户List“用户” :关键=“用户”>{{ 用户 }}

< / div >

5.10. 修饰符

修饰符用于以一种特殊的方式绑定指令.在您的应用程序中使用内置的修饰符,如表单修饰符、事件修饰符、键修饰符.

  • 事件修饰符
  • .自我
  • .防止
  • .停止
  • .被动
  • .一次
  • .捕获
<形成v-on:提交.防止=“onSubmit”> ... 为m>
< / div >
  •  模型修改器
  • .懒惰的
  • .数量
  • .修剪
<输入v-模型.懒惰的=“数据”>
< / div >

5.11. EventBus

“甚至tBus”是一个 Vue实例 它可以向组件发出事件. 用于启用 隔离组件 订阅和发布彼此之间的自定义事件. 在较小的应用程序中推荐使用“甚至tBus”(订阅并处理整个系统的广播).

例子:

创建一个EventBus实例 事件总线.ts 文件.

进口 Vue从 “Vue”;    	
/ /初始化甚至tBus实例
常量 甚至tBus =  Vue();
 
出口 默认的 事件;
< / div >

这里,使用EventBus进入接口来发出事件 项组件.

<template>
	<div>
		<输入v-模型=“项目” 类型=“数量”>
		<button @点击=“添加项” class=“添加物品”>
 		添加新项
		button>
	div>
template>
 
<风格范围="">
.添加-{保证金: 10px;;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
进口 甚至tBus从 '../事件总线';
 
@组件
出口 默认的 class 项组件 扩展 Vue {
  私人物品: 数量 = 0;
 
  私人添加项() {
	甚至tBus.美元发出(“将”, .);
  }
}
script>
< / div >

附加EventBus监听器, EventBus.$on方法的created()生命周期钩子上 项List组件. 当项 组件发出事件时,它会在事件对象中传递一个数字值.

<template>
	<div>
		<h4>项目: {{ 项目.加入(", ") }}h4>
	div>
template>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
进口 甚至tBus从 '../事件总线';
 
@组件
出口 默认的 class 项List 扩展 Vue {
  私人物品: 数量[] = [];
 
  私人创建() {
	甚至tBus.$on(“将”, (价值: 数量) => {
  	.项目.(价值);
	});
  }
}
script>
< / div >

 控件中注册两个组件 应用程序.Vue 组件.

<template>
	<div class=“容器”>
		<>>
		<项list>项list>
	div>
template>
 
<风格范围="">
.容器{文本-对齐: center;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
进口 项目从 “@ /组件/ 项组件.Vue”;
进口 项List从 “@ /组件/ 项List组件.Vue”;
 
@组件({
  组件: {, 项List },
})
出口 默认的 class 应用程序 扩展 Vue {
}
script>
< / div >

5.12. 状态管理(Vuex Store)

开发团队在他们开发的每个VueJS应用程序中使用Vuex作为状态管理库. vex通过以下核心概念(Store概念)引入集中手段管理状态特性:

  • 州树: 它只是一个包含数据的对象,当状态处于初始化阶段时,可以将其设置为空数据对象.
  • 得到ter方法: 当涉及到从Vuex存储访问数据时,将使用函数得到ter.
  • 突变:当需要进行状态修改时, 使用突变是最好的选择,因为它只能运行同步代码.
  • 行动:对数据进行店内突变, 开发人员使用Vuex来执行可以轻松包含异步活动的操作.

在中型/大型应用中,建议使用“Vuex Store”.

例子:

进口 Vue从 的价值;
//插入并使用Vuex
进口VuexVuex';
 
Vue.使用(Vuex)
Const状态= {
  数:0,
};
Const突变= {
  incrementCount(状态){
	状态.数+ +;
  },
};
Const actions = {
  incrementCount: ({ commit }) => commit('incrementCount'),
};
Const 得到ter = {
  is价值EvenOrOdd: (状态) => 状态.数% 2 !== 0 ? ”奇怪:“甚至',
};
导出默认的新Vuex.存储({
  状态,
  得到ter方法,
  行动,
  突变,
});
< / div >

上面的例子包含状态, 视图, 以及可以根据与动作的交互而改变状态的动作.

6. VueJS编码风格指南 & 最佳实践

6.1. 继续使用:键内v代表指令在Vue 应用程序

带v代表的":关键 "属性的使用 指令 允许开发人员在每次操作业务应用程序的数据时使其具有可预测性和一致性. 这一点很重要,因为它使VueJS能够跟踪应用程序的组件状态,并对系统的所有元素有一个恒定的引用. 例如,当使用Vue动画或转换时,键就很有用.

而且不需要使用键,Vue能够尽可能地使DOM高效. 因此,v代表中的HTML元素出现顺序错误,否则它们的行为将难以预测. 如果每个元素都有一个唯一的引用键, 这样九五至尊vi老品牌值得信赖就能更好地预测Vue应用程序处理DOM操作的准确方式.


<div v-=的类别 in categories>  
 

>div
< / div >

6.2. 试着用烤肉盒来做活动

当涉及到从自定义事件传输时, 最好的方法之一就是开始使用烤肉盒. 这背后的主要原因是父Vue组件具有相同的语法,可以用来侦听该事件. 因此, 在系统的Vue组件中保持一致性,并拥有完全可读和准确的代码, 使用烤肉盒是最终的解决方案.

PopupWindow.Vue
        	.美元发出(“关闭窗口”)
Parent组件.Vue
<弹出-窗口 @关闭-窗口=“h和leEvent()” />
< / div >

6.3. 组件的可重用性 & 沟通

  • Vue组件的可重用性可以为用户提供更多的灵活性. 尝试创建一个公共的Vue组件,使用所需的最大道具,以便在整个应用程序的所有其他页面中重用它. 例如, 如果您为确认消息创建公共Vue组件(您可以传递动态确认消息文本, 按钮文字, 图标的名字, 等.). 以类似的方式, 九五至尊vi老品牌值得信赖可以很容易地创建一个通用的Vue组件,它可以使用相同的绑定和模型执行添加/编辑操作.
  • 当涉及子组件和Vue组件之间的数据通信时, 使用“事件发射器”和“道具”是必不可少的. 一旦创建, 通过在组件中添加所需的参数道具和代码,九五至尊vi老品牌值得信赖可以在整个应用程序中重用通用组件.

例子:

在父组件(应用程序.Vue):

<template>
  <div class=“容器”>
	<:价值=“价值” @on价值change=“h和leData”>>
	<h3>价值(孩子发出-组件): {{价值}}h3>
  div>
template>
 
<风格范围="">
.容器{文本-对齐: center;}
style>
 
<脚本朗="ts">
进口 { 组件, Vue }“Vue-property-decorator”;
进口 项目从 “@ /组件/ 项组件.Vue”;
 
@组件({
  组件: {},
})
出口 默认的 class 应用程序 扩展 Vue {
  私人价值: 字符串 = “Vue.js应用”;
 
  私人h和leData(data: 字符串) {
	//获取child deal后的数据
	.价值 = data;
  }
}
script>
< / div >

 在子组件(项目.Vue):

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

通过使用& quot;v模型”, 九五至尊vi老品牌值得信赖可以轻松地在定制的组件中实现双向数据绑定,而无需使用事件发射器和道具. 对于数据通信,九五至尊vi老品牌值得信赖可以使用 甚至tBus,尤其是当它是为了 无关的组件.

6.4. 指定数据类型

减少铸造时间等铸造问题, 尽可能使用正确的数据类型,而不是“任何”.

避免在循环内部进行类型转换.

如果同一属性使用了两种不同的数据类型, 然后为这两个类型或使用条件实现类型转换.

例子:

常量 tempVariable: 任何 = 0; [错误的]
常量 tempVariable: 数量 = 0; [正确的]
< / div >

6.5. 干净的代码和重构

  • 使用公共或共享的方法,可重用代码的实用程序.
  • 维护 代码透明度和质量 使用 tslint or eslint 分析工具.

例子:

var 测试: 数量 = 0;
“标识符 “测试” 永远不会重新分配; 使用 “常量” 而不是 “var”
< / div >

6.6. 设计

使用最新版本的 Vuetify 包利用最新的设计风格. 根据以往的经验,Vuetify会迅速改变版本(有时在设计上有巨大的变化),所以请定期在一段时间后的植入时间获得最新版本,以避免最后出现大的变化.

npm更新Vuetify
< / div >

6.7. 全局变量

在一个环境中创建并保存所有全局变量.Json)文件,因此在部署后,您可以更新全局项,而无需任何重新构建.

6.8. 快速更新和检查过时的npm

始终保持npm包是最新的,以避免在部署时出现任何依赖错误.

npm过时
npx npm-检查-更新 -u
npm安装
< / div >

6.9. 初始化的数据

  • 通过将现有属性转换为响应式得到ter和setter, Vue能够检测数据更改. 而不是构造大量的得到ter和setter, 使用看属性获取依赖于另一个对象的最近的和修改过的值(避免在对象的数组列表中使用看).
  • 避免内存泄漏——当组件被销毁时,然后删除自定义实例, 事件, 时间间隔后.

6.10. 元素

  • 使用 美元的参 而不是通过id或类名获取元素,以减少JavaScript的使用.
  • 避免使用jQuery而不是类型script,因为类型script会让九五至尊vi老品牌值得信赖的代码变得简单, 清洁, 一致的, 和可重用. 它还允许更快的代码呈现,以及在开发过程中检测和纠正额外的问题.

例子:

常量 潜艇 = .美元的参.child组件 作为Child组件;
//引用子组件
< / div >

7. Vue JS性能优化

下面列出了九五至尊vi老品牌值得信赖可以在Vue中使用的一些性能优化技术.Js应用程序,使其加载更快,并改善用户体验.

7.1.对路由使用动态导入

当使用捆绑器构建应用程序时,Vue Js应用程序被捆绑到一个大的JavaScript文件中. 每个组件被编译成更小的文件块, 每个块对应一个路由组件, 使用延迟加载路由. 因此,只有当用户导航到新的路由时,才会请求新的块.

使用Vue的异步组件功能和Webpack的代码分割功能来惰性加载路由组件是很简单的.

开发人员可以很容易地将异步组件指定为工厂函数之一, 它可以毫无问题地返回一个承诺:

常量 使用rList = () => 承诺.解决({ /*组件的定义 })
< / div >

当提到指示代码拆分点时, 开发团队可以在webpack 2中使用动态导入语法:

进口('./ 使用rList.Vue”) //返回承诺
< / div >

结合两种,如何定义一个会被webpack自动拆分的异步组件:

常量 路由器 =  路由器({
	路线: [
		{ 路径: ' / 用户List ', 组件: 使用rList }
	]
});
< / div >

当开发人员使用相同的模式注册组件时, Webpack可以自动将路由的每个组件拆分成单独的部分. 路由惰性加载 提高实际性能 应用程序的.

7.2. 尽量减少外部库的使用

  1.  避免使用第三方库,如果他们不能提供太多. 因为还有额外的成本, 从学习曲线到维护, 这最终与开发解决方案的成本相同,甚至更多. 如果需要一个很小的组件或一段代码, 花点时间自己创造, 因为第三方的性能问题很难解决.
  2.  当寻找包裹的时候, 一定要在你遇到的不同可能性中考虑你的选择. 最适合您的项目的包是一个以模块化风格构建并支持摇树的包.

7.3. 避免在vex存储中放置冗余数据

Vuex在某些情况下可能是有用的,但只有在绝对必要的时候才使用它. 在两个以上的非父子组件中需要此信息吗?

  1. 这是在将某些东西投入Vuex之前要问的问题. 如果数据由两个以上的组件共享,则在vex中存储公共数据, 否则使用本地组件数据.
  2.  这是至关重要的,因为把所有的东西都放在Vuex中会给项目增加一层复杂性,偶尔还会造成性能上的困难, 例如,商店中有大量与应用程序的许多部分无关的数据.

7.4. 延迟加载图片

如果您的应用程序有很多图像文件,建议延迟加载它们. Only the media 文件s that are visible in the 视图-port are requested on the 第一个-page load; the remainder is requested as the 用户 navigates around the 应用程序lication.

Vue-懒惰的load包,它是轻量级和通用的,可以用来缓慢加载图片.

7.5. 安装:npm安装Vue-懒惰的load

设置:

进口 Vue从 “Vue”;
进口 VueLazyload从 “Vue-懒惰的load”;
 
Vue.使用(VueLazyload);
< / div >

V-懒惰的指令可以用于图像,而不是用于 src 属性.

7.6. 代码的性能

  • 避免在代码中编写复杂的逻辑 , 计算, 更新, or be为eUpdate 钩子.
  • 围绕这些Vue的复杂逻辑.Js块可能会导致额外的组件重渲染或渲染循环. 它有可能影响整个应用程序的性能. 下面列出了多种方法,九五至尊vi老品牌值得信赖可以使用它们来提高应用程序的性能:
  • 当数据从父节点传递给子节点时, 尝试转换父组件中的数据, 所以在子组件中可以避免使用观察者.
  • 父组件应该通过使用事件发射器来通知,而不是直接改变道具.
  • 建议不要在计算机内部设置数据,而是使用观察者.
  • 当涉及到更新某些数据时, 特别是当数据的另一部分发生变化时, 用监视器替换代码.

7.7. 提前开发内容

当你的应用程序的某个页面需要显示基于某些数据的大量资料时,你可以使用“be为eerouteenter”钩子来获取数据.

  • 在挂载的钩子中检索的数据.
私人用户List = [];
私人异步得到Data() {
	//获取用户列表
}
 
私人安装() {
	让res: 任何 = 等待 .得到Data();
	if (res) {
		.用户List = res.data;
	}
}
< / div >
  • 在检索数据 be为eRouteEnter :
私人用户List = [];
私人异步得到Data() {
	//获取用户列表
}
 
异步be为eRouteEnter(to,, 下一个) {
	让res: 任何 = 等待 .得到Data();
	if (res) {
  	.用户List = res.data;
	}
};
< / div >
  • 九五至尊vi老品牌值得信赖可以看到,代码中的差异不是很大,但后者有一个不同 视觉冲击.

8. Vue JS应用程序安全

开发应用程序时, 九五至尊vi老品牌值得信赖主要关注性能, 搜索引擎优化, 和UI / UX, 因此,应用程序的安全性经常被忽视. 有无数的有害攻击可能从前端发起,包括以下几点:

  • 文件上传不受限制.
  • “点击劫持”
  • SQL注入XSS攻击
  • 拒绝服务攻击是一种防止网站受到DoS攻击的网络攻击。
  • 中间人攻击,也被称为劫持,是一种

下面是一些在开发web应用程序时需要牢记的常用最佳实践.

8.1. 启用XSS保护模式

当攻击者添加恶意代码时,如果您想指示web浏览器阻止响应, 供应 “X-XSS-Protection: 1; mode=block”

当前大多数浏览器默认启用XSS保护模式, 尽管X-XSS-Protection头仍然应该包括在内. 用这个, 不支持CSP头文件的旧浏览器可以获得改进的安全措施的好处. 

8.2. 避免典型的XSS错误

DOM API的innerHTML可以跟踪XSS攻击. 例如:

文档.querySelector('.应用程序的).innerHTML = 价值;
< / div >

攻击者可能会使用这一行引入恶意代码. 尽量使用文本Content代替innerHTML,不要根据用户输入设置innerHTML值.

通过使用上述代码行,任何攻击者都可以向系统添加恶意代码. 如果可能的话,使用文本Content而不是innerHTML来设置基于用户输入的innerHTML值.

8.3. 使用验证码

验证码应该用于面向公众的端点,如注册、登录和联系. 验证码是一种计算机软件或系统,它可以通过区分人与机器人来帮助防止DoS(分布式拒绝服务)攻击.

8.4. 定期审计中的依赖关系

检查已安装的npm包是否已经更新到当前版本被称为审计依赖包.

要对包进行审计,需要定期执行npm audit命令. 此工具显示所有过时和脆弱的包版本,并建议更新到最新版本.

8.5. 使用第三方软件包

使用第三方库可能存在安全问题, 黑客们越来越多地瞄准开源库的弱点. 选择与应用程序集成的包时, 开发人员应该考虑这个库是否是开源的. 此外,如果缺乏透明度,就会导致安全风险. 如果图书馆有充分的资料, 满足特定的要求, 因此,它得到了全力支持.

9. 结论

在这篇独家博客中,九五至尊vi老品牌值得信赖试图涵盖九五至尊vi老品牌值得信赖Vuejs开发的所有方面. 通过图片,九五至尊vi老品牌值得信赖展示了每个案例和Vuejs开发的特性. 九五至尊vi老品牌值得信赖希望这个博客Vue JS -初学者指南将提高你九五至尊vi老品牌值得信赖Vue JS的知识,并帮助你轻松地在开发中实现它.

< / div >
头像 < / div >
Vishal沙

Vishal沙对多种应用程序开发框架有着广泛的理解,并在更新的趋势中占据上风,以便在动态的市场中努力奋斗并茁壮成长. 他在技术和商业两方面都培养了自己的管理能力,并通过他的博客文章提供了他的专业知识.

< / div > < / div > < / div > < / div >