Vue.js用法詳解（一）更新中~

時間 2020-05-10

原文原文鏈接

前言javascript

　前段時間爲了一個數據查詢的項目自學了Vue，感受這款框架仍是很不錯的，今天就整理整理這個框架如何使用，但願對正在學這個框架的小夥伴有所幫助~html

首先，咱們先來了解一下Vue：vue

　　Vue.js是一套構建用戶界面(user interface)的漸進式框架。與其餘重量級框架不一樣的是，Vue 從根本上採用最小成本、漸進增量(incrementally adoptable)的設計。Vue 的核心庫只專一於視圖層，而且很容易與其餘第三方庫或現有項目集成。另外一方面，當與單文件組件和 Vue生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供有力驅動。因此，Vue其實仍是很強大的。java

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

Vue的使用很是簡單，直接下載Vue.js或者Vue.min.js導入就可使用。數組

1-1 模板語法

　　Vue.js 使用了基於 HTML 的模版語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。網絡

　　Vue.js 的核心是一個容許你採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統。app

　　結合響應系統，在應用狀態改變時， Vue 可以智能地計算出從新渲染組件的最小代價並應用到 DOM 操做上。框架

1. html模版

　　html模版：基於DOM的模版，模版都是可解析的有效的HTML
插值：
　　文本：使用「Mustache」語法（大括號）{{ value }}；做用：替換實例上的屬性值，當值改變時，插值內容會被自動更新。也可以使用v-text="value"代替。
　　<p>{{ value }}<p> 等價於 <p v-text="value"></p>
　　原生的html：雙大括號輸出的文本，不會解析html標籤。也就是說當實例的data爲html標籤時，不能解析而是直接輸出出來。此時如想要解析，可以使用v-html="value"代替。dom

new Vue({
    data:{
        value: `<span>我是一個span標籤</span>`
    }
});
<p>{{ value }}<p>   頁面展現  =>  <span>我是一個span標籤</span> 
<p v-html="value"><p>   頁面展現  =>  我是一個span標籤

須要注意的是，有時候由於一些網絡延遲等緣由，用戶會在也買年中先看到{{ xxx }}，而後纔有數據。咱們若想避免此效果，可用v-text="xxxx"代替。
屬性：使用v-bind進行綁定，能夠響應變化。
<h2 :class="{red:show}">標題</h2> => 注意此處的show爲data內的一個布爾值數據，若真則添加red的class，若假則移除red的class，
使用javascript表達式：能夠寫簡單的表達式。（能夠簡單的三目運算，可是不能夠寫if語句），之後會有計算屬性。
{ 1+2 }
{ true? "yes":"no" }編輯器

2. 字符串模版

template字符串

tempalte => 選項對象的屬性
模版將會替換掛載的元素。掛載元素的內容都會被忽略，根節點只有一個，將html結構寫在一對script標籤中，設置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>

說明權重比較高，直接「代替」掛載點，把原來的html替換後顯示。

//代碼片斷這個就是利用script標籤對內定義模版，侷限性：不能跨文件使用，一個頁面中可使用
<body>
    <div id="box">

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

Vue實例，每個應用都是經過Vue這個構造函數建立根實例（root instance）啓動New Vue（選項對象）。須要傳入選項對象，對象包含掛在元素，數據，模板、方法等。
el：掛載元素選擇器 --- String|HtmlElement
data：代理數據 --- Object|Function
methods：定義方法 --- Object
Vue代理data數據，每一個vue實例都會代理其data對象裏全部的屬性，這些被代理的屬性是響應的。新添加的屬性不具有響應功能，改變後不會更新視圖。
Vue實例自身屬性和方法，暴露自身的屬性和方法,以「$」開頭的，例如：$el、$data。。。

var vm = new Vue({
       el: '#app',
       data: {
          message: 'hello,Datura!!!'
        }，
        methods: {
            test (){
                alert(1);
            }
        },
        compontents:{
        //這裏存放組件
        }
     });
  /* vm就是new出來的實例 */
  console.log(vm.$data);//也就是數據data，後面還有不少掛載在vm（new出來的）實例上的屬性

//代碼片斷放在template標籤裏，並給一個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函數

render函數很接近編輯器
render => 選項對象屬性

數據對象屬性

class: {}, => 綁定class，和v-bind:class同樣的API
style: {}, => 綁定樣式，和v-bind:style同樣的API
attrs: {}, => 添加行間屬性
domProps: {}, => DOM元素屬性
on: {}, => 綁定事件
nativeOn: {}, => 監聽原生事件
directives: {}, => 自定義指令
scopedSlots: {}, => slot做用域
slot: {}, => 定義slot名稱和組件有關係，插曹
key: "key", => 給元素添加惟一標識
ref: "ref", => 引用信息

2Vue.js的條件、循環語句

2-1條件語句

v-if ：根據值的真假，切換元素會被銷燬、重建； => 在dom中已消失
v-show ：根據值的真假，切換元素的display屬性；
v-else ：條件都不符合時渲染；
v-else-if ：多條件判斷，爲真則渲染；

1、V-if

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

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

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

2、v-else

能夠用 v-else 指令給 v-if 添加一個 "else" 塊：

隨機生成一個數字，判斷是否大於0.5，而後輸出對應信息：

<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>

3、v-show

咱們也可使用 v-show 指令來根據條件展現元素：

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

4、v-else-if

v-else-if 在 2.1.0 新增，顧名思義，用做 v-if 的 else-if 塊。能夠鏈式的屢次使用：

判斷 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 ：根據值的真假，切換元素的display屬性；
v-show的元素會始終渲染並保持在DOM中。
v-show並不支持template語法。
② v-if是真實的條件渲染，由於他會確保條件塊在切換當中適當的銷燬與重建條件塊內的事件監聽器和子組件。
③ v-if有更高的切換消耗而v-show有更高的初始渲染消耗。
若是須要頻繁切換使用v-show更好，若是在運行時條件不大可能改變，使用v-if比較好

2-2 循環語句 v-for

① 語法：v-for="x in items"
　　　　x是索引；items是數組，這樣進行遍歷
② v-for循環是不斷建立新的標籤，標籤裏的內容，咱們決定，通常都是放在數組裏，而後遍歷顯示出來。也能夠放對象，遍歷對象。
③ 當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。

<body>
    <div id="app">
        <ul>
            <li v-for="(val,key) in fruitsArr">{{ val }} => {{ key }}</li>  //循環出來的列表項
        </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']   //數據源
            }
        });
    },false);
</script>