Vue Directive

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
   <h1>{{title}}</h1>
   <p>{{sayHello()}} - <a v-bind:href="link">Baidu</a></p>
</div>

new Vue({
  el: '#app',
  data: {
    title: 'Hello World',
    link: 'http://baidu.com'
    },
  methods: {
    sayHello: function() {
        this.title = 'Hello';
      return this.title
    }
  }
});

上面例子中，因为在methods里用函数改变了title变量的值，导致html里的{{title}} 和 {{sayHello()}} 两个都返回改变后的title的值。在vue中这个改变总是会第一时间体现在页面上面。
那如果我们希望这个{{title}}的值不要那么动态呢，希望他永远保留最初的样子，该怎么做？这时有另外一个 directive叫做v-once。把h1 标签那一行改成如下

<h1 v-once>{{title}}</h1>

就可以保证这里永远只显示Hello World，而不会是改变后的值。