Vue2知识点汇总—尚硅谷

//Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
			mounted(){
				console.log('mounted',this)
				this.timer = setInterval(() => {
					console.log('setInterval')
					this.opacity -= 0.01
					if(this.opacity <= 0) this.opacity = 1
				},16)
			},
			beforeDestroy() {
				clearInterval(this.timer)
				console.log('vm即将驾鹤西游了')
			},

非但文件组件

Vue中使用组件的三大步骤：

一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

options和new Vue(options)区别如下：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、如何注册组件？

1.局部注册：

靠new Vue的时候传入components选项

2.全局注册：

靠Vue.component('组件名',组件)

三、编写组件标签：

几个注意点：

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

第一种写法：<school></school>

第二种写法：<school/>

备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

关于VueComponent：

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，

即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

4.关于this指向：

(1).组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中：

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

Vue的实例对象，以后简称vm。

1.一个重要的内置关系：

VueComponent.prototype.proto === Vue.prototype

2.为什么要有这个关系：

让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。

单文件组件

初始化脚手架

具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

备注：

1. 如出现下载缓慢请配置 npm 淘宝镜像：npm config set registry

https://registry.npm.taobao.org2. Vue 脚手架隐藏了所有 webpack 相关的配置，

若想查看具体的 webpakc 配置，请执行：vue inspect > output.js

模板项目的结构

关于不同版本的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函数去指定具体内容。

render函数完成了这个功能：将App组件放入容器中

vue.config.js配置文件

1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。

2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh

ref属性

1. 作用：用于给节点打标识

2. 读取方式：this.$refs.xxxxxx

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

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

3. 使用方式：

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

2. 获取：this.$refs.xxx

props

1. 作用：用于父组件给子组件传递数据

（让组件接收外部传过来的数据）

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

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

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

3. 接收数据：

1. 读取方式一: 只指定名称（只接收）：props:['name']

props: ['name', 'age', 'setName']

2. 读取方式二: 指定名称和类型（限制类型）：props:{name:String}

props: {
name: String,
age: Number,
setNmae: Function
}

3. 读取方式三: 指定名称/类型/必要性/默认值（限制类型、限制必要性、指定默认值）：

props: {
name: {type: String, required: true, default:xxx},
}

不建议修改props

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

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

props:['todo']
<!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props -->
 <input type="checkbox" v-model="todo.done"/>

mixin(混入)

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

2. 使用方式：

第一步定义混合：

    {

        data(){....},

        methods:{....}

        ....

    }

第二步使用混入：

全局混入：Vue.mixin(xxx)

局部混入：mixins:['xxx']

插件

1. 功能：用于增强Vue

2. 本质：

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

3. 定义插件：

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

directive

scoped样式

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

2. 写法：<style scoped>

webStorage浏览器存储

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

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

3. 相关API：

1. xxxxxStorage.setItem('key', 'value');

该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2. xxxxxStorage.getItem('person');

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

3.xxxxxStorage.removeItem('key');

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

4. xxxxxStorage.clear()

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

4. 备注：

1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。

2. LocalStorage存储的内容，需要手动清除才会消失。

3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。

4. JSON.parse(null)的结果依然是null。

本地存储

localStorage.setItem('msg','hello!!!')

const result = localStorage.getItem('msg')

JSON.parse(result)

会话存储

sessionStorage.setItem('msg','hello!!!')

const result = sessionStorage.getItem('msg')

JSON.parse(result)

组件编码流程（通用）

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

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

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

2). 一些组件在用：放在他们共同的父组件上（<span style="color:red">状态提升</span>）。

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

组件自定义事件

通过父组件给子组件传递函数类型的props实现：子给父传递数据

通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on）

通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref）

1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>

2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。

3. 绑定自定义事件：

1. 第一种方式，在父组件中：

<Demo @atguigu="test"/>

或

 <Demo v-on:atguigu="test"/>

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

        <Demo ref="demo"/>

        ......

        mounted(){

           this.$refs.xxx.$on('atguigu',this.test)

        }

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

4. 触发自定义事件：

this.$emit('atguigu',数据)

5. 解绑自定义事件

this.$off('atguigu')

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

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

子给父传数据两种方式：

1、父组件给子组件传递函数类型的props

2、父组件给子组件绑定一个自定义事件(ⅴ-on @ 或者 ref写法

绑定事件

this.$globalEventBus.$on('deleteTodo', this.deleteTodo)

分发事件

this.$globalEventBus.$emit('deleteTodo', this.index)

解绑事件

this.$globalEventBus.$off('deleteTodo')

全局事件总线

理解

1. Vue 原型对象上包含事件处理的方法

1) $on(eventName, listener): 绑定自定义事件监听

2) $emit(eventName, data): 分发自定义事件

3) $off(eventName): 解绑自定义事件监听

4) $once(eventName, listener): 绑定事件监听, 但只能处理一次

2. 所有组件实例对象的原型对象的原型对象就是 Vue 的原型对象1) 所有组件对象都能看到 Vue 原型对象上的属性和方法

2) Vue.prototype.$bus = new Vue(), 所有的组件对象都能看到$bus 这个属性

对象

全局事件总线

1) 包含事件处理相关方法的对象(只有一个)

2) 所有的组件都可以得到

1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

2. 安装全局事件总线：

   new Vue({

      ......

      beforeCreate() {

         Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm

      },

       ......

   })

3. 使用事件总线：

1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span>

      methods(){

        demo(data){......}

      }

      ......

      mounted() {

        this.$bus.$on('xxxx',this.demo)

      }

2. 提供数据：

this.$bus.$emit('xxxx',数据)

4. 最好在beforeDestroy钩子中，用$off去解绑<span style="color:red">当前组件所用到的</span>事件。

指定事件总线对象

new Vue({
beforeCreate () { // 尽量早的执行挂载全局事件总线对象的操作
Vue.prototype.$globalEventBus = this
},
}).$mount('#root')

消息订阅与发布

消息订阅与发布（pubsub）

1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。

2. 使用步骤：

1. 安装pubsub：

npm i pubsub-js

2. 引入:

 import pubsub from 'pubsub-js'

3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的<span style="color:red">回调留在A组件自身。</span>

      methods(){

        demo(data){......}

      }



      mounted() {

        this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息

      }

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

5. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去<span style="color:red">取消订阅。</span>

3. 相关语法

(1) import PubSub from 'pubsub-js' // 引入

(2) PubSub.subscribe(‘msgName’, functon(msgName, data){ })

(3) PubSub.publish(‘msgName’, data): 发布消息, 触发订阅的回调函数调用

(4) PubSub.unsubscribe(token): 取消消息的订阅

nanoid（额外补充）

nextTick

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

2. 作用：在下一次 DOM 更新结束后执行其指定的回调。

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

hasOwnProperty

是否包含该属性

Vue封装的过度与动画

3. 写法：

3. 过渡的相关类名：

1. xxx-enter-active: 指定显示的 transition

2. xxx-leave-active: 指定隐藏的 transition

3. xxx-enter/xxx-leave-to: 指定隐藏时的样式

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>

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

1. 操作 css 的 trasition 或 animation

2. vue 会给目标元素添加/移除特定的 class

基本过渡动画的编码

1. 在目标元素外包裹<transition name="xxx">

2. 定义 class 样式

a) 指定过渡样式: transition

b) 指定隐藏时的样式: opacity/其它

解决开发环境 Ajax 跨域问题

使用代理服务器

vue脚手架配置代理方法一

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

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

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。

2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。

3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）

方法二

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
*/