Vue 学习疑问

为什么插值语法的格式是{{}}?

因为在JavaScript中一对{}已经被使用有规划定义了,先来的就是规范,所以vue需要对其进行规避来区分。

使用计算属性的好处?以及它缓存中的键值定义

好处:大家其实有注意到我们完全可以使用定义一个方法来实现与计算属性相同的结果,那么我们为什么要用到计算属性这样一个属性呢?是因为计算属性是基于他的依赖进行缓存的。计算属性只有在他的相关依赖发生变化时才会重新求值。这意味着当data中的某一属性未发生改变时,当我们需要使用计算属性时,计算属性会直接快速从缓存中取得之前的计算结果进行返回,而不是像方法一样还要先进行计算在返回。
如何缓存:在缓存中得键值就是计算属性得名称及其计算出来得值。

class与style绑定时为什么是通过对象进行绑定?

v-bind:class与v-band:style都可以通过对象和数组进行绑定。通过对象进行绑定,可以直接解析为json对象,方便解析

在每一个生命周期(前后)我们通常用来执行什么操作?
  • beforeCreate:一般在开发中很少使用
  • created:所有的状态都初始化完成,我们也完全可以在该阶段发送异步的ajax请求,获取数据。但是无法获取到对应的的$el选项,也就是无法获取Dom,
  • beforeMount:未执行渲染,更新,虚拟DOM完成,真实DOM未创建
  • mounted:真实DOM已经创建,可以发送异步请求获取数据,也可以访问dom元素
  • beforeUpdate:可用于获取更新前各种状态数据
  • updated:所有的状态数据是最新的。
  • beforeDestroy:常在此清除定时器等
  • destroyed:Vue实例已经被销毁,所有的事件监听器会被移除,所有的子实例也会被销毁
事件处理

监听事件
可以使用v-on指令监听DOM事件,并在触发时运行引号内的JavaScript代码

事件处理方法
然而许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 还可以接收一个需要调用的方法名称
如:

<button v-on:click="greet">Greet</button>

内联处理器中的方法
除了直接绑定到一个方法,也可以在内联 JavaScript 语句中调用方法:

<button v-on:click="say('hi')">Say hi</button>

事件修饰符

  • .stop:阻止单击事件继续传播
  • .prevent:用preventDefault阻止默认动作
  • .capture:添加事件监听器时使用事件捕获模式,即内部元素触发的事件 先在此处理,然后才交由内部元素进行处理
  • .self:只当在 event.target 是当前元素自身时触发处理函数,即事件不是从内部元素触发的
  • .once:2.1.4 新增,点击事件将只会触发一次
  • .passive:2.3.0 新增,滚动事件的默认行为 (即滚动行为) 将会立即触发,而不会等待 onScroll 完成,这其中包含 event.preventDefault() 的情况

为了在必要的情况下支持旧浏览器,Vue 提供了绝大多数常用的按键码的别名

自定义事件

个人理解,如有错误,十分抱歉,欢迎指正。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值