v-on v-text v-html v-clock v-once v-pre
v-bind 动态参数 v-bind[attrName] 参数名称
v-on 修饰符 .指明的特殊后缀
event.preventDefault()
.stop .prevent .capture .self .once .passive .exact .left .right .middle
keyup
Vue.config.keyCodes.f1 = 112
computed 计算属性 // 当依赖的属性发生变化就会触发
computed:{
computedValue1(){
return this.[dataName]
},
computedValue2(){
get(){
默认只有get,可以配置set
},
set(){
}
}
}
watch 侦听器 区别 计算属性会缓存，相关的依赖变化才会触发，当需要一些异步操作或者开销比较大事件的时候使用watch
watch:{
watchValue(newValue,oldVlaue){ // 参一旧值，参二新值
}
}
动态绑定class和style
可以是对象和数组 <div :class="{active: isActive}" :class="[activeClass]" // activeClass是定义在data里的值
v-if v-else-if v-else 当有代码块时，可以用<template></template>包裹起来
v-show // 只是display: none 和block隐藏，v-if是卸载重新渲染
v-for // 循环
数组 (item,index) in Array 对象 (value,key,index) in Object
会触发视图更新的方法（vue2，vue3任何方法都可以）push pop shift unshift splice sort reverse
不建议v-for和v-if一同使用
可以循环遍历<template v-for="item in []"><div v-if="condition">
v-model 修饰符 .lazy .number .trim
使用子组件
子组件默认继承Attribute 禁止默认继承inheritAttrs:false关闭默认继承，可以通过$attr访问
子组件使用v-model 用model属性默认是value和input事件，可以配置
model:{
prop:"checked",
event:"change"
}
想在子组件的“根元素”上绑定原生事件.native
v-on:focus.native 会绑定到组件的根元素的
有时候不想绑定到根元素上$listeners
子组件里
.sync 修饰符
this.$emit('update:title', newTitle)
v-bind:title="doc.title"
v-on:update:title="doc.title = $event"
>
v-bind:title.sync=""
<com v-bind.sync="{}" /> 绑定对象，会把对象里的每个property作为独立prop传进去，相当于解构
然后使用时各自绑定方法 v-on:updata:title="obj.title=$event"
插槽 slot
<slot>submit</slot>中间是没传的默认内容,可以通过$slot访问 $slot.default
具名插槽 <slot name="title">
旧的 <template slot="title">
<template v-slot:title> v-slot只能使用在template
插槽的缩写是# <template #title>
作用域插槽 在父组件中渲染子组件的数据
旧的 <template slot-scope="slotProps">
<slot v-bind:user="user"/> 子组件里绑定 <template v-slot:default="slotProps">{{slotProps.user}}
也可以直接写在子组件上 <com v-slot:default="slotProps">{{slotProps.user}}
动态插槽名 v-slot:[slotName]
动态组件 <component v-bind:is="" is里面的name是组件注册的名字 属性方法绑定等直接绑定到<component上可以监听触发，可以用computed区分绑定
keeplive缓存组件实例 可以用include 和 exclude来定义包含或者排除的组件 :max定义最大缓存数量
异步组件
可以通过$root访问根组件 访问父组件$parent ,访问子组件$children不推荐，建议使用依赖注入
访问子组件使用ref，this.$refs
依赖注入
在父组件 provide (){
return {
title:this.title
}
}
在子组件inject:["title"]
对象是响应式，基础数据不是响应式的，可以把参数用一个方法返回
provide(){
return {
title:()=>this.title
}
}
Vue的$on $off $once 也可以new 一个新的Vue实例来实现组件间的通信，但同样不建议($emit触发)
inline-template 内联模板
<com inline-template >
<div>{{mag}}</div> msg是子组件的数据,相当于替换组件里面的<template>
</com>
X-Template定义模板 加上text/x-template 通过id来渲染模板
<script type="text/x-template" id="templateId">
<div>{{msg}}</div>
Vue.component("comName",{
template:"#templateId"})
强制更新 $forceUpdate
过渡&动画 transition
<transition name="fade"> fade-enter-active fade-enter fade-enter-to fade-leave fade-leave-active fade-leave-to
自定义过渡的类名 enter-class enter-acitve-class enter-to-class leave-class leave-acitve-class leave-to-class
过渡时间 :duration = "1000" :duration="{enter:1000,leave:1000}"
动画钩子函数 使用javascript钩子可以绑定 :css="false" 防止收到css的影响
初始渲染的过渡 appear 需要设置appear属性 <transiton appear
可以通过自定义类名和javascript钩子
appear-class appear-active-class appear-to-class
相同标签切换给个key
过渡模式 mode out-in 当前元素先过渡，完成后新元素进入 in-out 新元素进来过渡完成后，当前元素过渡离开
列表过渡 transiton-group 会以真实的元素展示 默认是span，可以用tag属性替换
一样配置name属性，v-enter v-enter-acitve v-enter-to v-leave v-leave-acitve v-leave-to before-enter enter after-enter before-leave leave after-leave
多了个v-move
混入mixin
钩子函数冲突时，会形成数组进行，mixin的先执行，components,methods,directives冲突时，取组件内的键值对
全局混入 Vue.mixin会在每个创建的组件混入
自定义指令 directive
注册全局指令
vue.directive("focus",{
inserted:function(el){
}
})
局部注册
directives:{
focus:{
inserted:function(el){}
}
}
钩子函数
钩子函数参数
函数简写 如果只需要在bind和update做出操作
Vue.directive("mydirective",function(el,binding){
})
添加vue的实例方法 Vue.prototype.
开发Vue插件,Vue.use ,use的时候会自动调用install方法 ,可以在里面做一些全局的注册
过滤器 filters 使用管道符号 |
定义全局过滤器 Vue.filter("name",function(value){
})
组件内注册
filters:{
name（value）{
}
}
管道串联 {{message | filter1 | filter2 }} 数据过滤完作为参数进入第二个管道
多个参数 {{message | filter(arg2)}} 默认参数不同写在括号里，当前示例两个参数
对象和数组的相关方法不是响应式的，可以通过vue.set 或者 this.$set改变数值
异步更新队列，Vue更新DOM是异步执行的，在某些场景下，需要获取完数据页面渲染完才去渲染组件，像echart图表啥的，可以用Vue.nextTick()或者this.$nextTick，回调函数会在页面渲染完后执行
去掉Vue的日志和警告 Vue.config.silent = true
应用报错 Vue.config.errorHandler
去掉生产提示Vue.config.productionTip = false
使用代码创建组件 const Com= Vue.extend({
template:`<div></div>`,
data(){
return {}
}
})
Com.$mount("#app")
删除对象，数组，触发更新 Vue.delete( target, propertyName/index )
把对象变成响应式 let state= Vue.observable({key:value}) 使用返回的值
组件内的错误捕获errorCaptured
继承组件
extends: ComA 继承a组件,和mixin类似
vm.$data 实例的data数据
vm.$props 实例接收的数据
vm.$el 实例的根元素
vm.$option 实例的参数选项
vm.$scopedSlots 作用域插槽
const unwatch= vm.$watch("监听对象",function(){
}) 监听 ,返回的函数调用取消监听 unwatch()
