vue2- vue脚手架，自定义事件，插槽等复杂内容

燕燕燕燕燕
139 阅读23分钟

1. 工程化开发入门

1.1 工程化开发

开发 Vue 的两种方式：

  1. 核心包传统开发模式：基于 html / css / js 文件，直接引入核心包，开发 Vue。

  2. 工程化开发模式：基于构建工具（例如：webpack ) 的环境中开发 Vue。 image.png

问题：

① webpack 配置不简单

② 雷同的基础配置

③ 缺乏统一标准

需要一个工具，生成标准化的配置！

1.2 脚手架Vue CLI

基本介绍：

  • Vue CLI 是 Vue 官方提供的一个全局命令工具。
  • 可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

好处：

  1. 开箱即用，零配置
  2. 内置 babel 等工具
  3. 标准化

使用步骤：

  1. 全局安装 (一次) ：yarn global add @vue/cli 或 npm i @vue/cli -g

    注意：执行 vue --version 查看是否已全局安装过，安装过则跳过

  2. 查看 Vue 版本：vue --version

  3. 创建项目架子：使用命令行工具 vue create project-name（项目名-不能用中文）或 图形化创建项目 vue ui

  4. 启动项目： yarn serve 或 npm run serve（找package.json）

1.2.1 脚手架文件结构

VUE-DEMO
├── node_modules 第三包文件夹
├── public 放html文件的地方
│   ├── favicon.ico: 网站图标/页签图标
│   └── index.html: 主页面（index.html 模板文件）
├── src 源代码目录 → 以后写代码的文件夹
│   ├── assets: 存放静态资源 → 存放图片、字体等
│   │   └── logo.png
│   │── components: 组件目录 → 存放通用组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件（App根组件 → 项目运行看到的内容就在这里编写）
│   │── main.js: 入口文件 → 打包或运行，第一个执行的文件
├── .gitignore: git忽视文件
├── babel.config.js: babel的配置文件
├── jsconfig.json js配置文件
├── package.json: 项目配置文件 → 包含项目名、版本号、scripts、依赖包等 
├── README.md: 项目说明文档
├── vue.config.js: vue-cli配置文件
├── package-lock.json：包版本控制文件，锁定安装版本

1.2.2 render函数

注意：使用 import 导入第三方库的时候不需要加 './'

导入我们自己写的：

import App from './App.vue'

导入第三方的

import Vue from 'vue'

不需要在 from 'vue' 加 './' 的原因是第三方库 node_modules 人家帮我们配置好了。

我们通过 import 导入第三方库，在第三方库的 package.json 文件中确定了我们引入的是哪个文件

在这里插入图片描述

通过 module 确定了我们要引入的文件。

回到 render 函数

之前的写法是这样：

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

如果这样子写，运行的话会引发如下的报错

在这里插入图片描述

报错的意思是，是在使用运行版本的 vue ，没有模板解析器。

从上面的小知识可以知道，我们引入的 vue 不是完整版的，是残缺的（为了减小vue的大小）。所以残缺的vue.js 只有通过 render 函数才能把项目给跑起来。

来解析一下render

// render最原始写的方式
// render是个函数，还能接收到参数a
// 这个 createElement 很关键，是个回调函数
new Vue({
  render(createElement) {
      console.log(typeof createElement);
      // 这个 createElement 回调函数能创建元素
      // 因为残缺的vue 不能解析 template，所以render就来帮忙解决这个问题
      // createElement 能创建具体的元素
      return createElement('h1', 'hello')
  }
}).$mount('#app')

在这里插入图片描述

因为 render 函数内并没有用到 this，所以可以简写成箭头函数。

new Vue({
  // render: h => h(App),
  render: (createElement) => {
    return createElement(App)
  }
}).$mount('#app')

再简写：

new Vue({
  // render: h => h(App),
  render: createElement => createElement(App)
}).$mount('#app')

最后把 createElement 这个形参 换成 h 就完事了。

算啦算啦，把简写都整理一遍吧，js里的简写确实多哇。

对象内写方法最原始的：

let obj = {
    name: 'aaa',
    work: function (salary) {
        return '工资' + salary;
    }
}

ES6 简化版：

let obj = {
    name: 'aaa',
    work(salary) {
        return '工资' + salary;
    }
}

箭头函数简化版:

let obj = {
    name: 'aaa',
    work: (salary) => {
        return '工资' + salary;
    }
}

箭头函数再简化（最终版）：

// 只有一个参数就可以把圆括号去了，函数体内部只有一个 return 就可以把大括号去掉，return去掉
let obj = {
    name: 'aaa',
    work: salary => '工资' + salary;
}

这样就可以理解 render 函数的简写方式了。

来个不同版本 vue 的区别

  • vue.js 与 vue.runtime.xxx.js 的区别：
    • vue.js 是完整版的 Vue，包含：核心功能+模板解析器。
    • vue.runtime.xxx.js 是运行版的 Vue，只包含：核心功能；没有模板解析器。
  • 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用template 配置项，需要使用 render 函数接收到的createElement 函数去指定具体内容。

