Vue知识点

一、初识Vue

（1）作用：Vue是用来构建用户界面的，

（2）好处：vue往html页面中渲染数据十分方便，使用MVVM架构，实现数据驱动视图与数据双向绑定。

（3）基本指令

内容渲染指令：v-text、{ {}}、v-html（可以将标签渲染出来）

属性绑定指令：v-bind（简化写法“：”）

事件绑定指令：v-on（简化写法“@”）

双向绑定指令：v-model

条件渲染指令：v-if、v-show（两者区别在于：加载性能、切换开销、底层原理）

列表渲染指令：v-for

二、组件

（1）vue项目创建流程：

A、vue init webpack 项目名称 --->针对于2.0，脚手架+webpack

B、webStrom创建vue项目：

a、简洁方式创建：基本的vue项目结构

b、带有语法检查、测试模块的项目：自带有ESLint模块、vue.config.js文件（vue项目的配置文件 --- 如配置vue2项目的默认端口号）

（2）组件之间的通信

A、父子组件

a、父-->子：props

b、子-->父：$emit

B、兄弟组件

a、创建中央数据总线mitt

b、vuex

C、跨级组件

a、vuex

b、provide、inject

（3）生命周期函数

a、beforeCreate：在组建创建之前会运行，此时vue实例的el、data、data中的变量均为undefined

b、created：表示组件已经创建完成，data、props已经初始化，el还是undefined（组件还没有挂载到DOM上）

c、beforeMount：el被初始化（被绑定），但未挂载

d、mounted：表示组件已经挂载。el绑定同时组件挂载

e、beforeUpdate：当组件的内容被改变，隐藏的组件被显示（显示的组件被隐藏等）触发

f、updated：更新完成后

g、beforeDestory：在组建销毁之前。组件还是正常使用

h、destory：组建销毁之后

（4）插槽：

a、含义：占位符

b、匿名插槽、具名插槽、作用域插槽、

（1）vue2.6以前的版本：<slot></slot>

a、匿名插槽（默认插槽）：一个组件中只能有一个插槽

父组件中使用该组件时，该组件标签内写什么标签，匿名插槽内就显示什么标签。

默认情况下，在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中。

b、具名插槽：给插槽命名

vue官方规定：每一个slot插槽，都要有一个name名称，

如果省略了slot的name属性，则有一个默认名称：default。

指定具名插槽的时候用：slot name=插槽名

使用时用：v-slot = 插槽名

v-solt必须放在template标签里，

template只是一个虚拟标签，只起包裹性质的作用，不会被渲染到浏览器中。

v-slot：指令的简写：#

后备内容：

当用户没有指定插槽中的内容时，给以给个默认内容

当用户写上指定内容时，会覆盖插槽的默认内容。

c、作用域插槽

水平显示方式：

子组件：

父组件：