vue基本使用
未经同意 禁止转载
v-html
转换成富文本 有XSS的风险，会覆盖子组件
computed
有缓存，data不变则不会重新计算
watch
- 默认浅监听 不会深度监听
- 监听值类型可以直接拿到oldVal；引用类型 拿不到oldVal
- 监听引用类型需要用handler()
a:{ //引用类型
handler(oldVal,val){
console.log(oldVal,val)
},
deep: true //是否深度监听
}
class
1. 对象形式:
:class={className: a,className1: b}
data里: a:true,b:false
2. 数组形式:
:class=[className,className1]
data里: className: 'className'
style
样式名称是两个以上单词拼接的需要采用驼峰写法
//html
:style='name'
//js data
name:{
fontSize: 10px;
color: #ccc;
backgroundColor: #000;
}
条件渲染
1. v-if v-else的用法
可以使用变量，也可以使用表达式
2. v-if v-show的区别
v-if控制渲染与否，v-show控制display显示与否
3. vi-if v-show使用场景
经常切换用v-show 否则用v-if
循环(列表)渲染
1. 可以用v-for遍历对象 (key,val,index) in obj
2. key的重要性
key不能乱写
3. v-for和v-if尽量不要一起使用
因为同时使用会先执行v-for 遍历后再每个执行v-if对性能有影响
事件
1. vue的event是原生的
2. 事件会被挂载到当前元素
//html
<button @click='fn1'>提交</button>
<button @click='fn2(id,$event)'>提交</button>
//js methods
fn1(event){ //事件没有参数可以直接获取event
}
fn2(id,event){ //有额外参数的时候调用要传$event，函数才能接收
}
3.事件修饰符
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop='do' />
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent='sub'></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent='do1' />
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素处理 -->
<div v-on:click.capture='doThis' >...</div>
<!-- 只在event.target是当前元素自身触发时去触发处理函数 -->
<!-- 即事件不是由内部元素触发的 -->
<div v-on:click.self='doThat'></div>
4.按键修饰符
<!-- Alt和Shift一起按会触发 -->
<button @click.ctrl='clickCtrl'></button>
<!-- 有且只有Ctrl被按下的时候触发 -->
<button @click.ctrl.exact='onlyCtrl'></button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact = 'onClick'></button>