1.2.3 修改脚手架的默认配置

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

1.2.4 脚手架中的index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
	<!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<!-- 开启移动端的理想视口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
	<!-- 配置页签图标 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
	<!-- 配置网页标题 -->
    <title>硅谷系统</title>
  </head>
  <body>
    <!-- 当浏览器不支持js时noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

1.3 项目运行流程

image.png

1.4 组件化

1.4.1 组件化开发 & 根组件

语法高亮插件：Vetur

组件化

  • 一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。
  • 好处：便于维护，利于复用 → 提升开发效率。
  • 组件分类：普通组件、根组件。

根组件

  • 整个应用最上层的组件，包裹所有普通小组件。

  • 一个根组件App.vue，包含的三个部分：

    ① template 结构 (只能有一个根节点)

    ② style 样式 (可以支持less，需要装包 less 和 less-loader )

    ③ script 行为（js逻辑）

image.png

image.png

让组件支持 less

（1） style标签，lang="less" 开启less功能

（2） 装包: yarn add less less-loader

1.4.2 组件的三大组成部分 (结构/样式/逻辑)

组件三大组成部分的注意点：

  1. 结构 <template>：有且只能有一个根元素

  2. 样式<style>：默认全局样式，影响所有组件；加上 scoped 局部样式，只作用于当前组件

  3. 逻辑<script>：el 根实例独有，data是一个函数，保证数据独立，其他配置项一致。

1.4.2.1 组件的样式冲突 scoped

作用：让样式在局部生效，防止冲突。

写法：<style scoped>

默认情况：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

  1. 全局样式: 默认组件中的样式会作用到全局

  2. 局部样式: 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件

scoped原理？

  1. 当前组件内标签都被添加 data-v-hash值 的属性

  2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到

<style lang="less" scoped>
    .demo{
            background-color: pink;
            .atguigu{
                    font-size: 40px;
             }
    }
</style>
1.4.2.2 data 是一个函数

一个组件的 data 选项必须是一个函数。→ 保证每个组件实例，维护独立的一份数据对象。

每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。

1.4.3 普通组件的注册使用

一. 普通组件注册的两种方式：

  1. 局部注册：只能在注册的组件内使用

    ① 创建 .vue 文件 (三个组成部分,单文件组件)

    ② 在使用的组件内导入，并局部注册 components: { 组件名：组件对象 }

    <script>
    import 组件对象 from '.vue文件路径'
    import HmHeader from './components/HmHeader'

    export default {
        // 局部注册
        components: {
            '组件名': 组件对象,
            HmHeader
        }
    }
</script>

  2. 全局注册：所有组件内都能使用

    ① 创建 .vue 文件 (三个组成部分，单文件组件)

    ② main.js 内导入，并进行全局注册 Vue.component(组件名, 组件对象)

    // 导入需要全局注册的组件
import HmButton from './components/HmButton'
// 调用 Vue.component 进行全局注册
// Vue.component('组件名', 组件对象)
Vue.component('HmButton', HmButton)

二. 使用

当成 html 标签使用 <组件名></组件名>

注意：组件名规范 → 大驼峰命名法，如：HmHeader

技巧：一般都用局部注册，如果发现确实是通用组件，再抽离到全局。

总结：注册组件的流程是：创建组件、导入、注册、使用

2. 组件通信

2.1 组件通信语法

组件通信, 就是指 组件与组件 之间的数据传递。

  • 组件的数据是独立的，无法直接访问其他组件的数据
  • 想用其他组件的数据 → 组件通信

image.png

2.2 不同的组件关系 和 组件通信方案分类

组件关系分类：

  1. 父子关系
  2. 非父子关系

组件通信解决方案：

  • 父子关系：props 和 $emit
  • 非父子关系
    • provide & inject
    • eventbus
  • 通用解决方案：Vuex （适合复杂业务场景）

image.png

2.2.1 父子通信方案的核心流程

  1. 父组件通过 props 将数据传递给子组件

  2. 子组件利用 $emit 通知父组件修改更新

详细说明

  1. 父传子props：

    ① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用

  2. 子传父$emit：

    ① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

image.png

image.png

image.png

2.2.1.1 什么是 prop

Prop 定义：组件上 注册的一些 自定义属性

作用：让组件接收外部传过来的数据(或者说是向子组件传递数据)

特点：

  • 可以 传递 任意数量 的prop
  • 可以 传递 任意类型 的prop
  1. 传递数据：<Demo name="xxx"/>
2.2.1.2 props 校验

思考：组件的 prop 可以乱传么？

作用：为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

