Vue.js指令介绍&基本指令(Directives)(DAY26)

What is Vue Directives?

指令的功能通常用在JavaScript表达式的值改变的时候，对应到的DOM标签也会连带的影响。指令大概有10几种，这些指令都会带有v-开头的特殊字元，让我们先从最常使用和最基本的指令开始认识吧!

• v-text

标签中的文字会依照在vue实体中原始资料的样子呈现

• v-html

标签中的文字会依照在vue实体中资料的样子用html解析後再呈现

<div id="app">
 <p v-text="message"></p> 
 <p v-html="message"></p> 
</div>
<script>
var app = new Vue({
  el: '#app', //element
  data: {
    message: '<h1>是否为html标签解析过後</h1> '
  }
})
</script>

补充:在v-html中，只能将可信任的内容使用此指令，绝对不能将v-html使用在用户输入的内容上面，很容易遭受「XSS安全漏洞的攻击」，需要留意!

• v-pre

在vue.js里面，我们通常使用{{ }}模板来接收vue实体中的资料，但如果今天单纯要在网页中呈现{{ }}这个字符，而不是要抓取vue里面data的资料呢，这时候我们就必须要用到v-pre这个指令，让电脑在解读时知道我们并不是要使用{{ }}模板。

<div id="app">
<div v-pre>{{ text}}</div>
<div>{{ text }}</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
     text: '显示welcome to Directives!'
  }
})
</script>

上面的范例可以看到加了v-pre的<div>没有显示text的资料

• v-once

这个指令的作用是只让资料渲染一次，之後不管使用者做了什麽动作都不会在做资料的更新。使用的时机是当一个组件包含了大量的静态内容，并没有要做动态的互动时可使用，让网页优化性能、提高效率，通常极少数会使用，若有明显感受到渲染变慢才会使用!

<div id="app">
    <input type="text" v-model="text">
    <div>{{text}}</div>
    <div v-once>{{text}}</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
     text: '第二行不会更改'
  }
})
</script>

第一次渲染:

第二次渲染(更改输入框文字):

上方的范例可以看到更改输入框文字以後有v-once的div区块，并不会做第二次的渲染使资料更新。
补充:诶!上面的范例怎麽出现了一个v-model，那是什麽东西?
他是用来做表单资料双向绑定的，下一篇会与大家详细的介绍!

• v-cloak

这个指令是用来解决完成编译前显示变数的问题，也就是说若有发生在网页编译完成前出现程序码时，可以使用这个指令，让网页编译完後才可以看到此区块的画面。

<style> 
  [v-cloak] { 
      display: none; 
  } 
</style>
<div v-cloak>
  ${ item.name }
</div>

上面的display:none就是在编译过程时是看不见${ item.name }，需等待编译结束，等到编译完成後，v-cloak作用也随之消失。

结语

今天介绍了各项模板的语法，日後将更进一步的介绍其他vue指令，帮助我们更方便的同步资料、渲染元件和监控事件!