Vue学习笔记——使用脚手架进行开发

使用Vue脚手架进行开发

Vue脚手架结构

├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git 版本管制忽略的配置
├── babel.config.js: babel 的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件

main.js

/* 
    该文件是整个项目的入口文件
*/
//引入Vue
import Vue from 'vue'
//引入App组件，它是所有组件的父组件
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
/* 
    关于不同版本的Vue：
    
        1.vue.js与vue.runtime.xxx.js的区别：
                (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
                (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
​
        2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
            render函数接收到的createElement函数去指定具体内容。
*/
//创建Vue实例对象---vm
new Vue({
    el:'#app',
    //render函数完成了这个功能：将App组件放入容器中
  render: h => h(App),
    // render:q=> q('h1','你好啊')
​
    // template:`<h1>你好啊</h1>`,
    // components:{App},
})

render函数

• 类型：(createElement: () => VNode) => VNode

• 详细：

  字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

  如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。

vue.config.js配置文件

0. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。
1. 使用vue.config.js可以对脚手架进行个性化定制，详情见：cli.vuejs.org/zh

静态资源的引入

静态资源可以通过两种方式进行处理：

• 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
• 放置在 public 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。

从相对路径导入

当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。

例如，url(./image.png) 会被翻译为 require('./image.png')，而：

<img src="./image.png">

将会被编译到：

h('img', { attrs: { src: require('./image.png') }})

在其内部，我们通过 file-loader 用版本哈希值和正确的公共基础路径来决定最终的文件路径，再用 url-loader 将小于 4kb 的资源内联，以减少 HTTP 请求的数量。

你可以通过 chainWebpack 调整内联文件的大小限制。例如，下列代码会将其限制设置为 10kb：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('images')
        .use('url-loader')
          .loader('url-loader')
          .tap(options => Object.assign(options, { limit: 10240 }))
  }
}

URL 转换规则

• 如果 URL 是一个绝对路径 (例如 /images/foo.png)，它将会被保留不变。

• 如果 URL 以 . 开头，它会作为一个相对模块请求被解释且基于你的文件系统中的目录结构进行解析。

• 如果 URL 以 ~ 开头，其后的任何内容都会作为一个模块请求被解析。这意味着你甚至可以引用 Node 模块中的资源：

  <img src="~some-npm-package/foo.png">
  

• 如果 URL 以 @ 开头，它也会作为一个模块请求被解析。它的用处在于 Vue CLI 默认会设置一个指向 <projectRoot>/src 的别名 @。 (仅作用于模版中)

public文件夹

任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。

注意我们推荐将资源作为你的模块依赖图的一部分导入，这样它们会通过 webpack 的处理并获得如下好处：

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
• 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
• 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

public 目录提供的是一个应急手段，当你通过绝对路径引用它时，留意应用将会部署到哪里。如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀：

• 在 public/index.html 或其它通过 html-webpack-plugin 用作模板的 HTML 文件中，你需要通过 <%= BASE_URL %> 设置链接前缀：

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  

• 在模板中，你首先需要向你的组件传入基础 URL：

  data () {
    return {
      publicPath: process.env.BASE_URL
    }
  }
  

  然后：

  <img :src="`${publicPath}my-image.png`">
  

何时使用public文件夹

• 你需要在构建输出中指定一个文件的名字。
• 你有上千个图片，需要动态引用它们的路径。
• 有些库可能和 webpack 不兼容，这时你除了将其用一个独立的 <script> 标签引入没有别的选择。

ref属性

• ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例：

  <!-- `vm.$refs.p` will be the DOM node -->
  <p ref="p">hello</p>
  ​
  <!-- `vm.$refs.child` will be the child component instance -->
  <child-component ref="child"></child-component>
  

  当 v-for 用于元素或组件的时候，引用信息将是包含 DOM 节点或组件实例的数组。

  关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。

---

0. 被用来给元素或子组件注册引用信息（id的替代者）

1. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

2. 使用方式：

   4. 打标识：<h1 ref="xxx">.....</h1> 或 <School ref="xxx"></School>

3. 获取：this.$refs.xxx

4. 多个同级同名ref获取最后一个ref

5. 多个不同级同名ref选择父级元素

6. 对于v-show=“false”的元素也会返回对应的Dom

7. 对于v-if="false"的元素返回undefined

8. 即使存在同级同名变量，且最后一个标签的v-if="false"此时也指向最后一个标签，因为最后一个标签节点已被移除，故返回undefined

9. 对组件标签添加id，该id会存在于该组件最外层的根节点上