语法：

  • 类型校验

  • 非空校验

  • 默认值

  • 自定义校验

    props: {
    校验的属性名: 类型 // Number String Boolean ...
},

    props: {

    校验的属性名: {
        type: 类型, // Number String Boolean ...
        required: true, // 是否必填
        default: 默认值, // 默认值
        validator (value) {
        // 自定义校验逻辑
        return 是否通过校验
        }
    }
},

接收数据：

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

  2. 第二种方式（限制类型）：props:{name:String}

  3. 第三种方式（限制类型、限制必要性、指定默认值）：

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

示例代码：

父组件给子组件传数据

App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Student></Student>
    <School name="haha" :age="this.age"></School>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  data () {
    return {
      age: 360  
    }
  },
  components: {
    School,
    Student
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

School.vue

<template>
  <div class="demo">
    <h2>学校名称：{{ name }}</h2>
    <h2>学校年龄：{{ age }}</h2>
    <h2>学校地址：{{ address }}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<script>
export default {
  name: "School",
  // 最简单的写法：props: ['name', 'age']
  props: {
    name: {
      type: String,
      required: true // 必须要传的
    },
    age: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      address: "北京昌平",
    };
  },
  methods: {
    showName() {
      alert(this.name);
    },
  },
};
</script>

<style>
.demo {
  background-color: orange;
}
</style>
2.2.1.3 prop & data、单向数据流

共同点：都可以给组件提供数据。

区别：

  • data 的数据是自己的 → 随便改
  • prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。

image.png

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

2.2.1.4 组件自定义事件

组件自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件

使用场景

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

绑定自定义事件：

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

App.vue

<template>
    <div class="app">
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
        <Student @atguigu="getStudentName"/> 
    </div>
</template>

<script>
    import Student from './components/Student'

    export default {
        name:'App',
        components:{Student},
        data() {
            return {
                    msg:'你好啊！',
                    studentName:''
            }
        },
        methods: {
            getStudentName(name,...params){
                console.log('App收到了学生名：',name,params)
                this.studentName = name
            }
        }
    }
</script>

<style scoped>
    .app{
        background-color: gray;
        padding: 5px;
    }
</style>

Student.vue

<template>
    <div class="student">
        <button @click="sendStudentlName">把学生名给App</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
            }
        },
        methods: {
            sendStudentlName(){
                //触发Student组件实例身上的atguigu事件
                this.$emit('atguigu',this.name,666,888,900)
            }
        },
    }
</script>

<style lang="less" scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

第二种方式，在父组件中：

使用 this.$refs.xxx.$on() 这样写起来更灵活，比如可以加定时器啥的。

具体代码

App.vue

<template>
    <div class="app">
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
        <Student ref="student"/>
    </div>
</template>

<script>
    import Student from './components/Student'

    export default {
        name:'App',
        components:{Student},
        data() {
            return {
                studentName:''
            }
        },
        methods: {
            getStudentName(name,...params){
                console.log('App收到了学生名：',name,params)
                this.studentName = name
            },
        },
        mounted() {
            this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
            // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
        },
    }
</script>

<style scoped>
    .app{
        background-color: gray;
        padding: 5px;
    }
</style>

Student.vue

<template>
    <div class="student">
        <button @click="sendStudentlName">把学生名给App</button>
    </div>
</template>

<script>
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
            }
        },
        methods: {
            sendStudentlName(){
                //触发Student组件实例身上的atguigu事件
                this.$emit('atguigu',this.name,666,888,900)
            }
        },
    }
</script>

<style lang="less" scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

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

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

使用 this.$emit() 就可以子组件向父组件传数据

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

代码

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

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

代码

<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） -->
<Student ref="student" @click.native="show"/>

注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

2.2.2 非父子通信- event bus 事件总线(拓展)

作用：非父子组件之间，进行简易消息传递。(复杂场景 → Vuex)（一种组件间通信的方式，适用于任意组件间通信。）

image.png

  1. 安装全局事件总线：

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

  2. 使用事件总线：

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

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

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

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

示例代码

School.vue

<template>
	<div class="school">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
</template>

<script>
	export default {
		name:'School',
		data() {
			return {
				name:'尚硅谷',
				address:'北京',
			}
		},
        methods: {
            demo(data) {
                console.log('我是School组件，收到了数据',data)
            }
        }
		mounted() {
			// console.log('School',this)
			this.$bus.$on('hello',this.demo)
		},
		beforeDestroy() {
			this.$bus.$off('hello')
		},
	}
</script>

<style scoped>
	.school{
		background-color: skyblue;
		padding: 5px;
	}
</style>

Student.vue

<template>
	<div class="student">
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<button @click="sendStudentName">把学生名给School组件</button>
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男',
			}
		},
		mounted() {
			// console.log('Student',this.x)
		},
		methods: {
			sendStudentName(){
				this.$bus.$emit('hello',this.name)
			}
		},
	}
</script>

<style lang="less" scoped>
	.student{
		background-color: pink;
		padding: 5px;
		margin-top: 30px;
	}
</style>

在这里插入图片描述

在这里插入图片描述

