本文目录导航：
Vue-模板template
Vue模板的关键特点有三种写法：1. Vue完整版，间接嵌入HTML代码中。
2. Vue完整版，作为选项中的一个元素。
留意：div#app将被代替。
3. Vue非完整版，与文件配合经常使用。
留意：这里的template外部经常使用的是xml语法。
HTML与XML的关键区别在于：1、v-text——表白式2、v-html——HTML内容经常使用v-html灵活渲染的恣意HTML或许引发XSS攻打，因此只运行于可信内容，切勿将用户提供的内容间接拔出。
绑定属性经常使用v-bind，绑定事情经常使用v-on。
条件判别经常使用v-if、v-else-if、v-else。
循环经常使用for(value, key)遍历对象或数组。
键绑定疑问：经常使用:key=index或许存在疑问，后续将补充处置。
显示与暗藏经常使用v-show。
相似可见性管理，元素display不只限于block，如table为table，li为list-item。
v-once提升降级性能，仅渲染元素和组件一次性，防止滥用。
v-cloak指令坚持元素未编译形态，直至实例成功编译。
润色符如=x阻止事情流传，=x阻止自动举措，两者同时经常使用可防止抵触。
额外性能有：1、v-on快捷键 鼠标事情 2、v-bind 3、v-model 特意强调学习点用于“双向绑定”，在prop上进执行态降级。
例如：可以简化为：留意：v-bind与润色符同时经常使用时，表白式性能将被禁用。
遵照Vue规定，确保代码的正确性和安保性。
vue静态网站模版(vue加载html静态页面)
vue聊天室的基础静态页面搭建
接着关上这个文件在build文件夹中，增加而后还是这个文件，找到plugins，在外面参与留意着外面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。
依照你的route来写。
审核node能否装置成功为了更快装置，可以经常使用淘宝的镜像：http：///在终端输入以下命令：检测cnpm能否装置成功vue-cli是vue脚手架工具，繁难打包，部署，测试等。
前言：Vue主机驳回nginxVue为主机；请确保你是以领有sudo权限的用户来登录的主机请依照上方的步骤，在CentOS中装置Nginx。
Vue模板渲染的原理是什么1、vue的渲染分为两个局部：vue自身的初始化；生命周期钩子函数的环节自身初始化时，经过五个mixin方法为vue自身注入关系属性和方法。
2、原理：Vue框架的外围是虚构DOM，编译template模板时要转译成VNode的函数，当用render函数构建DOM时，Vue就免去了转译的步骤。
3、原理是：vue在编译的时刻经过在DOM元素以及css样式上加上惟一标志，成功样式私有化，不污染全局样式。
如：编译为；对应的样式。
my-class编译为。
my-class[data-v-56e7f951]。
1、VuePress是一个以Markdown为中心的静态网站生成器，一个VuePress站点实质上是一个由Vue在和VueRouter驱动的单页面运行(SPA)。
路由会依据你的Markdown文件的相对门路来智能生成。
2、先繁难引见一下VuePress，这是尤大在2018年4月份颁布的一个新轮子。
一个基于VueSSR的静态站生成器，原本的目标是爽爽的写文档，然而我发现用来撸一团体博客也十分不错。
3、官网文档：https：///Vue驱动的静态网站生成器。
4、上方咱们来经常使用VuePress来搭建一个博客系统。
我这里经常使用的是vuepress社区主题vuepress-theme-hope（一款集成了泛滥插件的vuepress主题）。
理想上，一个VuePress网站是一个由Vue、VueRouter和webpack驱动的单页运行。
5、GatsbyGatsby是一个越来越盛行的开源网站生成框架。
它经常使用来生成极速、界面柔美的网站。
Primary:Vue{三、一个基于Vue的门户网站(阅历踩坑)}
(windowasany)参考：vue3报错UncaughtErrorvue2中用法：vue3用法：vue3+ts中经常使用process报错，找不到称号“process”。
Vue将被侦听的数组的变卦方法启动了包裹，所以它们也将会触发视图降级。
当天到公司，继续关上我的vue的名目，然而页面显示的是CannotGET，关上管理台之后，发现有一篇白色报错。
vue名目静态资源(图片,字体)援用门路正确姿态
咱们须要在template，script，style下援用图片，如下。
比如这里能用@assets是由于在外面设置了如下参数。
咱们首先关上，检查template：外面定义了一个Vuelogo，其中援用了asserts文件夹的图片。
依据门路，咱们可以找到图片门路。
那么假设咱们有其余图片，人造也可以类比经常使用。
vue打包上线后经常会碰到静态资源门路找不到的疑问。
静态资源文件放入public文件夹下（相似cli2外面的static文件夹），打包时不会被wenpack处置，输入文件在dist文件夹下。
public文件夹public文件夹下的文件并不会被Webpack处置：它们会间接被复制到最终的打包目录（文件名需指定）下。
必定经常使用相对门路援用这些文件，繁难说就是用来寄存万年不变的文件。
在vuex版本相似static/文件夹。
所以当天龙哥教你一套新的前端框架，基于vue的ssr前端框架—nuxt。
本地开发的时刻，经常使用vue语法，模块化你的名目，而后颁布的时刻生成静态，把ajax得来到的内容转化成静态html以利于seo。
接着关上这个文件在build文件夹中，增加而后还是这个文件，找到plugins，在外面参与留意着外面的地址，是生成静态化以后的目录，这里跟你的route地址是对应的。
依照你的route来写。
普通经常使用nodejs环境下的pm2运转颁布generate打包用于将首页静态化（首页的nuxt-link也会被静态化），打包后生成dist文件夹（相似于vue普通性打包）。
颁布时，只要要将dist文件夹颁布即可（同vue名目颁布）。
需在plugins文件夹里创立一个文件，内容如下：在nuxt名目中如何经常使用scss？与Vue中经常使用的有和不同？也繁难，只是性能上略有不同，经常使用上没有不同。
Vue3基础-模板语法
假设咱们宿愿把数据显示到模板（template）中，经常使用最多的语法是 “Mustache”语法 (双大括号) 的文本插值。
并且咱们前端提到过，data前往的对象是有增加到Vue的照应式系统 中，当data中的数据出现扭转时，对应的内容也会出现降级。
当然，Mustache中不只仅可以是data中的属性，也可以是一个Javascript的表白式：
上方这种写法是语句不是表白式，所以是失误的：
v-once用于指定元素或许组件只渲染一次性，当数据出现变动时，元素或许组件以及其一切的子元素将视为静态内容并且跳过，该指令可以用于性能提升。
假设增加到父节点，那么一切的子节点也是只会渲染一次性：
用于降级元素的 textContent，等价于Mustache语法，而且Mustache语法更灵敏。
自动状况下，假设咱们展现的内容自身是 html 的，那么vue并不会对其启动不凡的解析。
假设咱们宿愿这个内容被Vue可以解析进去，那么可以经常使用 v-html 来展现。
成果如下：
v-pre用于跳过元素和它的子元素的编译环节，显示原始的Mustache标签。
跳过不须要编译的节点，放慢编译的速度。
成果如下：
这个指令坚持在元素上直到关联组件实例完结编译。
v-cloak 和 CSS 规定如 [v-cloak] { display: none } 一同用时，这个指令可以暗藏未编译的 Mustache 标签直到组件实例预备终了，关键用于处置闪烁疑问，如今Vue3普通不会出现这个疑问了。
<div> 不会显示，直到编译完结。
前面讲的一系列指令，关键是将值拔出到模板内容中。
然而，除了内容须要灵活来选择外，某些属性咱们也宿愿灵活来绑定。
比如灵活绑定a元素的href属性，灵活绑定img元素的src属性。
绑定属性咱们经常使用 v-bind: ，缩写 : ，用于灵活地绑定一个或多个 attribute，或一个组件 prop 到表白式。
v-bind用于绑定一个或多个属性值，或许向另一个组件传递props值（这个学到组件时再引见），在开发中，有哪些属性须要灵活启动绑定呢？还是有很多的，比如图片的链接src、网站的链接href、灵活绑定一些类、样式等等。
v-bind有一个对应的语法糖，也就是简写方式，在开发中，咱们理论会经常使用语法糖的方式，由于更繁复。
留意 ：Vue2 template模板中只能有一个根元素，Vue3 template模板中准许有多个根元素。
在开发中，有时刻咱们的元素class也是灵活的，比如：当数据为某个形态时，字体显示白色，当数据另一个形态时，字体显示彩色。
绑定class有两种方式：对象语法，数组语法。
① 对象语法：咱们可以传给 :class (v-bind:class 的简写) 一个对象，以灵活地切换 class。
② 数组语法：咱们可以把一个数组传给 :class，以运行一个 class 列表；
咱们可以应用v-bind:style来绑定一些CSS内联样式，这是由于某些样式咱们须要依据数据灵活来选择，比如某段文字的色彩，大小等等。
CSS属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名。
绑定style有两种方式：对象语法，数组语法。
① 对象语法：
② 数组语法： :style的数组语法可以将多个样式对象运行到同一个元素上
在某些状况下，咱们属性的称号或许也不是固定的。
前面咱们无论绑定src、href、class、style，属性称号都是固定的，假设属性称号不是固定的，咱们可以经常使用 :[属性名]=“值” 的格局来定义，这种绑定的方式，咱们称之为灵活绑定属性。
假设咱们宿愿将一个对象的一切属性，绑定到元素上的一切属性，应该怎样做呢？十分繁难，咱们可以间接经常使用 v-bind 绑定一个对象。
如下：info对象会被拆解成div的各个属性。
前面咱们绑定了元素的内容和属性，在前端开发中另外一个十分关键的个性就是交互。
在前端开发中，咱们须要经常和用户启动各种各样的交互，这个时刻，咱们就必定监听用户出现的事情，比如点击、拖拽、键盘事情等等。
在Vue中如何监听事情呢？经常使用v-on指令。接上去咱们来看一下v-on的用法：
咱们可以经常使用v-on来监听一下点击的事情：
v-on:click可以写成@click，是它的语法糖写法：
当然，咱们也可以绑定其余的事情：
假设咱们宿愿一个元素绑定多个事情，这个时刻可以传入一个对象：
当经过methods中定义方法，以供@click调用时，须要留意参数疑问：
状况一：假设该方法不须要额外参数，那么方法后的()可以不增加，并且方法的成功不用参数，间接就可以打印event。
状况二：假设须要同时传入某个参数和event时，可以经过$event传入事情，并且方法的成功必定按顺序写明参数。
代表enter键弹起的时刻会调用onEnter方法，咱们普通在方法外面失掉输入的值：
在某些状况下，咱们须要依据以后的条件选择某些元素或组件能否渲染，这个时刻咱们就须要启动条件判别了。
Vue提供了上方的指令来启动条件判别：
上方咱们来对它们启动学习。
v-if、v-else、v-else-if 用于依据条件来渲染某一块的内容，这些内容只要在条件为true时，才会被渲染进去，这三个指令与Javascript的条件语句 if、else、else if 相似。
v-if 的渲染原理：v-if是惰性的，当条件为false时，其判别的内容齐全不会被渲染或许会被销毁掉，当条件为true时，才会真正渲染条件块中的内容。
由于v-if是一个指令，所以必定将其增加到一个元素上，然而假设咱们宿愿切换的是多个元素呢？ 假设此时咱们经常使用div包裹，div会被渲染到界面过去，然而咱们并不宿愿div被渲染，这个时刻，咱们可以选用经常使用template，template元素可以当做无法见的包裹元素，并且 v-if 可以增加到 template 上，然而最终template不会被渲染进去，相似于小程序中的block。
v-show和v-if的用法看起来是分歧的，也是依据一个条件选择能否显示元素或许组件。
首先，在用法上的区别：
其次，实质的区别：
开发中如何启动选用呢？
在实在开发中，咱们往往会从主机拿到一组数据，并且须要对其启动渲染。
这个时刻咱们可以经常使用v-for来成功，v-for相似于Javascript的for循环，可以用于遍历一组数据。
v-for的基本格局是 item in 数组 ，数组理论是来自data或许prop，也可以是其余方式，item是咱们给每项元素起的一一般名，这一般名可以自定来定义。
咱们知道，在遍历一个数组的时刻会经常须要拿到数组的索引，假设咱们须要索引，可以经常使用格局 (item, index) in 数组 ，留意顺序，数组元素项item在前面，索引项index在前面。
相似于v-if，你可以经常使用 template 元历来循环渲染一段蕴含多个元素的内容。
咱们经常使用template来对多个元素启动包裹，而不是经常使用div来成功，由于div会被渲染，template不会被渲染。
而且假设有ul，ul外面不介绍放div，只介绍放li。
Vue 将被侦听的数组的变卦方法启动了包裹，所以它们也将会触发视图降级，这些被包裹过的方法包括：
上方的方法会间接修正原来的数组，所以视图会跟着降级。然而某些方法不会交流原来的数组，而是会生成新的数组，比如 filter()、concat() 和 slice()，这时刻咱们可以经过从新赋值的方式触发视图降级，如下：
在经常使用v-for启动列表渲染时，咱们理论会给元素或许组件绑定一个key属性。
这个key属性有什么作用呢？ 咱们先来看一下官网的解释：key属性关键用在Vue的虚构DOM算法，在新旧nodes对比时辨识VNodes。
假设不经常使用key，Vue会经常使用一种最大限制缩小灵活元素并且尽或许的尝试就地修正/复用相反类型元素的算法，而经常使用key时，它会基于key的变动从新陈列元素顺序，并且会移除/销毁key不存在的元素。
官网的解释关于初学者来说并不好了解，比如上方的疑问： 什么是新旧nodes，什么是VNode？ 没有key的时刻，如何尝试修正和复用的？ 有key的时刻，如何基于key从新陈列的？
咱们先来解释一下VNode的概念： VNode的全称是Virtual Node，也就是虚构节点。
理想上，无论是组件还是元素，它们最终在Vue中示意进去的都是一个个VNode。
VNode的实质是一个Javascript的对象。
假设咱们不只是一个繁难的div，而是有一大堆的元素，那么它们应该会构成一个VNode Tree。
咱们先来看一个案例：这个案例是当咱们点击按钮时会在li两边拔出一个f。
咱们可以确定的是，这次降级关于ul和button是不须要启动降级，须要降级的是咱们li的列表。
在Vue中，关于相反父元素的子元素节点并不会从新渲染整个列表，由于关于列表中 a、b、c、d它们都是没有变动的。
在操作实在DOM的时刻，咱们只要要在两边拔出一个f的li即可。
那么Vue中关于列表的降级终究是如何操作的呢？ Vue理想上会关于有key和没有key会调用两个不同的方法，有key，那么就调用 patchKeyedChildren方法，没有key，那么就调用 patchUnkeyedChildren方法。
没有key的diff算法：
咱们会发现上方的diff算法效率并不高，c和d来说它们理想上并不须要有任何的改动，然而由于咱们的c被f所经常使用了，一切后续一切的内容都要一次性启动改动，并且最后启动新增。
有key的diff算法：
所以咱们可以发现，Vue在启动diff算法的时刻，会尽量应用咱们的key来启动提升操作，在没有key的时刻咱们的效率是十分低效的，在启动拔出或许重置顺序的时刻，坚持相反的key可以让diff算法愈加的高效。
