为什么插值语法的格式是{{}}?
因为在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 提供了绝大多数常用的按键码的别名
自定义事件
个人理解,如有错误,十分抱歉,欢迎指正。