2.2.3 非父子通信 (拓展) - provide & inject

provide & inject 作用：跨层级共享数据。

  1. 父组件 provide 提供数据

    export default {
    provide () {
        return {
            // 普通类型【非响应式】：父组件修改数据，子孙组件还是原数据展示
            color: this.color,
            // 复杂类型【响应式】：父组件修改数据，子孙组件展示的是最新数据
            userInfo: this.userInfo,
        }
    }
}

  2. 子/孙组件 inject 取值使用

    export default {
    inject: ['color','userInfo'],
    created () {
        console.log(this.color, this.userInfo)
    }
}

image.png

实际工作中，provide提供的数据推荐使用复杂类型【响应式】

2.2.4 非父子通信-消息订阅与发布

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

使用步骤：

  1. 安装pubsub：npm i pubsub-js

  2. 引入：import pubsub from 'pubsub-js'

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

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

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

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

示例代码

订阅消息

School.vue

<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'School',
        data() {
            return {
                    name:'尚硅谷',
                    address:'北京',
            }
        },
        mounted() {
            // console.log('School',this)
            /* this.$bus.$on('hello',(data)=>{
                    console.log('我是School组件，收到了数据',data)
            }) */
            this.pubId = pubsub.subscribe('hello',(msgName,data)=>{
                    console.log(this)
                    // console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)
            })
        },
        beforeDestroy() {
            // this.$bus.$off('hello')
            pubsub.unsubscribe(this.pubId)
        },
    }
</script>

<style scoped>
    .school{
        background-color: skyblue;
        padding: 5px;
    }
</style>

发布消息

Student.vue

<template>
    <div class="student">
        <h2>学生姓名：{{name}}</h2>
        <h2>学生性别：{{sex}}</h2>
        <button @click="sendStudentName">把学生名给School组件</button>
    </div>
</template>

<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男',
            }
        },
        mounted() {
            // console.log('Student',this.x)
        },
        methods: {
            sendStudentName(){
                // this.$bus.$emit('hello',this.name)
                pubsub.publish('hello',666)
            }
        },
    }
</script>

<style lang="less" scoped>
    .student{
        background-color: pink;
        padding: 5px;
        margin-top: 30px;
    }
</style>

3. 进阶语法

3.1 v-model 原理

原理：v-model本质上是一个语法糖。例如应用在输入框上，就是 value属性 和 input事件 的合写。

作用：提供数据的双向绑定

  • 数据变，视图跟着变 :value

  • 视图变，数据跟着变 @input

    注意：$event 用于在模板中，获取事件的形参

<template>
    <div id="app" >
        <input v-model="msg" type="text">
        <!-- 等价于  -->
        <input :value="msg" @input="msg = $event.target.value" type="text">
    </div>
</template>

3.1.1 表单类组件封装

表单类基础组件封装思路

  • 父传子：父组件动态传递 prop 数据，拆解 v-model，绑定数据
  • 子传父：监听输入，子传父传值给父组件修改
  • 本质：实现了子组件 和 父组件数据 的双向绑定

image.png

3.1.2 v-model 简化代码

v-model 简化代码的核心步骤

  • 子组件中：props 通过 value 接收，事件触发 input
  • 父组件中：v-model 给组件直接绑数据( :value + @input )
  • 本质：实现了子组件 和 父组件数据 的双向绑定

image.png

3.2 .sync 修饰符

作用：可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

特点：prop属性名，可以自定义，非固定为 value

场景：封装弹框类的基础组件， visible属性 true显示 false隐藏

本质：就是 :属性名 和 @update:属性名 合写

image.png

3.3 ref 和 $refs

作用：利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例(被用来给元素或子组件注册引用信息（id的替代者）)，应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

特点：查找范围 → 当前组件内 (更精确稳定)

const myChart = echarts.init(document.querySelector('.box'))

querySelector 查找范围：整个页面

3.3.1 获取 dom

  1. 目标标签 – 添加 ref 属性

    <div ref="chartRef">我是渲染图表的容器</div>

  2. 恰当时机, 通过 this.$refs.xxx, 获取目标标签

    mounted () { console.log(this.$refs.chartRef) }

3.3.2 获取组件

  1. 目标组件 – 添加 ref 属性 <BaseForm ref="baseForm"></BaseForm>

  2. 恰当时机, 通过 this.$refs.xxx, 获取目标组件， 就可以调用组件对象里面的方法this.$refs.baseForm.组件方法()

具体案例

<template>
    <div>
        <h1 v-text="msg" ref="title"></h1>
        <button ref="btn" @click="showDOM">点我输出上方的DOM元素</button>
        <School ref="sch"/>
    </div>
</template>

<script>
    //引入School组件
    import School from './components/School'

    export default {
        name:'App',
        components:{School},
        data() {
            return {
                msg:'欢迎学习Vue！'
            }
        },
        methods: {
            showDOM(){
                console.log(this.$refs.title) //真实DOM元素
                console.log(this.$refs.btn) //真实DOM元素
                console.log(this.$refs.sch) //School组件的实例对象（vc）
            }
        },
    }
