vue基础总结
vue基础知识总结
指令
- v-model 数据双向绑定
- v-for 循环渲染
- v-if 渲染与销毁
- v-show 显示与隐藏
- v-bind 绑定属性
- v-on 绑定事件
- v-once 让渲染的值执行一次
- v-html 渲染dom片段
- v-text 渲染文本
- v-slot 插槽
属性
- props:原生的标签上分为自有属性和自定义属性。自定义组件上的属性使用props接收，属于父传子的数据传递方式。
v-bind绑定，props接收
事件
概念： 用户操作程序交互页面等一系列行为叫事件
鼠标事件
click，dbclick，
键盘事件
keyDown ，keyUp
事件绑定
v-on绑定事件类型，给一个执行函数。
自定义事件绑定
v-on：focus='focus'
让程序控制自己的函数在特定情况下被使用
修饰符
指令修饰符
- trim 去掉内容两端的空格
- number 尝试转换输入内容为数字
- lazy 让元素失去焦点后更新数据
属性修饰符
- sync 让自定义属性值可以被子组件直接修改
事件修饰符
- stop 禁止事件冒泡
- prevent 禁止默认事件
- native 绑定原生事件
组件通信 `*`
父传子
- 父组件用v-bind传递数据 子组件用props接受
- $children获取页面上所有子组件
- $root 获取根组件
- 父组件使用sync修饰符绑定的属性，子组件用特定语法`$emit('update:prop')`
子传父
- 父组件用v-on传递函数，子组件用$emit调用函数进行通信
- $parent获取最近的父组件
父子互相通信
- sync 伪双向绑定
- v-model 父组件向子组件注入一个value数据和一个input方法
内置组件
- component 动态加载组件
- keep-alive 缓存组件状态
- slot 插槽
- template 模板
插槽
- 匿名插槽
使用slot 标签接受即可
- 具名插槽
使用template包裹内容，使用v-slot属性设置名称
在slot组件上使用name属性匹配名称
- 插槽传参
```js
// 插槽传参
<slot name='header' :data="data"></slot>
子组件
<template v-slot:header="data"></template>
```
生命周期
组件的生命周期
- beforeCreate 创建前
- created 创建成功
- beforeMount 挂载前
- mounted 挂载成功（自动发起ajax）
- beforeUpdate 更新前
- updated 更新完成
- beforeDestroy 销毁前 （销毁常驻值）
- destroyed 销毁成功
缓存组件状态的生命周期
keep-alive 的生命周期
- activated 激活
- deactivated 停用缓存
计算属性和监听
compute
- 对一个值进行监听并返回一个新值。有缓存回对比新旧值，如果一致则不会执行
watch
只对值进行监听，默认只在数据发生变化时执行
如果监听的是对象或数组需要开启深度监听
deep:true 深度监听
immediate:true 自动执行一次
自定义-过滤器-指令
filter过滤器
分为全局组件过滤器和局部组件过滤器
对一个数据进行处理返会新数据。
语法： 值 管道符 过滤器
多个过滤器用管道符隔开
`vlaue | filter`
directive指令
在某些情况下需要获取dom元素比如在元素渲染到页面上后获取元素
例如 页面打开后input自动获取焦点
核心api： inserted函数表示元素渲染完成后的生命周期，使用被注入的el对象进行操作。
插件
用于更大化的重复使用代码，将功能性的代码封装成插件
vue的插件核心是一个对象使用install方法，该方法被注入一个全局Vue，使用它去挂在添加公共的方法或组件
总结
- 上一篇： 如何制作简单的DIY家居墙面装饰？
- 下一篇： vue知识总结