Vue渲染，基础语法，指令

渲染

1.条件渲染

v-if
v-if 指令用于条件性地渲染一块内容。这块内容
只会在指令的表达式返回truthy值的时候被渲染

<h1 v-if="awesome">Vue is awesome!<h1>
<h1 v-else>Oh no<h1>

v-else 指令可以用来表示v-if的“else”块，v-else元素必须紧跟在带v-if或v-else-if的元素后面，否则它将不会被识别

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

v-else-if 指令充当 v-if 的 else-if 块，可以连续使用，必须紧跟在带 v-if 或者 v-else-if 的元素后面

用key管理可复用的元素：
Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
可以使Vue变得非常快，并且也有别的好处。
如果不想复用元素，可以给元素添加唯一的 key attribute 值，这样在条件改变后，元素的内容也会重新渲染

v-show
根据条件展示元素，用法如下

<h1 v-show="ok">Hello!<h1>

与 v-if 不同的是，带有 v-show 的元素始终会被渲染并保留在DOM中。 v-show 只是简单切换元素的display属性
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

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

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

2.列表渲染
用 v-for 把一个数组对应为一组元素
v-for 指令需要使用 item in items 形式的特殊语法， 其中 items 是源数据数组， 而 item 则是被迭代的数组元素别名

<ul id="example-1">
  <li v-for="item in items" :key="item.message">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 语块中， 可以访问所有的父作用域的 property。 v-for 还支持一个可选的第二个参数，即当前的索引

<ul id="example-2">
  <li v-for="(item, index) in items">//of 可以替换 in
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

在 v-for 里使用对象

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})

维护状态
当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

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

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute：

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

基础语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

1.插值
文本
数据绑定最常见的形式“Mustache”语法（双大括号）的文本插值

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

当 msg 的内容改变，Message里的内容对应改变

可以通过使用 v-once 指令，实现一次插值

<span v-once>Message: {{ msg }}</span>//当msg中的内容发生改变
///后，Message中的内容不发生改变

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

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

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

<div v-bind:id="dynamicId"></div>

使用JavaScript表达式
对于所有数据绑定， Vue.js 都提供了完全的 JavaScript 表达式支持

指令

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

1.参数

一些指令能够接受一个“参数”， 在指令名称以后以冒号表示。例如 v-bind 指令可以响应式地更新HTML attribute

<a v-bind:href="url">...</a>

在这里 href 是参数，告知 v-bind 指令将该元素 href attribute 与表达式 url 的值绑定。另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">...</a>

2.动态参数
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，其值为 “href”，那么这个绑定将等价于 v-bind:href。

动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。

动态参数表达式有一些语法约束，因为某些字符，如空格和引号，放在 HTML attribute 名里是无效的。

3.修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

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