Vue 2.0入門基礎(chǔ)知識之內(nèi)部指令詳解

更新時間：2017年10月15日 14:37:11 作者：夜幕下的二田

這篇文章主要介紹了Vue 2.0入門基礎(chǔ)知識之內(nèi)部指令知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下

1.Vue.js介紹

當(dāng)前前端三大主流框架：Angular、React、Vue。React前段時間由于許可證風(fēng)波，使得Vue的熱度蹭蹭地上升。另外，Vue友好的API文檔更是一大特色。Vue.js是一個非常輕量級的工具，與其說是一個MVVM框架，不如說是一個js庫。Vue.js具有響應(yīng)式編程和組件化的特點。響應(yīng)式編程，即保持狀態(tài)和視圖的同步，狀態(tài)也可以說是數(shù)據(jù)吧；而其組件化的理念與React則一樣，即“一切都是組件，組件化思想方便于模塊化的開發(fā)，是前端領(lǐng)域的一大趨勢。

2.內(nèi)部指令

2-1.v-if v-else v-show：前兩者一般配合使用，v-show的效果類似于v-if。

實例如下：

<body>
  <div id="app">
    <p v-if="flag">if</p>
    <p v-else>else</p>
    <p v-show="flag">show</p>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
      flag:true
    }
  });
</script>

DOM結(jié)構(gòu)中，三個p標(biāo)簽中的內(nèi)容是否顯示在頁面中取決于flag的布爾值屬性。當(dāng)flag為true時，if和show都會顯示，else也不會存在于DOM結(jié)構(gòu)中。v-if和v-show的不同體現(xiàn)在：v-if是根據(jù)條件的值判斷是否加載，可以減輕服務(wù)器的壓力，但是缺點是當(dāng)改變條件的值，頁面又要加載一次；v-show則無論條件的值是否為true，都會加載（若條件為true，則display屬性設(shè)置為其默認(rèn)屬性，反之，設(shè)置為none）

2-2.v-for 循環(huán)指令

實例如下：

<body>
  <div id="app">
   <ol>
     <li v-for="b in b">{}</li>
   </ol>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     b:['a','b','c',1,2]
    }
  });
</script>

頁面會顯示5個li，插值的效果是li會顯示與數(shù)組b一一對應(yīng)的元素，v-for有點類似于for in循環(huán)

2-3 v-text v-html 文本（html字符串）指令

<body>
  <div id="app">
   <p v-text="msgText"></p>
   <p v-html="msgHtml"></p>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    data:{
     msgText:"China",
     msgHtml:"<span>中國</span>"
    }
  });
</script>

可以聯(lián)想到j(luò)query的text()、html()。到現(xiàn)在，你會發(fā)現(xiàn)前面都是利用插值操作，即{{}}，這種做法會在一定程度上影響性能。

2-4 v-on 綁定事件監(jiān)聽器

實例如下：

<body>
  <div id="app">
   <button v-on:click="Hi()">Button</button>
  </div>
</body>
<script>
  var vm= new Vue({
    el:"#app",
    methods:{
      Hi:function(){
        alert("Hello World!")
      }
    }
  });
</script>

同理，類比jquery的on()方法，綁定事件用的，實例中v-on:click可以簡寫為@click。click可以替換成鼠標(biāo)的其他操作，如mouseout、mouseover等等。

2-5 v-bind指令

實例如下：

<body>
  <div id="app">
    <a v-bind:style="{color:'red'}" :src="message">{{message}}</a>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程師"
    }
  });
</script>

效果為a標(biāo)簽顯示紅色，且其src屬性為vm.message。v-bind指令主要用于設(shè)置html標(biāo)簽的屬性，其簡寫形式為 v-bind：——>：

2-6 v-model 數(shù)據(jù)雙向綁定指令

實例如下：

<body>
  <div id="app">
    <p>{{message}}</p>
    <input type="text" v-model="message">
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程師"
    }
  });
</script>

當(dāng)input輸入的值發(fā)生變化時，p標(biāo)簽包含的內(nèi)容也會隨之變化，且與前者保持一致。

2-7 v-pre 指令

實例如下：

<body>
  <div id="app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
  </div>
</body>
<script>
  var vm = new Vue({
    el: "#app",
    data: {
      message: "前端工程師"
    }
  });
</script>

第一個p標(biāo)簽輸出“前端工程師”，而第二個p標(biāo)簽則會跳過vue編譯，輸出原始值，即{{message}}。

2-8 v-cloak指令

v-cloak指令的作用是當(dāng)DOM樹構(gòu)建好完成頁面的渲染后才執(zhí)行，且其須要與css一起使用

2-9 v-once指令

v-once指令的作用是只有當(dāng)DOM樹第一次渲染時起作用。

總結(jié)

以上所述是小編給大家介紹的Vue 2.0入門基礎(chǔ)知識之內(nèi)部指令詳解，希望對大家有所幫助！

您可能感興趣的文章: