vue基本使用

未经同意 禁止转载

v-html

转换成富文本 有XSS的风险，会覆盖子组件

---

computed

有缓存，data不变则不会重新计算

---

watch

1. 默认浅监听 不会深度监听
2. 监听值类型可以直接拿到oldVal；引用类型 拿不到oldVal
3. 监听引用类型需要用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>

---

表单

1. v-model

2. 常见表单项textarea checkbox radio select

3.修饰符lazy--防抖、number--转换为数字、trim--去除两边空格