vue 把组件挂载到视图_Vue视图

1. 基本模板语法

1.1 插值

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

v-text 指令也可以用于数据绑定，如果要更新部分的 textContent ，需要使用 插值。

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新

原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

属性

Mustache语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令

在布尔属性的情况下，它们的存在即暗示为 true， 如果值是 null、undefined 或 false，则属性不会被包含在渲染出来的

使用JavaScript表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

{{ var a = 1 }}

{{ if (ok) { return message } }}

防止刷新或加载闪烁

display: none !important;

}

{{ message }}

v-cloak并不需要添加到每个标签，只要在el挂载的标签上添加就可以

1.2 指令

指令

指令 (Directives) 是带有 v- 前缀的特殊属性。

指令特性的值预期是单个 JavaScript 表达式

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

指令列表

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model

v-pre

v-cloak

v-once

缩写

v-bind缩写

...

...

v-on缩写

...

...

2. 条件渲染与列表渲染

2.1 条件渲染

相关指令

v-if

v-else

v-else-if

控制多个元素

Title

Paragraph 1

Paragraph 2

复用已有元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染

要想每次都重新渲染，只需添加一个具有唯一值的 key 属性

v-show

Hello!

与 v-if 的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

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

2.2 列表渲染

遍历数组

• {{ item.message }}

v-for 还支持一个可选的第二个参数为当前项的索引

• {{ index }} - {{ item.message }}

遍历对象

{{ value }}

{{ key }}: {{ value }}

{{ index }}. {{ key }}: {{ value }}

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 的列表渲染输出。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。因为在遍历，需要用 v-bind 来绑定动态值

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

更新检测

数组

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：

​ 当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength

对象

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

方法

Vue.set()

vm.$set()

遍历数字

{{ n }}

v-for on

• {{ item.msg }}

v-for 和 v-if

当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。

{{ todo }}

3 样式

3.1 绑定HTML Class

对象语法

v-bind:class="{ active: isActive, 'text-danger': hasError }">

数组语法

3.2 绑定内联样式

对象语法

数组语法

数组语法可以将多个样式对象应用到同一个元素上

div v-bind:style="[baseStyles, overridingStyles]">