此文仅做自己快速记忆笔记。

Vue基础语法

1.插值

文本 :{{msg}}
html:使用v-html指令用于输出html代码,会有xss（脚本注入）风险，会覆盖子组件
属性:HTML属性中的值应使用v-bind指令动态绑定
- v-bind:style="'width:calc(100% - '+siderbarW+'px);'"

表达式

Vue提供了完全的JavaScript表达式支持

{{name || "未命名"}}
{{ number + 1 }}
{{ ok ? ‘YES’ : ‘NO’ }}//三目运算符

2.指令

指的是带有“v-”前缀的特殊属性

2.1 核心指令

2.2 动态参数

<a v-bind:[attrname]=“url”> …
<a v-on:[evname]=“doSomething”> …

动态参数表达式有一些语法约束，evName无效,evname有效，回避大写

v-on与v-bind的区别

v-bind指令用于设置HTML属性：v-bind:href 缩写为 :href

<!-- 完整语法 -->
<a v-bind:href="url">123</a>
<!-- 缩写 -->
<a :href="url">123</a>

v-on 指令用于绑定HTML事件：v-on:click 缩写为 @click

<!-- 完整语法 -->
<a v-on:click="doSomething">123</a>
<!-- 缩写 -->
<a @click="doSomething">123</a>

computed和watch

计算属性

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

监听属性

通过 watch 来响应数据的变化
watch监听引用类型时，拿不到oldVal,因为指针相同此时已经指向了新的val
watch想要监听引用类型数据的变化，需要进行深度监听。

obj:{handler(newVal){},deep:true}------用handler+deep的方式进行深度监听。

vue中computed和watch的区别，以及适用场景

class 和 style

使用动态属性（v-on:|v-bind:）使用驼峰式写法

条件渲染

v-if v-else 的用法，可使用变量，也可以使用===表达式
v-if 和 v-show 的区别？ v-if是通过控制dom节点的存在与否来控制元素的显隐 v-show是css display的切换
v-if 和 v-show 的使用场景？ 更新不频繁用v-if 更新频繁用v-show

循环（列表）渲染

v-for一开始只支持数组
v-for 和 v-if 不能在同一个元素上一起使用,在vue2.x中v-for优先级高于v-if,vue3.x相反
所以在v-for中使用v-if,每次遍历都会执行v-if,会很消耗性能，可以使用计算属性替代。
v-for和v-if在同一元素一起使用主要是为了判断遍历的数组或者对象是否有值，
- 1.可以使用计算属性替代。
- 2.或者在元素外面加一个 if判断

key 的重要性。

key不能乱写（如random或者index），关于vue的就近原则。组件默认会被复用
v-if v-key (用于判断切换是是否为同一个组件，当有同种表单组件切换时，没有设置key，会被复用)
v-for v-key （列表增删改时如果没有设置v-key 会出现数据删除与页面显示不一致）

事件

event.proto.constructor
event是原生的（MouseEvent）
事件被挂载到当前元素
event.target与event.currentTarget的区别？
- event.currentTarget 获取到的是发起事件的标签元素
- event.target 获取的是触发事件的标签元素
- 有可能返回的值会相同
- 冒泡情况下，event.target是子元素,event.currentTarget是父元素

有参数时
v-on:click='clickMe1(1,$event)'
无参数时
v-on:click='clickMe2()'
//在methods中的获取方式
clickMe1:(num,event){
},
clickMe2:(){
    //event.target 直接点出
}

事件修饰符，按键修饰符

事件修饰符

stop:阻止事件冒泡行为
self:识别是否为自己的点击事件
once:事件执行一次后自动取消事件绑点
prevent:阻止元素的默认行为
capture:添加事件侦听器时使用事件捕获模式有冒泡顺序时，先触发

阻止冒泡
v-on:click.stop
阻止默认行为
v-on:submit.prevent
修饰符可以串联
v-on:click.stop.prevent
即是给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发。
就是谁有该事件修饰符，就先触发谁。
v-on:click.capture="doThis"

按键修饰符

v-on:keyup.87
v-on:keyup.enter

Vue基础知识笔记