Vue.js用法詳解

更新時(shí)間：2017年11月13日 14:07:16 作者：一個(gè)檸檬

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了Vue.js用法詳解,需要的朋友可以參考下

vue.js 教程

Vue.js（讀音 /vjuː/, 類似于 view）是一套構(gòu)建用戶界面的漸進(jìn)式框架。

Vue 只關(guān)注視圖層，采用自底向上增量開發(fā)的設(shè)計(jì)。

Vue 的目標(biāo)是通過盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

Vue 學(xué)習(xí)起來非常簡(jiǎn)單，本教程基于 Vue 2.1.8 版本測(cè)試。

前言

　前段時(shí)間為了一個(gè)數(shù)據(jù)查詢的項(xiàng)目自學(xué)了Vue，感覺這款框架還是很不錯(cuò)的，今天就整理整理這個(gè)框架如何使用，希望對(duì)正在學(xué)這個(gè)框架的小伙伴有所幫助~

首先，我們先來了解一下Vue：

　　Vue.js是一套構(gòu)建用戶界面(user interface)的漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 從根本上采用最小成本、漸進(jìn)增量(incrementally adoptable)的設(shè)計(jì)。Vue 的核心庫(kù)只專注于視圖層，并且很容易與其他第三方庫(kù)或現(xiàn)有項(xiàng)目集成。另一方面，當(dāng)與單文件組件和 Vue生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)，Vue 也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用程序提供有力驅(qū)動(dòng)。所以，Vue其實(shí)還是很強(qiáng)大的。

1.Vue.js的安裝與模版語法

Vue的使用非常簡(jiǎn)單，直接下載Vue.js或者Vue.min.js導(dǎo)入就可以使用。

1-1 模板語法

　　Vue.js 使用了基于 HTML 的模版語法，允許開發(fā)者聲明式地將 DOM 綁定至底層 Vue 實(shí)例的數(shù)據(jù)。

　　Vue.js 的核心是一個(gè)允許你采用簡(jiǎn)潔的模板語法來聲明式的將數(shù)據(jù)渲染進(jìn) DOM 的系統(tǒng)。

　　結(jié)合響應(yīng)系統(tǒng)，在應(yīng)用狀態(tài)改變時(shí)， Vue 能夠智能地計(jì)算出重新渲染組件的最小代價(jià)并應(yīng)用到 DOM 操作上。

1. html模版

　　html模版：基于DOM的模版，模版都是可解析的有效的HTML

插值：

　　文本：使用“Mustache”語法（大括號(hào)）{{ value }}；作用：替換實(shí)例上的屬性值，當(dāng)值改變時(shí)，插值內(nèi)容會(huì)被自動(dòng)更新。也可使用v-text="value"代替。

　　<p>{{ value }}<p> 等價(jià)于 <p v-text="value"></p>

　　原生的html：雙大括號(hào)輸出的文本，不會(huì)解析html標(biāo)簽。也就是說當(dāng)實(shí)例的data為html標(biāo)簽時(shí)，不能解析而是直接輸出出來。此時(shí)如想要解析，可使用v-html="value"代替。

new Vue({
  data:{
    value: `<span>我是一個(gè)span標(biāo)簽</span>`
  }
});
<p>{{ value }}<p>  頁(yè)面展示 => <span>我是一個(gè)span標(biāo)簽</span> 
<p v-html="value"><p>  頁(yè)面展示 => 我是一個(gè)span標(biāo)簽

需要注意的是，有時(shí)候因?yàn)橐恍┚W(wǎng)絡(luò)延遲等原因，用戶會(huì)在也買年中先看到{{ xxx }}，然后才有數(shù)據(jù)。我們?nèi)粝氡苊獯诵Ч?，可用v-text="xxxx"代替。

屬性：使用v-bind進(jìn)行綁定，可以響應(yīng)變化。

<h2 :class="{red:show}">標(biāo)題</h2> => 注意此處的show為data內(nèi)的一個(gè)布爾值數(shù)據(jù)，若真則添加red的class，若假則移除red的class，

使用javascript表達(dá)式：可以寫簡(jiǎn)單的表達(dá)式。（可以簡(jiǎn)單的三目運(yùn)算，但是不可以寫if語句），以后會(huì)有計(jì)算屬性。

{ 1+2 }
{ true? "yes":"no" }

2. 字符串模版

template字符串

tempalte => 選項(xiàng)對(duì)象的屬性

模版將會(huì)替換掛載的元素。掛載元素的內(nèi)容都會(huì)被忽略，根節(jié)點(diǎn)只有一個(gè)，將html結(jié)構(gòu)寫在一對(duì)script標(biāo)簽中，設(shè)置type="x-template"。

<body>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var str = '<h2>hello pink!</h2>'
    var vm = new Vue({
      el: '#box',
      template: str
    });
  },false);
</script>

說明權(quán)重比較高，直接“代替”掛載點(diǎn)，把原來的html替換后顯示。

//代碼片段這個(gè)就是利用script標(biāo)簽對(duì)內(nèi)定義模版，局限性：不能跨文件使用，一個(gè)頁(yè)面中可以使用
<body>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="x-template" id="str">
  <p>我是一個(gè)p標(biāo)簽</p>
</script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#str'
    });
  },false);
</script>

Vue實(shí)例，每一個(gè)應(yīng)用都是通過Vue這個(gè)構(gòu)造函數(shù)創(chuàng)建根實(shí)例（root instance）啟動(dòng)New Vue（選項(xiàng)對(duì)象）。需要傳入選項(xiàng)對(duì)象，對(duì)象包含掛在元素，數(shù)據(jù)，模板、方法等。

