【Vue 2.0+】注意点,个人笔记

本文深入探讨Vue.js的关键指令,如v-model、v-on、v-if等,以及计算属性、监听属性和事件修饰符的使用。同时,解析了Vue的生命周期、数据响应原理和常见坑点,如数组变动检测和DOM更新机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

指令:

{{}}v-oncev-htmlv-bind / :v-forv-modelv-on /@
v-ifv-else v-else-if 2+v-show:style:class 

属性

el 

元素

data

数据

computed

计算属性

method

方法

watch

监听属性

  

事件 

修饰符

.stop

阻止

默认行为

.prevent

提交事件

不再载入

页面

.capture

捕获模式

.once

一次

触发

.passive

滚动冒泡

行为

  

按键

修饰符

@keyup

@keydown

.enter

回车

.tab

Tab键

.delete

删除/退格

.esc

退出

.space

空格

.up

.down

.left

.right

还可以使用 @keydown.f1  自定义编码

Vue.config.keyCodes.f1=112

系统辅助

按键

.ctrl

.alt.shift

.meta

window键

.exact

组合控制

<!--  ctrl  +  c  --- >

@keyup.ctrl.67 

<!-- alt + 点击  -->

@click.alt="handleFunction"

鼠标

修饰符

.left.right.middle

@click.left

=fun

   

v-model修饰符

.lazy

视为change

同步数据

相应

.number

如果转换为NaN

则返回字符串输入值

.trim

去除前后

空格

    
        
  1. 每当 data 对象发生变化,都会触发视图重新渲染。值得注意的是,如果实例已经创建,那么只有那些 data 中的原本就已经存在的属性,才是响应式的v-once  
  2. 箭头函数会将this指向上下文
  3. 生命周期  beforeCreate  created   beforeMount  mounted  beforeUpdate  updated beforeDestroy  destoryed
  4. 由于 JavaScript 的限制,Vue 无法检测到以下数组变动 vm.items[indexOfItem] = newValue / vm.items.length = newLength
  5. Vue 不允许在已经创建的实例上,动态地添加新的根级响应式属性
  6. 可以这样添加新属性  Vue.set(vm.userProfile, 'age', 27)
  7. 变化数组方法:会对原数组操作的数组方法,如 pop()shift()unshift()splice()sort() 和 reverse()
  8. 非变化数组方法:不会对原数组操作、返回新数组的数组方法,如 filter()concat() 和 slice()
  9. 在 textarea 中插值(<textarea>{{text}}</textarea>)并不会生效。使用 v-model 来替代
  10. 每个组件都维护彼此独立的 data。这是因为每次使用组件时,都会创建出一个新的组件实例
  11. 组件的data必须是一个函数,以便每个组件为独立的数据
  12. props传递信息
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值