</script>

3.4 Vue异步更新、$nextTick

需求：编辑标题, 编辑框自动聚焦

  1. 点击编辑，显示编辑框

  2. 让编辑框，立刻获取焦点 image.png

    this.isShowEdit = true // 显示输入框
this.$refs.inp.focus() // 获取焦点

问题："显示之后"，立刻获取焦点是不能成功的！

原因：Vue 是 异步更新 DOM (提升性能)

$nextTick：等 DOM 更新后, 才会触发执行此方法里的函数体（在下一次 DOM 更新结束后执行其指定的回调）

语法：this.$nextTick(回调函数)

什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

//上面获取焦点的代码需要放在nextTick回调里面
this.$nextTick(function(）{
    this.$refs.inputTitle.focus()
}
  1. Vue是异步更新 DOM 的
  2. 想要在 DOM 更新完成之后做某件事，可以使用 $nextTick

3.5 自定义指令

image.png

自定义指令：自己定义的指令, 可以封装一些 dom 操作， 扩展额外功能，例如获取焦点

需求1：定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

需求2：定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

语法：

  • 局部注册：

    directives: {
  focus[指令名]: {//指令配置项
    // 指令的定义
    inserted(el) {
      el.focus()
    }
  }
}

  • 全局注册：

    <script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus[指令名]', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
</script>

image.png 配置对象中常用的3个回调：

  • bind：指令与元素成功绑定时调用。
  • inserted：指令所在元素被插入页面时调用。
  • update：指令所在模板结构被重新解析时调用。

理解这三个的调用时机，需要进一步了解 vue 的生命周期，下面会介绍。

自定义指令的使用步骤?

  1. 注册 (全局注册 或 局部注册)

    在 inserted 钩子函数中，配置指令dom逻辑

  2. 标签上 v-指令名 使用

定义全局指令

<!-- 准备好一个容器-->
<div id="root">
    <input type="text" v-fbind:value="n">
</div>

<script type="text/javascript">
    Vue.config.productionTip = false

    //定义全局指令
    Vue.directive('fbind', {
        // 指令与元素成功绑定时（一上来）
        bind(element, binding){
            element.value = binding.value
        },
        // 指令所在元素被插入页面时
        inserted(element, binding){
            element.focus()
        },
        // 指令所在的模板被重新解析时
        update(element, binding){
            element.value = binding.value
        }
    })
    
    new Vue({
        el:'#root',
        data:{
            name: '尚硅谷',
            n: 1
        }
    })

</script>

局部指令：

new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
        // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
        /* 'big-number'(element,binding){
					// console.log('big')
					element.innerText = binding.value * 10
				}, */
        big (element,binding){
            console.log('big',this) //注意此处的this是window
            // console.log('big')
            element.innerText = binding.value * 10
        },
        fbind: {
            //指令与元素成功绑定时（一上来）
            bind (element,binding){
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted (element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update (element,binding){
                element.value = binding.value
            }
        }
    }
})

3.5.1 指令的值

需求：实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

  • 语法：在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

    <div v-color="color">我是内容</div>

  • 通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数。

directives: {
    color: {
        inserted (el, binding) {
            el.style.color = binding.value
        },
        update (el, binding) {
            el.style.color = binding.value
        }
    }
}

小结

  1. 通过指令的值相关语法，可以应对更复杂指令封装场景

  2. 指令值的语法：

    ① v-指令名 = "指令值" ，通过 等号 可以绑定指令的值

    ② 通过 binding.value 可以拿到指令的值

    ③ 通过 update 钩子，可以监听指令值的变化，进行dom更新操作

3.6 slot 插槽

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

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

3.6.1 默认插槽

作用：让组件内部的一些 结构 支持 自定义

需求: 将需要多次显示的对话框, 封装成一个组件

问题：组件的内容部分，不希望写死，希望能使用的时候自定义。怎么办？

image.png

插槽基本语法：

  1. 组件内需要定制的结构部分，改用<slot></slot>占位

  2. 使用组件时，传入具体标签内容替换slot插入

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

场景：当组件内某一部分结构不确定，想要自定义怎么办?

  • 用插槽 slot 占位封装
3.6.1.1 插槽 - 后备内容（默认值）

插槽后备内容：封装组件时，可以为预留的 <slot> 插槽提供后备内容（默认内容）

语法：在 <slot> 标签内，放置内容, 作为默认显示内容 <slot>我是后备内容</slot>

效果:

  • 外部使用组件时，不传东西，则slot会显示后备内容
  • 外部使用组件时，传东西了，则slot整体会被换掉

什么时候插槽后备内容会显示?

  • 当使用组件并未给我们传入具体标签或内容时

如何给插槽设置默认显示内容？

  • 在 slot 标签内，写好后备内容

3.6.2 具名插槽

需求：一个组件内有多处结构，需要外部传入标签，进行定制

默认插槽：一个的定制位置

image.png

具名插槽语法:

  1. 多个slot使用name属性区分名字

    <div class="dialog-header">
    <slot name="head"></slot>
</div>
<div class="dialog-content">
    <slot name="content"></slot>
</div>
<div class="dialog-footer">
    <slot name="footer"></slot>
</div>

  2. template配合v-slot:名字来分发对应标签

    <MyDialog>
    <template v-slot:head>
        大标题
    </template>
    <template v-slot:content>
        内容文本
    </template>
    <template v-slot:footer>
        <button>按钮</button>
    </template>
</MyDialog>

具名插槽简化语法：(将v-slot:简化为#)

  1. 多个slot使用name属性区分名字
  2. template配合v-slot:名字来分发对应标签 
    <MyDialog>
    <template #head>
        大标题
    </template>
    <template #content>
        内容文本
    </template>
    <template #footer>
        <button>按钮</button>
    </template>
</MyDialog>

总结：

  • 组件内 有多处不确定的结构 怎么办?

    具名插槽

    1. slot占位, 给name属性起名字来区分

    2. template配合 v-slot:插槽名 分发内容

  • v-slot:插槽名 可以简化成什么?

    #插槽名

3.6.3 作用域插槽

作用域插槽：定义 slot 插槽的同时，是可以传值的。给 插槽 上可以 绑定数据，将来 使用组件时可以用。

场景：封装表格组件

  1. 父传子，动态渲染表格内容

  2. 利用默认插槽，定制操作列

  3. 删除或查看都需要用到 当前项的 id，属于 组件内部的数据

    通过 作用域插槽 传值绑定，进而使用

基本使用步骤：

  1. 给 slot 标签, 以 添加属性的方式传值

    <slot :id="item.id" msg="测试文本"></slot>

  2. 所有添加的属性, 都会被收集到一个对象中

    { id: 3, msg: '测试文本' }

  3. 组件使用时，在template中, 通过 #插槽名= "obj" 接收，默认插槽名为 default

    <MyTable :list="list">
    //这里的obj的内容就是2中的对象值
    <template #default="obj">
        <button @click="del(obj.id)">删除</button>
    </template>
</MyTabl>

作用域插槽的作用是什么？

  • 可以给插槽上绑定数据，供将来使用组件时使用

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

具体编码：

父组件中：
        <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>

3.6.4 总结

插槽分类

  • 默认插槽：组件内定制一处结构
  • 具名插槽：组件内定制多处结构

注意：作用域插槽是插槽的一个传参语法，并不是一类插槽

3.7 mixin(混入)

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

例子：

// 定义一个混入对象
var myMixin = {
  created: function () {
    this.hello()
  },
  methods: {
    hello: function () {
      console.log('hello from mixin!')
    }
  }
}

// 定义一个使用混入对象的组件
var Component = Vue.extend({
  mixins: [myMixin]
})

选项合并

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

var mixin = {
  created: function () {
    console.log('混入对象的钩子被调用')
  }
}

new Vue({
  mixins: [mixin],
  created: function () {
    console.log('组件钩子被调用')
  }
})

// => "混入对象的钩子被调用"
// => "组件钩子被调用"

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

全局混入不建议使用

3.8 插件

插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制。

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

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

定义插件：

对象.install = function (Vue, options) {
    // 1. 添加全局过滤器
    Vue.filter(....)

    // 2. 添加全局指令
    Vue.directive(....)

    // 3. 配置全局混入(合)
    Vue.mixin(....)

    // 4. 添加实例方法
    Vue.prototype.$myMethod = function () {...}
    Vue.prototype.$myProperty = xxxx
}

具体案例：

plugin.js

export default {
    install(Vue, x, y, z) {
        console.log(x, y, z)
        //全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })

        //定义全局指令
        Vue.directive('fbind', {
            //指令与元素成功绑定时（一上来）
            bind(element, binding) {
                element.value = binding.value
            },
            //指令所在元素被插入页面时
            inserted(element, binding) {
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element, binding) {
                element.value = binding.value
            }
        })

        //定义混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            },
        })

        //给Vue原型上添加一个方法（vm和vc就都能用了）
        Vue.prototype.hello = () => { alert('你好啊aaaa') }
    }
}