props配置项

0. 功能：让组件接收外部传过来的数据

1. 传递数据：<Demo name="xxx"/>

2. 接收数据：

   )第一种方式（只接收）：props:['name']

(2. )第二种方式（限制类型）：```props:{name:String}```
​
(3. )第三种方式（限制类型、限制必要性、指定默认值）：

props:{
    name:{
    type:String, //类型
    required:true, //必要性
    default:'Shirllyuan' //默认值
    }
}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

data和props中出现重名变量，则优先使用props中的变量。props中的数据在组件的创建上是优先与data的数据的

Mixin

0. 功能：可以把多个组件共用的配置提取成一个混入对象

1. 使用方式：

   第一步定义混合：

   {
       data(){....},
       methods:{....}
       ....
   }
   

   第二步使用混入：

   全局混入：Vue.mixin(xxx) ​ 局部混入：mixins:['xxx']

---

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

Vue.mixin(mixin)

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例。插件作者可以使用混入，向组件注入自定义的行为。不推荐在应用代码中使用。

插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种：

0. 添加全局方法或者 property。如：vue-custom-element
1. 添加全局资源：指令/过滤器/过渡等。如 vue-touch
2. 通过全局混入来添加一些组件选项。如 vue-router
3. 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
4. 一个库，提供自己的 API，同时提供上面提到的一个或多个功能。如 vue-router

使用插件

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)
​
new Vue({
  // ...组件选项
})

也可以传入一个可选的选项对象：

Vue.use(MyPlugin, { someOption: true })

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()：

// 用 Browserify 或 webpack 提供的 CommonJS 模块环境时
var Vue = require('vue')
var VueRouter = require('vue-router')
​
// 不要忘了调用此方法
Vue.use(VueRouter)

awesome-vue 集合了大量由社区贡献的插件和库。

开发插件

Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象：

MyPlugin.install = function (Vue, options) {
  // 1. 添加全局方法或 property
  Vue.myGlobalMethod = function () {
    // 逻辑...
  }
​
  // 2. 添加全局资源
  Vue.directive('my-directive', {
    bind (el, binding, vnode, oldVnode) {
      // 逻辑...
    }
    ...
  })
​
  // 3. 注入组件选项
  Vue.mixin({
    created: function () {
      // 逻辑...
    }
    ...
  })
​
  // 4. 添加实例方法
  Vue.prototype.$myMethod = function (methodOptions) {
    // 逻辑...
  }
}

---

0. 功能：用于增强Vue
1. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
2. 定义插件：

obj.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)
    // 2. 添加全局指令
    Vue.directive(....)
    // 3. 配置全局混入(合)
    Vue.mixin(....)
    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

4. 使用插件：Vue.use()

scoped样式

0. 作用：让样式在局部生效，防止冲突。
1. 写法：<style scoped>

组件化编码流程

0. 组件化编码流程：

   (1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

   (2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

   1).一个组件在用：放在组件自身即可。

   2). 一些组件在用：放在他们共同的父组件上（状态提升）。

   (3).实现交互：从绑定事件开始。