el：掛載元素選擇器 --- String|HtmlElement
data：代理數(shù)據(jù) --- Object|Function
methods：定義方法 --- Object

Vue代理data數(shù)據(jù)，每個(gè)vue實(shí)例都會(huì)代理其data對(duì)象里所有的屬性，這些被代理的屬性是響應(yīng)的。新添加的屬性不具備響應(yīng)功能，改變后不會(huì)更新視圖。

Vue實(shí)例自身屬性和方法，暴露自身的屬性和方法,以“$”開頭的，例如：$el、$data。。。

var vm = new Vue({
    el: '#app',
    data: {
     message: 'hello,Datura!!!'
    }，
    methods: {
      test (){
        alert(1);
      }
    },
    compontents:{
    //這里存放組件
    }
   });
 /* vm就是new出來的實(shí)例 */
 console.log(vm.$data);//也就是數(shù)據(jù)data，后面還有很多掛載在vm（new出來的）實(shí)例上的屬性
//代碼片段放在template標(biāo)簽里，并給一個(gè)id名
<body>
  <template id="tem">
    <p>我是template</p>
  </template>
  <div id="box">

  </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#box',
      template: '#tem'
    });
  },false);
</script>

3. 模版—render函數(shù)

render函數(shù)很接近編輯器
render => 選項(xiàng)對(duì)象屬性

數(shù)據(jù)對(duì)象屬性

class: {}, => 綁定class，和v-bind:class一樣的API
style: {}, => 綁定樣式，和v-bind:style一樣的API
attrs: {}, => 添加行間屬性
domProps: {}, => DOM元素屬性
on: {}, => 綁定事件
nativeOn: {}, => 監(jiān)聽原生事件
directives: {}, => 自定義指令
scopedSlots: {}, => slot作用域
slot: {}, => 定義slot名稱 和組件有關(guān)系，插曹
key: "key", => 給元素添加唯一標(biāo)識(shí)
ref: "ref", => 引用信息
2Vue.js的條件、循環(huán)語句
2-1條件語句
v-if ：根據(jù)值的真假，切換元素會(huì)被銷毀、重建； => 在dom中已消失
v-show ：根據(jù)值的真假，切換元素的display屬性；
v-else ：條件都不符合時(shí)渲染；
v-else-if ：多條件判斷，為真則渲染；

一、V-if

條件判斷使用 v-if 指令：

<div id="app">
  <p v-if="seen">現(xiàn)在你看到我了</p>
  <template v-if="ok">
   <p>哈哈哈，打字辛苦?。。?！</p>
  </template>
</div>  
<script>
new Vue({
 el: '#app',
 data: {
  seen: true,
  ok: true
 }
})
</script>

這里， v-if 指令將根據(jù)表達(dá)式 seen 的值(true 或 false )來決定是否插入 p 元素。

二、v-else

可以用 v-else 指令給 v-if 添加一個(gè) "else" 塊：

隨機(jī)生成一個(gè)數(shù)字，判斷是否大于0.5，然后輸出對(duì)應(yīng)信息：

<div id="app">
  <div v-if="Math.random() > 0.5">
   Sorry
  </div>
  <div v-else>
   Not sorry
  </div>
</div>
  
<script>
new Vue({
 el: '#app'
})
</script>

三、v-show

我們也可以使用 v-show 指令來根據(jù)條件展示元素：

<div id="app">
  <h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({
 el: '#app',
 data: {
  ok: true
 }
})
</script>

四、v-else-if

v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊?？梢枣?zhǔn)降亩啻问褂茫?/p>

判斷 type 變量的值：

<div id="app">
  <div v-if="type === 'A'">
   A
  </div>
  <div v-else-if="type === 'B'">
   B
  </div>
  <div v-else-if="type === 'C'">
   C
  </div>
  <div v-else>
   Not A/B/C
  </div>
</div> 
<script>
new Vue({
 el: '#app',
 data: {
  type: 'C'
 }
})
</script>

[v-show、v-if的使用與比較]

① v-show ：根據(jù)值的真假，切換元素的display屬性；

v-show的元素會(huì)始終渲染并保持在DOM中。

v-show并不支持template語法。

② v-if是真實(shí)的條件渲染，因?yàn)樗麜?huì)確保條件塊在切換當(dāng)中適當(dāng)?shù)匿N毀與重建條件塊內(nèi)的事件監(jiān)聽器和子組件。

③ v-if有更高的切換消耗而v-show有更高的初始渲染消耗。

如果需要頻繁切換使用v-show更好，如果在運(yùn)行時(shí)條件不大可能改變，使用v-if比較好

2-2 循環(huán)語句 v-for

① 語法：v-for="x in items"

　　　　x是索引；items是數(shù)組，這樣進(jìn)行遍歷

② v-for循環(huán)是不斷創(chuàng)建新的標(biāo)簽，標(biāo)簽里的內(nèi)容，我們決定，一般都是放在數(shù)組里，然后遍歷顯示出來。也可以放對(duì)象，遍歷對(duì)象。

③ 當(dāng) v-if 與 v-for 一起使用時(shí)，v-for 具有比 v-if 更高的優(yōu)先級(jí)。

<body>
  <div id="app">
    <ul>
      <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li> //循環(huán)出來的列表項(xiàng)
    </ul>
  </div>
</body>
<script src="../vue.js"></script>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded',function () {
    var vm = new Vue({
      el: '#app',
      data:{
        fruitsArr:['apple','banana','orage','pear']  //數(shù)據(jù)源
      }
    });
  },false);
</script>