main.js

// 引入插件
import plugin from './plugin'

// 使用插件
Vue.use(plugin)

然后就可以在别的组件使用插件里的功能了。

3.9 Vue封装的过度与动画

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

图示： 在这里插入图片描述

写法：

  1. 准备好样式：

    • 元素进入的样式：
      1. v-enter：进入的起点
      2. v-enter-active：进入过程中
      3. v-enter-to：进入的终点
    • 元素离开的样式：
      1. v-leave：离开的起点
      2. v-leave-active：离开过程中
      3. v-leave-to：离开的终点

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

    <transition name="hello">
        <h1 v-show="isShow">你好啊！</h1>
</transition>

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

具体案例（单个元素过渡）

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.v-enter-active{
		animation: move 0.5s linear;
	}

	.v-leave-active{
		animation: move 0.5s linear reverse;
	}

	@keyframes move {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

name 的作用可以让让不同的元素有不同的动画效果


<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition name="hello" appear>
			<h1 v-show="isShow">你好啊！</h1>
		</transition>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}

	.hello-enter-active{
		animation: move 0.5s linear;
	}

	.hello-leave-active{
		animation: move 0.5s linear reverse;
	}

	@keyframes move {
		from{
			transform: translateX(-100%);
		}
		to{
			transform: translateX(0px);
		}
	}