1. props适用于：

   (1).父组件 ==> 子组件 通信

   (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

2. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

3. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

webStorage

cookie 、document.cookie

Cookie 是直接存储在浏览器中的一小串数据。它们是 HTTP 协议的一部分，由 RFC 6265 规范定义。

Cookie 通常是由 Web 服务器使用响应 Set-Cookie HTTP-header 设置的。然后浏览器使用 Cookie HTTP-header 将它们自动添加到（几乎）每个对相同域的请求中。

我们还可以使用 document.cookie 属性从浏览器访问 cookie。

// 在 javascript.info，我们使用谷歌分析来进行统计，
// 所以应该存在一些 cookie
alert( document.cookie ); // cookie1=value1; cookie2=value2;...

document.cookie 的值由 name=value 对组成，以 ; 分隔。每一个都是独立的 cookie。

为了找到一个特定的 cookie，我们可以以 ; 作为分隔，将 document.cookie 分开，然后找到对应的名字。我们可以使用正则表达式或者数组函数来实现。

写入document.cookie

我们可以写入 document.cookie。但这不是一个数据属性，它是一个访问器（getter/setter）。对其的赋值操作会被特殊处理。

对 document.cookie 的写入操作只会更新其中提到的 cookie，而不会涉及其他 cookie。

例如，此调用设置了一个名称为 user 且值为 John 的 cookie：

document.cookie = "user=John"; // 只会更新名称为 user 的 cookie
alert(document.cookie); // 展示所有 cookie

如果你运行了上面这段代码，你会看到多个 cookie。这是因为 document.cookie= 操作不是重写整所有 cookie。它只设置代码中提到的 cookie user。

从技术上讲，cookie 的名称和值可以是任何字符，为了保持有效的格式，它们应该使用内建的 encodeURIComponent 函数对其进行转义：

// 特殊字符（空格），需要编码
let name = "my name";
let value = "John Smith"
​
// 将 cookie 编码为 my%20name=John%20Smith
document.cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
​
alert(document.cookie); // ...; my%20name=John%20Smith

限制：

• encodeURIComponent 编码后的 name=value 对，大小不能超过 4KB。因此，我们不能在一个 cookie 中保存大的东西。
• 每个域的 cookie 总数不得超过 20+ 左右，具体限制取决于浏览器。

document.cookie 提供了对 cookie 的访问

• 写入操作只会修改其中提到的 cookie。
• name/value 必须被编码。
• 一个 cookie 最大为 4KB，每个网站最多有 20+ 个左右的 cookie（具体取决于浏览器）。

Cookie 选项：

• path=/，默认为当前路径，使 cookie 仅在该路径下可见。
• domain=site.com，默认 cookie 仅在当前域下可见，如果显式设置了域，可以使 cookie 在子域下也可见。
• expires 或 max-age 设置 cookie 过期时间，如果没有设置，则当浏览器关闭时 cookie 就失效了。
• secure 使 cookie 仅在 HTTPS 下有效。
• samesite，如果请求来自外部网站，禁止浏览器发送 cookie，这有助于防止 XSRF 攻击。

httpOnly Web 服务器使用 Set-Cookie header 来设置 cookie。并且，它可以设置 httpOnly 选项。这个选项禁止任何 JavaScript 访问 cookie。我们使用 document.cookie 看不到此类 cookie，也无法对此类 cookie 进行操作。防止XSS攻击

sessionStorage&localStroage

0. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

1. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

2. 相关API：

   0. xxxxxStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

   1. xxxxxStorage.getItem('person');

      该方法接受一个键名作为参数，返回键名对应的值。

   2. xxxxxStorage.removeItem('key');

      该方法接受一个键名作为参数，并把该键名从存储中删除。

   3. xxxxxStorage.clear()

      该方法会清空存储中的所有数据。

3. 备注：

   0. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
   1. LocalStorage存储的内容，需要手动清除才会消失。
   2. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
   3. JSON.parse(null)的结果依然是null。

Storage 事件：这允许同源的不同窗口交换消息。

• 在调用 setItem，removeItem，clear 方法后触发。
• 包含有关操作的所有数据（key/oldValue/newValue），文档 url 和存储对象 storageArea。
• 在所有可访问到存储对象的 window 对象上触发，导致当前数据改变的 window 对象除外（对于 sessionStorage 是在当前标签页下，对于 localStorage 是在全局，即所有同源的窗口）。

IndexDB

IndexedDB 可以被认为是“localStorage on steroids”。这是一个简单的键值对数据库，功能强大到足以支持离线应用，而且用起来比较简单。

最好的指南是官方文档。目前的版本 是2.0，但是 3.0 版本中的一些方法（差别不大）也得到部分支持。

基本用法可以用几个短语来描述：

0. 获取一个 promise 包装器，比如 idb。

1. 打开一个数据库：idb.openDb(name, version, onupgradeneeded)

   • 在 onupgradeneeded 处理程序中创建对象存储和索引，或者根据需要执行版本更新。

2. 对于请求：

   • 创建事务 db.transaction('books')（如果需要的话，设置 readwrite）。
   • 获取对象存储 transaction.objectStore('books')。

3. 按键搜索，可以直接调用对象库上的方法。

   • 要按对象字段搜索，需要创建索引。

4. 如果内存中容纳不下数据，请使用光标。

组件的自定义事件

vm.$emit( eventName, […args] )

• 参数：

  • {string} eventName
  • [...args]

  触发当前实例上的事件。附加参数都会传给监听器回调。

事件名：不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或 property 名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

因此，我们推荐你始终使用 kebab-case 的事件名。

自定义组件的v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

Vue.component('base-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

现在在这个组件上使用 v-model 的时候：

<base-checkbox v-model="lovingVue"></base-checkbox>

这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 <base-checkbox> 触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的 property 将会被更新。

---

0. 一种组件间通信的方式，适用于：子组件 ===> 父组件

1. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

2. 绑定自定义事件：将自定义事件绑定到了指定的对象上，该对象可以通过调用this.$emit方法使用该事件，并向该事件的回调函数中传入参数

   0. 第一种方式，在父组件中：<Demo @shirllyuan="test"/> 或 <Demo v-on:shirllyuan="test"/>
   1. 第二种方式，在父组件中：

   <Demo ref="demo"/>
   ......
   mounted(){
      this.$refs.xxx.$on('shirllyuan',this.test)
   }
   

   3. 若想让自定义事件只能触发一次，可以使用once事件修饰符，或$once方法。

   this.$refs.student.$once('shirllyuan',this.getStudentName) //绑定自定义事件（一次性）
   <Student @shirllyuan.once="getStudentName"/> //使用事件修饰符
   

3. 触发自定义事件：this.$emit('shirllyuan',数据)

                //触发Student组件实例身上的shirllyuan事件
                this.$emit('shirllyuan',this.name,666,888,900)
                // this.$emit('demo')
                // this.$emit('click')

5. 解绑自定义事件this.$off('shirllyuan')

                this.$off('shirllyuan') //解绑一个自定义事件
                // this.$off(['shirllyuan','demo']) //解绑多个自定义事件
                // this.$off() //解绑所有的自定义事件

6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

<Student ref="student" @click.native="show"/>

7. 注意：通过this.$refs.xxx.$on('shirllyuan',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！
8. 销毁了当前组件的实例，销毁后所有当前组件实例的自定义事件全都不奏效。

document.getElementById("btn")

全局事件总线

全局事件总线的原理

事件总线是通过对一个在该应用中，所有组件均能访问的对象，并向该对象绑定自定义事件，带有该自定义事件回调函数的组件在其他组件触发该自定义事件时，会同时将触发该事件的组件想要传递的参数，通过该事件的回调函数，传入该回调函数所在的组件，即在想要接收的组件上定义回调函数，并定义自定义事件，该自定义事件会触发这个回调函数，然后将该自定义事件绑定到，该应用内所有组件均能访问的一个对象上，想要向这个组件内传数据，便通过其他组件访问这个公有对象上的对应的自定义事件，便可以将数据传入回调函数所在的组件

这就要求，这个对象有两点，首先是所有组件均可见，例如window，Vue的原型对象上的对象 等，以保证在这个应用内，所有组件均可访问这一对象，进而添加/触发自定义事件；不仅如此，该对象上还应该带有$on、$off、$emit等函数，以确保在该对象上能够绑定/解绑/触发自定义事件，例如Vue的实例对象，VueComponent的实例对象。

全局事件总线使用

0. 一种组件间通信的方式，适用于任意组件间通信。

1. 安装全局事件总线：

   new Vue({
       ......
       beforeCreate() {
           Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
       },
       ......
   }) 
   

2. 使用事件总线：

   0. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){
        demo(data){......}
      }
      ......
      mounted() {
        this.$bus.$on('xxxx',this.demo)
      }
      

   1. 提供数据：this.$bus.$emit('xxxx',数据)

3. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

消息订阅与发布

0. 一种组件间通信的方式，适用于任意组件间通信。

1. 使用步骤：

   0. 安装pubsub：npm i pubsub-js

   1. 引入: import pubsub from 'pubsub-js'

   2. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

      methods(){
        demo(msgName,data){......}
      }
      ......
      mounted() {
        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
      }
      

   3. 提供数据：pubsub.publish('xxx',数据)

   4. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

$nextTick

0. 语法：this.$nextTick(回调函数)
1. 作用：在下一次 DOM 更新结束后执行其指定的回调。
2. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

过渡与动画

0. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

1. 写法：

   0. 准备好样式：

      • 元素进入的样式：

        0. v-enter：进入的起点
        1. v-enter-active：进入过程中
        2. v-enter-to：进入的终点

      • 元素离开的样式：

        0. v-leave：离开的起点
        1. v-leave-active：离开过程中
        2. v-leave-to：离开的终点

   1. 使用<transition>包裹要过度的元素，并配置name属性：

      <transition name="hello"> <!--可以使用appear属性，使动画刚开始加载就触发-->
          <h1 v-show="isShow">你好啊！</h1>
      </transition>
      

   2. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

Vue脚手架配置代理

同源策略

在web应用的安全模型中是一个重要概念。在这个策略下，web浏览器允许第一个页面的脚本访问第二个页面里的数据，但是也只有在两个页面有相同的源时。源是由URI，主机名，端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。

两个页面同源，即具有相同的协议，主机以及端口号

规避同源策略

document.domain属性

如果两个window或者frames包含的脚本可以把domain设置成一样的值，那么就可以规避同源策略，每个window之间可以互相沟通。例如，orders.example.com下页面的脚本和catalog.example.com下页面的脚本可以设置他们的document.domain属性为example.com，从而让这两个站点下面的文档看起来像在同源下，然后就可以让每个文档读取另一个文档的属性。这种方式也不是一直都有用，因为端口号是在内部保存的，有可能被保存成null。换句话说，example.com的端口号80，在我们更新document.domain属性的时候可能会变成null。为null的端口可能不被认为是80，这主要依赖浏览器实现。

跨域资源共享（Cors）

这种方式使用了一个新的Origin请求头和一个新的Access-Control-Allow-Origin响应头扩展了HTTP。允许服务端设置Access-Control-Allow-Origin头标识哪些站点可以请求文件，或者设置Access-Control-Allow-Origin头为"*"，允许任意站点访问文件。浏览器，例如Firefox3.5，Safari4，IE10使用这个头允许跨域HTTP请求。

跨文档通信

这种方式允许一个页面的脚本发送文本信息到另一个页面的脚本中，不管脚本是否跨域。在一个window对象上调用postMessage()会异步的触发window上的onmessage事件，然后触发定义好的事件处理方法。一个页面上的脚本仍然不能直接访问另外一个页面上的方法或者变量，但是他们可以安全的通过消息传递技术交流。

JSONP

JOSNP允许页面接受另一个域的JSON数据，通过在页面增加一个可以从其它域加载带有回调的JSON响应的<script>标签。只能解决get请求的跨域问题，对于其他类型请求无法解决

WebSocket

现代浏览器允许脚本直连一个WebSocket地址而不管同源策略。然而，使用WebSocket URI的时候，在请求中插入Origin头就可以标识脚本请求的源。为了确保跨站安全，WebSocket服务器必须根据允许接受请求的白名单中的源列表比较头数据。

Vue配置代理方式一

devServer.proxy

• Type: string | Object

  如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

  devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

  module.exports = {
    devServer: {
      proxy: 'http://localhost:4000'
    }
  }
  

  这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到http://localhost:4000。

  如果你想要更多的代理控制行为，也可以使用一个 path: options 成对的对象。完整的选项可以查阅 http-proxy-middleware 。

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: '<url>',
          ws: true,
          changeOrigin: true
        },
        '/foo': {
          target: '<other_url>'
        }
      }
    }
  }
  

