前端复习笔记——vue篇

vue基本使用：

1、引入vue.js 2、创建vue实例 3、指定el配置项，指定控制dom区域 4、创建vue控制的dom区域

vue六种指令：

1、内容渲染 {{}} v-html  数据/js表达式 动态渲染到DOM

2、属性绑定 v-bind  :   元素属性动态绑定属性值

3、事件绑定 v-on:  @  dom元素绑定事件  methods中声明事件处理函数 （）传参 

事件修饰符：.prevent .stop

4、条件渲染 v-if 动态添加元素  v-else v-eles-if

v-show  style=“disply:none”

5、列表渲染 v-for key: 字符串/数字  循环渲染列表结构 二参为索引

6、双向绑定 v-model .trim .number .lazy

MVVM:

M ->date V->dom区域 VM->vue实例

过滤器：一般使用计算属性方法代替

定义  vue.filter('过滤器名称',fn) fn:(要转换格式的数据)=>{return 转换格式的结果}

使用  {{转换格式的数据|过滤器的名子}}  v-bind

侦听器：针对数据变化做特定的操作 一进页面就调用一次immediate 对象中属性值发生变化deep 监听单个对象属性变化 ‘user.age’（）{}

计算属性：声明是方法 使用是数据

 vue-cli :基于webpack创建工程化vue项目 index.html  main.js  App.vue

vue组件：重用部分封装 .vue

1、template  容器标签  包含唯一根节点

2、script  js逻辑 数据方法定义到 export default {} data必须是函数

3、style lang="less"属性

vue 组件 的使用：

1、组件私有注册 import导入   配置项：components：{ Count }    标签形式使用

2、组件的全局注册 mian.js中引入组件  注册vue.component（'Count',Count）

3、prop 组件自定义属性  props:{}    只读  修改prop转存到data中 count:this.n

type default required  

default,required互斥,require优先

组件间样式冲突：style中添加scoped

原理：vue给dom元素添加自定义属性 v-data-xxx 

样式穿透：父组件修改子组件样式/修改第三方组件库中组件原有样式 css   >>>     less   /deep/

组件生命周期：生命周期：过程   生命周期钩子函数：时间点

默认事件+生命周期函数

beforeCreate:

初始化数据、数据响应式

created：数据+方法

beforeMount:

渲染dom

mounted:可以拿到dom(

beforeUpdate:数据变化，dom未渲染

重新渲染变化dom

updated:dom渲染完成

)

beforeDestroy：还未完全销毁

移除数据监听、事件监听、子组件

destroyed：结束

组件间的通信：

1、父传子：自定义属性 给你 自定义属性上面是动态属性值(data中数据)

2、子传父：自定义事件 子组件不能直接改父组件的数据,否则会报错

：解决方法 子组件中发起自定义事件 ,在父组件监听这个事件,并且定义一个函数来改变数据

子 把自定义事件名，自定义参数抛出

父 行内监听子组件 形参就是子抛出参数

3、兄弟：EventBus   

创建eventBus.js模块 向外共享Vue实例

数据接收方：bus.$on('事件名称',事件处理函数)   注册自定义事件   

数据发送方：bus.$emit('事件名称',要发送的数据)   触发自定义事件 

ref引用：获取dom元素 和组件实例的引用（可以拿到组件数据和方法）

this.$refs.引用名称

this.$nextTick(回调函数) 会在dom更新完毕之后执行，获取最新dom

动态组件：基于动态切换组件的显示和隐藏

is属性，指定要渲染的组件名称

保持状态，会缓存被他包含的所有组件       

include属性：告诉keep-alive那个组件要缓存

组件被缓存 deactivated     组件被激活 activated

插槽：没有插槽组件 中 的内容会被丢弃

默认插槽

#具名插槽    旧标签商直接填solt = "title"    新