</style>

具体案例（多个元素过渡）

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group name="hello" appear>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
	/* 进入的起点、离开的终点 */
	.hello-enter,.hello-leave-to{
		transform: translateX(-100%);
	}
	.hello-enter-active,.hello-leave-active{
		transition: 0.5s linear;
	}
	/* 进入的终点、离开的起点 */
	.hello-enter-to,.hello-leave{
		transform: translateX(0);
	}
</style>

使用第三库的具体案例（随便看看，这个不重要） 库的名称：Animate.css 安装：npm i animate.css 引入：import 'animate.css'

<template>
	<div>
		<button @click="isShow = !isShow">显示/隐藏</button>
		<transition-group 
			appear
			name="animate__animated animate__bounce" 
			enter-active-class="animate__swing"
			leave-active-class="animate__backOutUp"
		>
			<h1 v-show="!isShow" key="1">你好啊！</h1>
			<h1 v-show="isShow" key="2">尚硅谷！</h1>
		</transition-group>
	</div>
</template>

<script>
	import 'animate.css'
	export default {
		name:'Test',
		data() {
			return {
				isShow:true
			}
		},
	}
</script>

<style scoped>
	h1{
		background-color: orange;
	}
</style>

4. 浏览器本地存储

4.1 Cookie

Cookie是最早被提出来的本地存储方式，在此之前，服务端是无法判断网络中的两个请求是否是同一用户发起的，为解决这个问题，Cookie就出现了。Cookie 是存储在用户浏览器中的一段不超过 4 KB 的字符串。它由一个名称（Name）、一个值（Value）和其它几个用 于控制 Cookie 有效期、安全性、使用范围的可选属性组成。不同域名下的 Cookie 各自独立，每当客户端发起请求时，会自动把当前域名下所有未过期的 Cookie 一同发送到服务器。

Cookie的特性：

  • Cookie一旦创建成功，名称就无法修改
  • Cookie是无法跨域名的，也就是说a域名和b域名下的cookie是无法共享的，这也是由Cookie的隐私安全性决定的，这样就能够阻止非法获取其他网站的Cookie
  • 每个域名下Cookie的数量不能超过20个，每个Cookie的大小不能超过4kb
  • 有安全问题，如果Cookie被拦截了，那就可获得session的所有信息，即使加密也于事无补，无需知道cookie的意义，只要转发cookie就能达到目的
  • Cookie在请求一个新的页面的时候都会被发送过去

Cookie 在身份认证中的作用

客户端第一次请求服务器的时候，服务器通过响应头的形式，向客户端发送一个身份认证的 Cookie，客户端会自动 将 Cookie 保存在浏览器中。

随后，当客户端浏览器每次请求服务器的时候，浏览器会自动将身份认证相关的 Cookie，通过请求头的形式发送给 服务器，服务器即可验明客户端的身份。

在这里插入图片描述

Cookie 不具有安全性

由于 Cookie 是存储在浏览器中的，而且浏览器也提供了读写 Cookie 的 API，因此 Cookie 很容易被伪造，不具有安全 性。因此不建议服务器将重要的隐私数据，通过 Cookie 的形式发送给浏览器。

注意：千万不要使用 Cookie 存储重要且隐私的数据！比如用户的身份信息、密码等。

4.2 Session

Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。客户端浏览器再次访问时只需要从该Session中查找该客户的状态就可以了session是一种特殊的cookie。cookie是保存在客户端的，而session是保存在服务端。

为什么要用session 由于cookie 是存在用户端，而且它本身存储的尺寸大小也有限，最关键是用户可以是可见的，并可以随意的修改，很不安全。那如何又要安全，又可以方便的全局读取信息呢？于是，这个时候，一种新的存储会话机制：session 诞生了

session原理 当客户端第一次请求服务器的时候，服务器生成一份session保存在服务端，将该数据(session)的id以cookie的形式传递给客户端；以后的每次请求，浏览器都会自动的携带cookie来访问服务器(session数据id)。

图示：

在这里插入图片描述

session我觉得可以简单理解为一个表，根据cookie传来的值查询表中的内容

session 标准工作流程

在这里插入图片描述

