语法

v-once

插值只渲染一次

<div>
    <!-- msg可以改变 -->
    <span  class="text">this is a dynamic sentence:{{msg}}</span>
    <!-- msg值在第一次选然后就不会改变了 -->
    <span v-once  class="text">this is a static sentence:{{msg}}</span>
    <!-- 双向绑定 -->
    <input type="text" v-model="msg" placeholder="请输入somthing">
  </div>

动态渲染html样式

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

v-html

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

mustache语法与attribute

Mustache 语法不能作为属性值,但可以将属性与v-bind:结合后,将变量世界作为属性值,就可以形成动态绑定 -

    <span v-html="styles">{{styles}}</span>

javascript表达式

表达式可以直接写在mustache语法中。例如：{{ number + 1 }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。

动态参数

可以用来绑定属性，也可用用来绑定事件
这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。

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

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

修饰符

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

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

Class与Style的绑定

对象语法

<!-- 普通命名方式不用再次加引号，但这样的'text-a'要使用引号包裹 -->
    <!-- 对象中可以只放一个键值对，也可以有多个键值对 -->
    <!-- 当isShow的值是true时这个class名就会显示，反之不显示 -->
    <!-- 因为这时动态绑定，所以要使用v-bind: -->
    <span v-bind:class="{class1:isShow,'text-live':isShow}">123s</span>

也可以将动态绑定的值换成一个变量，如下：(只要变量中value为true就会显示对应的class名了)

<span v-bind:class="checkClass">123s</span>
checkClass:{class1:true,'text-live':true}

也可以通过计算属性返回一个处理过的对象

数组语法

动态绑定一个数组，数组中元素（变量）的值是什么，那么class就会后对应的class名，如果元素（变量）为空则不会添加这个class名

    <span v-bind:class="[a,b,c]">123s</span>

当然这种设置class的方式也可以用在组件上

对象语法

可以通过以下方式动态绑定内联样式。当然直接绑定一个对象会更好。

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

对象语法常常结合返回对象的计算属性使用。

自动添加前缀

当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。

条件渲染

v-if

v-else

v-else-if

v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
条件为true时显示，反之不显示。这些元素一般用于兄弟元素之间

<div v-if="msg === 'A'">
      A
    </div>
    <div v-else-if="msg === 'B'">
      B
    </div>
    <div v-else-if="msg === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
    <input type="text" v-model="msg">

用key管理可复用的元素

用key管理可复用（key是一个标记，这个标记最好是唯一的，能提高效率，判断能否复用这个标记）

v-show

根据条件展示元素的选项是 v-show 指令。使用方法和v-if类似,值为true时显示，反之隐藏

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

v-show是通过display样式实现显示和隐藏，v-if是通过创建和删除节点来实现显示和隐藏。
这也就是说v-if是条件为true时才会渲染，v-show总是会被渲染。
所以v-show开销小，常用于频繁切换的节点。v-if则适合用于隐藏广告等。

注意，v-show 不支持