Vue.js初体验（基础指令的使用）

v-once

v-once指令，只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

<div id="app">
	<h2>{{msg}}</h2>
	<h2 v-once>{{msg}}</h2><!--此处的数据只渲染一次，v-once指令的作用-->
</div>
<script>
  const app = new Vue({
	  el: '#app',
	  data: {
	  	msg: '我是绑定的字符串数据',
	  }
  })
 </script>

v-html

v-html指令，更新元素的 innerHTML内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

<div id="app">
	  <h2>{{url}}</h2>
      <h2>{{urlHtml}}</h2>
      <h2 v-html="urlHtml"></h2><!--如果绑定的数据带html标签，使用v-html指令，数据渲染为html标签，而不是字符串-->
</div>
<script>
const app = new Vue({
	  el: '#app',
	  data: {
	  	url: 'http://www.baidu.com',
 				  urlHtml: '<a href="http://www.baidu.com">百度一下</a>',
	  }
  })
</script>

v-pre

v-pre指令，官方解释：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<div id="app">
	  <h2 v-pre>{{urlHtml}}</h2><!--urlHtml应该为app绑定的数据，加了v-pre指令就会原封不动的显示{{urlHtml}}，不会渲染绑定的数据-->
</div>
<script>
 const app = new Vue({
	  el: '#app',
	  data: {
			urlHtml: '<a href="http://www.baidu.com">百度一下</a>',
	  }
  })
</script>

还有其他的指令，后面再作学习以及练习。