查看原文
Vue
基本使用
v-html
原始html内容，有xss防线
computed
有缓存，data不变不会重新计算
watch
监听引用类型，使用下面方法深度监听，但是拿不到oldVal
1
2
3
4
5
6
7
8
watch:{
info: {
handler (oldVal, val) {
console.log((oldVal, val)
},
deep: true
}
}
class 写法
1
2
3
4
5
6
7
8
data () {
isblack: true,
isRed: false,
black: "black",
red: "red"
}
:class={black: isblack, red: isRed}
或者
1
:class=[black, red]
style
object 类型，驼峰写法
v-if 和 v-show 区别
v-if 是否渲染，更新不频繁使用
v-show 是通过 css 的 display 控制显示与隐藏，频繁切换使用
v-for
也可以遍历对象
key，不能乱写，尽量不用index，不用random
v-for 优先级比v-if高
事件
event参数，自定义参数
没有参数，直接可以获取
有参数，用$event
event是原生对象
事件修饰符，按键修饰符
1
2
@click.stop.prevent
@click.ctrl.exact
！（观察）事件被绑定到哪里
event.target的值表明事件是挂在当前元素上的
表单
v-model
v-model.trim
v-model.lazy
v-model.number
组件使用
props
简写
1
props:[‘list’]
复杂写法，常用，可以定义类型和默认值
1
2
3
4
5
6
props: {
type: Array,
default:{
return []
}
}
$emit
父组件
1
<Input @add=“clickhandler”/>
子组件
1
2
3
4
5
methods:{
addTitle() {
this.$emit(‘add’, title)
}
}
组件通信 - 自定义事件（兄弟组件通信）
vue 具有自定义事件能力 o n 、 on、 on、off、$emit
组件卸载时，解除事件绑定，销毁子组件，定时器等
组件生命周期
挂载阶段
更新阶段
销毁阶段
单个组件
created：vue实例化完成
mounted：渲染完成
父子组件
组件实例创建： 先父后子
组件渲染： 先子后父【子组件渲染完，才能挂载】
高级特性
自定义 v-model
父组件中
1
子组件中 CunstomVModal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<input type=“text” :value=“txt” @input=“$emit(‘chage’, $event.target.value)”
$nextTick、refs
vue 是异步渲染
data 改变之后，dom不会like渲染
$nextTick 会在dom渲染之后被处罚，以获取最新的dom节点
slot
基本使用
作用于插槽
具名插槽
动态组件
:is=”component-name”
需要根据数据，动态渲染的场景。即组件类型不确定
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
异步组件
import()
按需加载，异步加载大组件
1
2
3
4
5
export default {
components:{
Demo: () => import(‘./ImportDemo’)
}
}
keep-alive
缓存组件
频繁切换，不需要重复渲染
vue常见性能优化
1
2
3
4
5
6
7
// 每个组件只渲染一次，且不会销毁。
// 简单的用v-show就行，稍微复杂的用keep-alive
mixin
多个组件有相同的逻辑，抽离出来
mixin并不是完美的解决方案，会有一些问题
vue 3 提出的 composition API 旨在解决这些问题
问题
变量来源不明确，不利于阅读
多个mixin可能会造成命名冲突
mixin和组件可能会出现多对多的关系，复杂度较高
1
2
3
4
5
6
7
8
9
import Mixin from ‘./mixin’
export default {
mixins: [Mixin],
data () {
return {}
}
}
vuex 使用
基本概念、基本使用、API
state的数据结构设计
vuex基本概念
state
gettters
action
mutation
用于vue组件
dispatch
commit
mapstate
mapGetters
mapActions
mapMutations
vue-router
路由模式：
hash
window.onhashchange
会出发网页跳转，
可前进后退，
不会提交到server端，强制刷新也不会
可刷新
H5 history
history.pushState
window.onpopstate
不可刷新（需要后端支持）
路由配置：
动态路由 {path: ‘/user/:id?’, component: User}
懒加载 {path: ‘/user/:id?’, component: () => import(‘./user’)}
Vue原理
查看更多