我在 node.js 中详细演示了一遍 session 的使用，具体看了另一篇博客：blog.csdn.net/hangao233/a…

4.3 LocalStorage

LocalStorage是HTML5新引入的特性，由于有的时候我们存储的信息较大，Cookie就不能满足我们的需求，这时候LocalStorage就派上用场了。

LocalStorage的优点：

  • 在大小方面，LocalStorage的大小一般为5MB，可以储存更多的信息
  • LocalStorage是持久储存，并不会随着页面的关闭而消失，除非主动清理，不然会永久存在
  • 仅储存在本地，不像Cookie那样每次HTTP请求都会被携带

LocalStorage的缺点：

  • 存在浏览器兼容问题，IE8以下版本的浏览器不支持
  • 如果浏览器设置为隐私模式，那我们将无法读取到LocalStorage
  • LocalStorage受到同源策略的限制，即端口、协议、主机地址有任何一个不相同，都不会访问

LocalStorage的常用API：

// 保存数据到 localStorage
localStorage.setItem('key', 'value');

// 从 localStorage 获取数据
let data = localStorage.getItem('key');

// 从 localStorage 删除保存的数据
localStorage.removeItem('key');

// 从 localStorage 删除所有保存的数据
localStorage.clear();

// 获取某个索引的Key
localStorage.key(index)

LocalStorage的使用场景:

  • 有些网站有换肤的功能，这时候就可以将换肤的信息存储在本地的LocalStorage中，当需要换肤的时候，直接操作LocalStorage即可
  • 在网站中的用户浏览信息也会存储在LocalStorage中，还有网站的一些不常变动的个人信息等也可以存储在本地的LocalStorage中

4.4 SessionStorage

SessionStorage和LocalStorage都是在HTML5才提出来的存储方案，SessionStorage 主要用于临时保存同一窗口(或标签页)的数据，刷新页面时不会删除，关闭窗口或标签页之后将会删除这些数据。

SessionStorage与LocalStorage对比：

  • SessionStorage和LocalStorage都在本地进行数据存储；
  • SessionStorage也有同源策略的限制，但是SessionStorage有一条更加严格的限制，SessionStorage只有在同一浏览器的同一窗口下才能够共享；
  • LocalStorage和SessionStorage都不能被爬虫爬取；

SessionStorage的常用API：

// 保存数据到 sessionStorage
sessionStorage.setItem('key', 'value');

// 从 sessionStorage 获取数据
let data = sessionStorage.getItem('key');

// 从 sessionStorage 删除保存的数据
sessionStorage.removeItem('key');

// 从 sessionStorage 删除所有保存的数据
sessionStorage.clear();

// 获取某个索引的Key
sessionStorage.key(index)

SessionStorage的使用场景

由于SessionStorage具有时效性，所以可以用来存储一些网站的游客登录的信息，还有临时的浏览记录的信息。当关闭网站之后，这些信息也就随之消除了。

具体案例：

localStorage

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>localStorage</title>
	</head>
	<body>
		<h2>localStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				localStorage.setItem('msg','hello!!!')
				localStorage.setItem('msg2',666)
                // 转成 JSON 对象存进去
				localStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(localStorage.getItem('msg'))
				console.log(localStorage.getItem('msg2'))

				const result = localStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(localStorage.getItem('msg3'))
			}
			function deleteData(){
				localStorage.removeItem('msg2')
			}
			function deleteAllData(){
				localStorage.clear()
			}
		</script>
	</body>
</html>

sessionStorage

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>sessionStorage</title>
	</head>
	<body>
		<h2>sessionStorage</h2>
		<button onclick="saveData()">点我保存一个数据</button>
		<button onclick="readData()">点我读取一个数据</button>
		<button onclick="deleteData()">点我删除一个数据</button>
		<button onclick="deleteAllData()">点我清空一个数据</button>

		<script type="text/javascript" >
			let p = {name:'张三',age:18}

			function saveData(){
				sessionStorage.setItem('msg','hello!!!')
				sessionStorage.setItem('msg2',666)
                // 转换成JSON 字符串存进去
				sessionStorage.setItem('person',JSON.stringify(p))
			}
			function readData(){
				console.log(sessionStorage.getItem('msg'))
				console.log(sessionStorage.getItem('msg2'))

				const result = sessionStorage.getItem('person')
				console.log(JSON.parse(result))

				// console.log(sessionStorage.getItem('msg3'))
			}
			function deleteData(){
				sessionStorage.removeItem('msg2')
			}
			function deleteAllData(){
				sessionStorage.clear()
			}
		</script>
	</body>
</html>

5. vue脚手架配置代理

可以用来解决跨域的问题 在这里插入图片描述

ajax 是前端技术，你得有浏览器，才有window对象，才有xhr，才能发ajax请求，服务器之间通信就用传统的http请求就行了。

5.1 方法一

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

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

说明：

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

5.2 方法二

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

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

说明：

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