---

在vue.config.js中添加如下配置：

devServer:{
  proxy:"http://localhost:5000"
}

说明：

0. 优点：配置简单，请求资源时直接发给前端（8080）即可。
1. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
2. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （优先匹配前端资源）

Vue配置代理方式二

编写vue.config.js配置具体代理规则：

module.exports = {
    devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''}
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

0. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
1. 缺点：配置略微繁琐，请求资源时必须加前缀。

插槽

0. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

1. 标签的位置写其对应结构的样式

2. v-slot只能用在template标签上

3. 分类：默认插槽、具名插槽、作用域插槽

4. 使用方式：

   0. 默认插槽：

      父组件中：
              <Category>
                 <div>html结构1</div>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot>插槽默认内容...</slot>
                  </div>
              </template>
      

   1. 具名插槽：

      父组件中：
              <Category>
                  <template slot="center">
                    <div>html结构1</div>
                  </template>
      ​
                  <template v-slot:footer>
                     <div>html结构2</div>
                  </template>
              </Category>
      子组件中：
              <template>
                  <div>
                     <!-- 定义插槽 -->
                     <slot name="center">插槽默认内容...</slot>
                     <slot name="footer">插槽默认内容...</slot>
                  </div>
              </template>
      

   2. 作用域插槽：

      0. 理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

      1. 具体编码：

         父组件中：
                 <Category>
                     <template scope="scopeData">
                         <!-- 生成的是ul列表 -->
                         <ul>
                             <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                         </ul>
                     </template>
                 </Category>
         ​
                 <Category>
                     <template slot-scope="scopeData">
                         <!-- 生成的是h4标题 -->
                         <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
                     </template>
                 </Category>
         子组件中：
                 <template>
                     <div>
                         <slot :games="games"></slot>
                     </div>
                 </template>
                 
                 <script>
                     export default {
                         name:'Category',
                         props:['title'],
                         //数据在子组件自身
                         data() {
                             return {
                                 games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                             }
                         },
                     }
                 </script>