Eighth communication component (component transfer value)

First, the communication component (component transfer value)

Related Links Learning: https://www.cnblogs.com/vichily/p/6484152.html

//// Learning Link: https://www.cnblogs.com/web-record/p/10320765.html

Learning Link: https://segmentfault.com/a/1190000015727078

Pass values between components:  https://segmentfault.com/a/1190000013945457

1.1 Sons communication component

Parent element 
<subassembly tags: Variable = "data to be transferred '> </ tab subassembly> 
subcomponents 
The props: [' variable ']

1.2 Communication sub parent component

Parent element 
<subassembly tag = @ custom event 'event name'> </ tab subassembly> 
Methods: { 
 name of the event (E) { 
   // E is transmitted over the data 
} 
} 
subassembly 
subassemblies have a trigger event 
<Button the Click @ = 'toFather'> </ Button> 
Methods: { 
toFather () { 
   . EMIT the this $ ( 'custom event name', 'data to be transferred') 
} 
}

1.3 Non Sons communication component (component communication Brothers)

Case Analysis: https://www.cnblogs.com/Sky-Ice/p/9268933.html

Defines a central event bus (relay station) 
the let EventBus = new new Vue () 
Brothers A, 
created () {} 
or 
Mounted () { 
  EventBus. $ ON ( 'signal', (D) => { 
    // D is passed over data 
  }) 
} 
brothers b, 
brothers have a triggering event b is 
<= the Click Button @ 'toFather'> </ Button> 
Methods: { 
  toFather () { 
    data EventBus $ emit ( 'signal', 'to be transferred. ') 
  } 
}

Two, vue-cli (scaffold)

Ultra-detailed explanation: https://www.cnblogs.com/ming1025/p/9887247.html

Explanation 2: https://www.jianshu.com/p/1ee1c410dc67

vue related concepts: https://www.jianshu.com/p/6803b42562a5?utm_campaign

Two, vue-cli (scaffold)

important point

If you first joined the company, or to get a new computer, you should install the primary environment, perform the following two steps and performed once.

• Creating webpack global environment npm install -g webpack

• Global create a scaffold

  Create a scaffolding named npm install -g @ vue / cli This is the way to get the latest version of the scaffolding because npm install -g @ vue cli / command type scaffolding latest order, we have to download the version of the project is to create a low way, so we to be backward compatible, so you want to install it npm install -g @ vue / cli- init core library version vue.js scaffolding is used in 2.5.2 of this command to download the version 4.2.2 scaffolding is created 2.x version of the scaffold command npm install -g vue-cli

• Create a project

  Projects under way to create a version 2.x VUE WebPACK mydemo the init (project name) 3.x or later to create a project the way VUE the Create mydemo (project name)

• Starting method

  Enter into the project npm run dev or npm start

The concept version of vue

vue3.0 refers to the core library, the author just published the source code, and there is virtually no lines. Direct download vue.js library when we used is v2.6.11

• typeScript (developed by Microsoft)

  js superset (which contains the definition of all methods of js), it has its own unique naming convention

2.1 Creating ways

2.2 Directory Structure

• build environment configuration folder

  build.js 打包的配置文件 check-versions.js node和npm版本检查文件 utils.js 构建工具 vue-loader.conf.js 加载器的配置文件 webpack.base.conf.js webpack基本配置 webpack.dev.conf.js webpack开发环境配置 webpack.prod.conf.js webpack生产环境配置

• config 项目配置文件夹

  dev.env.js 开发环境的配置 index.js 基本配置文件 prod.env.js 生产环境的配置

• node_modules 第三方的依赖包管理

• src 所有代码管理的文件夹

  assets 静态资源（这里面的内容会被打包）这里面放js,css,img components 组件文件夹 router 路由 App.vue 根组件 main.js 主入口文件

• static 静态资源管理文件夹（这里面的内容不会打包，而是原样输出）

• .babelrc 转译文件（把ES6转成ES5）

• .editorconfig 编辑器的配置文件

• .gitignore 用git上传文件的时候要 忽略的文件或者文件夹

• .postcssrc.js css相关配置

• index.html 主页

• package-lock.json 版本锁死文件

• package.json 配置管理文件

• README.md 阅读指南

• 配置文件有修改的时候，必须要重启项目，npm run dev！普通的.vue文件，修改无须重启。

三、单页面应用和多页面应用的概念

3.1单页应用（single-page application）

• 概念

  整个项目只有一个index.html。通过路由切换或者组件切换去完成页面切换的。它是局部刷新。优点，响应速度快，用户体验好。缺点，不利于SEO（搜索引擎优化）优化，首页加载过慢。代表案例网站 https://es6.ruanyifeng.com/

3.2多页应用（multi-page application）

整个项目多个.html文件。它是整体刷新。优点：利于SEO优化。缺点：用户体验较差

四、脚手架中组件的传值方式

4.1清空脚手（脚手架初始化）

删除掉components文件夹下面的HelloWord.vue文件，然后在router文件夹中找到index.js 删除hello相关的东西。把代码变成 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) export default new Router({ routes: [ ] }) 最后清空app.vue文件变成：

<template>
  <div id="app">
  </div>
</template>
​
<script>
export default {
}
</script>
​
<style>
​
</style>

 

面试题

• 什么是组件通信

• 说说你对 SPA 单页面的理解，它的优缺点分别是什么？

  SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。 优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面一点，SPA 相对对服务器压力小；前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理； 缺点：初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

• 单页应用和多页应用的区别

  单页面应用（SinglePage Web Application，SPA）多页面应用（MultiPage Application，MPA） 组成一个外壳页面和多个页面片段组成多个完整页面构成资源共用(css,js)共用，只需在外壳部分加载不共用，每个页面都需要加载 刷新方式 页面局部刷新或更改 整页刷新 url 模式 a.com/#/pageone a.com/#/pagetwo a.com/pageone.html a.com/pagetwo.html 用户体验 页面片段间的切换快，用户体验良好 页面切换加载缓慢，流畅度不够，用户体验比较差 转场动画 容易实现 无法实现 数据传递 容易 依赖 url传参、或者cookie 、localStorage等 搜索引擎优化(SEO) 需要单独方案、实现较为困难、不利于SEO检索 可利用服务器端渲染(SSR)优化 实现方法简易 试用范围 高要求的体验度、追求界面流畅的应用 适用于追求高度支持搜索引擎的应用 开发成本 较高，常需借助专业的框架 较低 ，但页面重复代码多 维护成本 相对容易 相对复杂