vue2.0官网学习记录

最新推荐文章于 2022-10-31 11:02:15 发布

huangq_qiao

最新推荐文章于 2022-10-31 11:02:15 发布

阅读量359

点赞数

分类专栏： Vuejs权威指南学习记录

本文链接：https://blog.csdn.net/qiao_qiao_happy/article/details/115108977

版权

Vuejs权威指南学习记录专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1. vue.js是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。

Vue 的核心库只关注视图层(MVVM框架中的ViewModel)，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2. 插值

2.1 文本插值{{}}, v-once指令

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

数据绑定最常见的形式就是使用Mustache语法 (双大括号) {{}} 的文本插值, Mustache 标签将会被替代为对应数据对象上 msg property 的值。绑定的数据对象上 msg property 改变，插值内容都会更新。

<span> Message: {{ msg }}</span>

通过使用 v-once 指令能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：

<span v-once>这个将不会改变: {{ msg }}</span>

2.2 原始HTML插值, v-html, XSS攻击

双大括号{{}}会将数据解释为普通文本，而非 HTML 代码。
为了输出真正的HTML，需要使用v-html指令。
在这里插入图片描述

XSS攻击

XSS攻击及防御

XSS又称CSS，全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。

XSS攻击类似于SQL注入攻击，攻击之前，我们先找到一个存在XSS漏洞的网站，XSS漏洞分为两种，一种是DOM Based XSS漏洞，另一种是Stored XSS漏洞。
理论上，所有可输入的地方没有对输入数据进行处理的话，都会存在XSS漏洞，漏洞的危害取决于攻击代码的威力，攻击代码也不局限于script。
在这里插入图片描述

在这里插入图片描述

2.3 属性Attribute, v-bind

{{}}双大括号语法不能作用在HTML的attribute上, 需要使用v-bind指令。
在这里插入图片描述

2.4 javascript表达式

在这里插入图片描述

3. 指令 v-bind v-if v-else v-for v-on v-model

指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (·v-for· 是例外情况)。
指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

v-bind缩写 : , 响应式地更新HTML attribute

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

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-if / v-else 条件判断
v-for 循环渲染
v-on缩写@, 监听DOM事件

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

v-model 实现表单输入与应用状态之间的双向绑定

<input v-model="message">

3.1 动态参数 [javascript表达式] - 求出一个字符串/异常值null

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：在这里插入图片描述

3.2 修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

.prevent

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

4. 计算属性和侦听器

4.1 计算属性

在这里插入图片描述

4.1.1 计算属性缓存vs方法methods （计算属性基于响应式依赖进行缓存 vs 每次触发重新渲染时方法methods会再次执行）

可以通过表达式中调用方法来达到和计算属性同样的效果

<p>Reversed message: "{{ reversedMessage() }}"</p>

// 在组件中
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

因此, 这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖。
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。

computed: {
  now: function () {
    return Date.now()
  }
}

我们为什么需要缓存？
假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！
如果你不希望有缓存，就使用methods方法。

4.1.2 计算属性 (computed) vs 侦听属性 (watch)

在这里插入图片描述

4.1.3 计算属性的setter (计算属性默认只有 getter, 需要时也可以提供setter)

在这里插入图片描述

4.2 侦听器

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。
因此Vue 通过 watch 选项提供了一个更通用的方法来响应数据的变化。
当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

除了 watch 选项之外，还可以使用命令式的 vm.$watch API。

5 Class与Style绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。
不过，字符串拼接麻烦且易错。因此，在将 v-bind用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

6 条件渲染 v-if v-else-if v-else, v-show

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

6.1 用key管理可复用的元素, 添加key设置两个元素完全独立不可复用

1, Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使Vue 变得非常快之外，还有其它一些好处。

例如，如果你允许用户在不同的登录方式之间切换：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

在上面的代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。

2, Vue 还提供了另外一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

现在，每次切换时，输入框都将被重新渲染。但<label>元素仍然会被高效地复用，因为它们没有添加key attribute。

6.2 v-if 和 v-show 的区别, 更高的切换开销 vs 更高的初始渲染开销

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的CSS property display

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

6.3 v-if 和 v-for 尽量避免一起使用

不推荐同时使用 v-if 和 v-for。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。
在这里插入图片描述

在这里插入图片描述

7 列表渲染 v-for="(item, index) in items"

7.1 用v-for 把一个数组对应为一组元素

huangq_qiao

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.0官网学习记录

vue.js是什么Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层(MVVM框架中的ViewModel)，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。声明式渲染Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：数据绑定最常见的形式就是
复制链接

扫一扫