<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，而不会是改变后的值。
