专栏首页无所事事者爱嘲笑vue要点记录(待更新)

vue要点记录(待更新)

Vue实例

每个 Vue 实例都会代理其 data 对象里所有的属性:vm.a===data.a //true

注意只有这些被代理的属性是响应的

如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

除了 data 属性, Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。

模板语法

使用在v-html里的{{}}绑定会变成下面的样子,不会编译,直接当做字符串:

数据绑定使用js表达式

过滤器

computed

Computed vs Methods

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。

Computed vs Watched

设置setter

直接使用fullname就是调用getter,给fullname赋值时调用的是setter

watch选项 当你想要在数据变化响应时,执行异步操作或开销较大的操作,这是很有用的。

在官方的示例中,使用 watch 选项允许我们执行异步操作(访问一个 API),限制我们执行该操作的频率,并在我们得到最终结果前,设置中间状态。 这是计算属性无法做到的。

动态绑定class和style以及使用组件时如何添加动态class

自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时,如 transform ,Vue.js 会自动侦测并添加相应的前缀。

条件渲染

v-else 元素或v-else-if元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。

用 key 管理可复用的元素 Vue 会尽可能高效地渲染元素,通常会复用已有元素而不是从头开始渲染。

v-show 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 是简单地切换元素的 CSS 属性 display 。

注意, v-show 不支持 <template> 语法,也不支持 v-else。

列表渲染

对象迭代 item in object,在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

整数迭代 n in 10

2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

<my-component v-for="item in items" :key="item.id"></my-component>

v-for和key结合使用

数组更新检测

变异方法(mutation method),顾名思义,会改变被这些方法调用的原始数组。

会触发视图更新的数组变异方法:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

非变异(non-mutating method)方法,例如: filter(), concat(), slice() 。

这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

Vue 并没有丢弃现有 DOM 并重新渲染整个列表。 Vue 实现了一些智能启发式方法来最大化 DOM 元素重用,所以用一个含有相同元素的数组去替换原来的数组是非常高效的操作。

重要

有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性。 显示过滤/排序结果

事件处理器

事件修饰符

键值修饰符

修饰键

滑鼠按键修饰符也是2.1.0 新增,.left .right .middle,这些修饰符会限制处理程序监听特定的滑鼠按键。

为什么在-HTML-中监听事件

表单控件绑定

v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。

:value绑定数据,不光可以绑简单值,也可以绑对象

v-model修饰符

不加.lazy就是在input中输入或退格,对应的数据就跟着改变(input事件);

.lazy就是当输完后,input失去焦点时,对应数据进行改变(change事件)。

自定义事件的表单输入组件 HTML 内建的 input 类型有时不能满足你的需求。可以创建一个具有自定义行为可复用的 input 类型,这些 input 类型可以和 v-model 一起使用

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 数组方法整理

    mcq
  • 关于ionic2打包android时gradle下载不了的解决方法(附:简单优化启动速度彩蛋)

    mcq
  • 不定高元素的高度transition动画实现

    mcq
  • 怀英漫谈9 - JS 数组

    所谓的数组,就是一些数据的集合,JS中没有集合的概念,所以集合也是数组的一种。如果你Java用的多,那么这个概念就有点儿难以理解,毕竟从Java的文意来说,集合...

    用户1335799
  • 零基础python教程—python数组

    在学习Python过程中数组是个逃不过去的一个关,既然逃不过去咱就勇敢面对它,学习一下python中数组如何使用。

    小小科
  • 几种基础排序算法的python实现

    最近利用晚上闲下来的时间整理了一些基础的排序算法,这些排序算法一般的就是在学习数据结构的时候都是要求掌握的,作为一个开发者来说,会排序那是最基础的技能,也是最重...

    我被狗咬了
  • jQuery常用的选择器

    当我们想要操所页面中的元素时,首先要做的就是选取元素。选取页面中元素可以使用jQuery给我们提供的$()方法,该方法需要提供选择器作为参数,方法执行完成后会返...

    小周sri的码农
  • 数据类型和Json格式

    作者: 阮一峰 1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml。 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开。 它说,从结构上看...

    wangxl
  • [Linux]shell基础教程3-数组

    在之前的 shell基础教程1-变量、字符串、数组、注释 已经写过了,现在这个增加一些例子。

    祥知道
  • Vue2.x 的笔记:第一次的感受 Vue 开篇

    在互联网高速发现的今天,可以说每天都在变化着一不留神你就会错过一个亿,所以你不得不时刻的保持着高度的专注。

    六小登登

扫码关注云+社区

领取腾讯云代金券