vue文档学习笔记之指令

指令

v-if ：条件渲染，控制一个模块是否显示。

v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
在<template>元素上使用v-if条件渲染分组
因为v-if是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个<template>元素当做不可见的包裹元素，并在上面使用v-if。最终的渲染结果将不包含<template>元素。

<template v-if="ok">  
  <h1>Title</h1>  
  <p>Paragraph 1</p>  
  <p>Paragraph 2</p>  
</template>

v-else

你可以使用v-else指令来表示v-if的“else 块”：

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

---

v-for：列表渲染。

v-on：指令添加一个事件监听器。

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

Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再_追踪_变化。

不常用。

v-bind： 动态绑定属性。属性绑定。

缩写（语法糖）：: (只用一个冒号代替)。
<!-- 完整语法 -->

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

<!-- 缩写 -->

<a :href="url"></a>

除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。
Mustache 标签将会被替代为对应数据对象上msgproperty 的值。无论何时，绑定的数据对象上msgproperty 发生了改变，插值处的内容都会更新。

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用v-bind指令：
<div v-bind:id\="dynamicId"\></div\>
对于布尔 attribute (它们只要存在就意味着值为true)，v-bind工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">按钮</button>

如果isButtonDisabled的值是null、undefined或false，则disabledattribute 甚至不会被包含在渲染出来的<button>元素中。

---

缩写

v-bind:

`<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>`

v-on:

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>

---

用key管理可复用的元素