vue指令大全(一)

1. v-text
v-text主要用来更新textContent，可以等同于JS的text属性
<span v-text=‘msg’></span>
这两者等同于
<span>{{msg}}</span>

2.v-html
双大括号的方式会将数据解释为纯文本，而非HTML。为了输出真正的HTML，可以用v-html指令，它等同于JS的innerHtml属性。
<div v-html='rawhtml'></div>
这个div的内容将会替换成属性值rawHtml，直接作为HTML进行渲染。

3.v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的 Mustache标签。跳过大量没有指令的节点加快编译。

  <div id="app">
    <span v-pre>{{message}}</span> //这条语句不进行编译
    <span>{{message}}</span>
  </div>

最终仅显示第二个span的内容

4. v-cloak
这个指令是用来保持在元素上直到关联实例结束时进行编译。

  <div id="app" v-cloak>
    <div>
      {{message}}
    </div>
  </div>

  <script type="text/javascript">
    new Vue({
      el: '#app',
      data: {
        message: 'hello world'
      }
    })
  </script>

在页面加载时会闪烁，先显示:

  <div>
    {{message}}
  </div>

然后才会编译为：

  <div>
    hello world!
  </div>

5. v-once
v-once关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节 点将被视为静态内容跳过，这可以用于优化更新性能。

  <span v-once>This will never change:{{msg}}</span> //单个元素
  <div v-once>//有子元素
    <h1>comment</h1>
    <p>{{msg}}</p>
  </div>
  <my-component v-once:comment="msg"></my-component> //组件
  <ul>
    <li v-for="i in list">{{i}}</li>
  </ul>

上面的例子中，msg,list即使产生改变，也不会重新渲染。