vue學習筆記【基礎篇一】

Silence_Mind發表於2017-08-28
Vue筆記

“時間永遠都不夠用”———–《海賊王》-索隆

介紹

Vue 是一個 MVVM 的 JavaScript 框架，以 json 為基本資料模型，繫結HTML頁面，當 json 從網路中的 json 改變的時候，我們的HTML頁面也會改變。

MVVM 概念模型：

這裡寫圖片描述

什麼叫MVVM？？其實MVVM是這樣分割的，M/V/VM。上圖中最右邊的就是M—>model，最左邊就是V—>View，中間就是VM—>ViewModel。VM起到HTML和Json的橋樑的作用，如果Json改變，那麼就通過VM在記憶體中維護的 虛擬 DOM 重新點對點重新整理 View 介面，點對點起到提高效率作用；然後，如果View的某個地方有資料改變，比如input標籤裡面有資料變動，那麼就對映到Model裡面，這就是VM的監聽作用。這裡說了那麼多，其實還不如看例子，自己體會！！！

初入Vue

進入官網，引入 vue.js

通過Vue雛形，你會知道Vue.js真的很小。

Vue和AngularJs的區別在於Vue很小功能上也不差偏向適合於移動端，AngularJs適合PC端。
在GitHub裡面你可以知道，Vue的受歡迎程度超過AngularJS！！！

Vue和AngularJs的相同點在於，它們都不相容IE8及以下。其實現在都是2017快到2018了，我們為什麼還要去相容IE8以下？？？為什麼？？？你不覺得可恥嗎？？？資訊時代發展飛速，你還在用IE8？？？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初入Vue</title>
    <script src="../res/vue.min.js"></script>
    <!-- vue.min.js代表生產版本，vue.js代表開發版本，區別在於生產版本去掉空格這些顯得更小 -->
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
</body>
<script>
    //你也許沒有發現這是ECM6的新增的var替代型別。如果你還在用var，你就OUT了！！！
    let data = {
        msg:`HAHA，我是Vue，歡迎來到Vue的世界！！！`//你也許沒有發現這是ECM6的超級字串！
    };

    let vm = new Vue({
        el:'#app',//這個是el屬性代表選擇器，意味將會對哪兒個盒子作為View
        data:data//這個就是Model啦
    });

</script>
</html>

你一定要自己手動執行上面這個例子，你才會知道它的神奇之處！！！也許你實踐了，還是覺得Vue不厲害，那麼你可以繼續嘗試下面的例子。

雙向資料繫結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>雙向資料繫結</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <h3>{{msg}}</h3>
        <input type="text" v-model="msg">
    </div>
</body>
<script>
    let data = {
        msg:'有本事你就刪除我啊！！！.... .- .... .- .... .-'//別以為我後面這些“.-”是亂寫的！！！
    };
    let vm = new Vue({
        el:'.app',//注意，這裡的掛載點（選擇器）在vue2.0時，不能是body和html，只能是除了它們之外的。
        // 然後，你發現沒有，這個例子和上個例子的選擇器不一樣啊~~~
        data:data
    });
</script>
</html>

資料的基本型別輸出和遍歷輸出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{輸出基本資料型別和遍歷輸出}}</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>

    <div class="app">

        常規輸出<br><br>
        {{msgS}}<br>
        {{msgI}}<br>
        {{msgB}}<br>
        {{msgArr}}<br>
        {{msgJson}}<br>
        <hr>

        遍歷輸出
        <ul>
            <li v-for="(item,index) in msgArr">
                下標：{{index}}  資料：{{item}}
            </li>
        </ul><br>
        <ul>
            <li v-for="(item,key,index) of msgJson"><!-- 這裡的 key 和 index 順序不能錯了，否則會出現key的值是index的值。 -->
                下標：{{index}} key：{{key}} 資料：{{item}}
            </li>
        </ul>
    </div>
</body>
<script>
    let data = {
        msgS:'風蕭蕭兮易水寒',
        msgI:11111,
        msgB:true,
        msgArr:['be Alone！','Simple','Dream'],
        msgJson:{a:'普通',b:'困難',c:'地獄'}
    };

    let vm = new Vue({
        el:'.app',//這裡不能寫多個選擇器，然後同名的選擇器只有一個生效，所以你不能有兩個div都是類屬性是app，因為這樣只能是第一個生效。
        data:data
    });
</script>
</html>

vue回撥函式

通過函式方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-watch</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div>{{a}}---{{b}}</div>
        a:<input v-model="a" type="text"><br>
        b:<input v-model="b" type="text"><br>
    </div>
</body>
<script>
    let data = {
        a:12,
        b:13
    };
    let vm = new Vue({
        el:'.app',
        data:data
    });
    //this 在這裡指的是vm，而vm可以代理data物件的屬性。所以vm.a === data.a
    //當 data.a 和 data.b 任意一個值改變的時候，就呼叫回撥函式。
    vm.$watch(function () {
        return this.a + this.b
    },function (newv , oldb) {
        alert('newv:'+newv+" oldb:"+oldb);
    });
</script>
</html>

通過鍵路徑方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-watch</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div>{{a}}---{{b}}</div>
        a:<input v-model="a" type="text"><br>
        b:<input v-model="b" type="text"><br>
    </div>
</body>
<script>
    let data = {
        a:12,
        b:13
    };
    let vm = new Vue({
        el:'.app',
        data:data
    });
    //當data.a值改變的時候呼叫回撥函式。
    vm.$watch('a',function (newv , oldb) {
        alert('newv:'+newv+" oldb:"+oldb);
    });
</script>
</html>
vm.$watch 返回一個取消觀察函式，用來停止觸發回撥：

var unwatch = vm.$watch('a', cb)
// 之後取消觀察
unwatch()
選項：deep

為了發現物件內部值的變化，可以在選項引數中指定 deep: true 。注意監聽陣列的變動不需要這麼做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
選項：immediate

在選項引數中指定 immediate: true 將立即以表示式的當前值觸發回撥：

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的當前值觸發回撥

v-once，資料不會再重新整理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
<div class="app">
    不管你怎麼修改input裡面的值，下面的資訊就是不會改變！！！
    <input type="text" v-model="goodMsg"><br>
    <input type="text" v-model="badMsg">
    <div v-once>
        goodMsg：{{goodMsg}}<br>
        badMsg：{{badMsg}}
    </div>
</div>
</body>
<script>
    let data = {
        goodMsg:'加油，你絕不能放棄！！！',
        badMsg:'你不能盲目加油！！！'
    };

    let vm = new Vue({
        el:'.app',
        data:data
    });
</script>
</html>

模板語法

插值

文字

資料繫結最常見的形式就是使用 “Mustache” 語法（雙大括號）的文字插值：
<span>Message: {{ msg }}</span>
Mustache 標籤將會被替代為對應資料物件上 msg 屬性的值。無論何時，繫結的資料物件上 msg 屬性發生了改變，插值處的內容都會更新。
通過使用 v-once 指令，你也能執行一次性地插值，當資料改變時，插值處的內容不會更新。但請留心這會影響到該節點上所有的資料繫結：
<span v-once>這個將不會改變: {{ msg }}</span>

純 HTML

雙大括號會將資料解釋為純文字，而非 HTML 。為了輸出真正的 HTML ，你需要使用 v-html 指令：
<div v-html="rawHtml"></div>
這個 div 的內容將會被替換成為屬性值 rawHtml，直接作為 HTML —— 會忽略解析屬性值中的資料繫結。注意，你不能使用 v-html 來複合區域性模板，因為 Vue 不是基於字串的模板引擎。反之，對於使用者介面(UI)，元件更適合作為可重用和可組合的基本單位。

例項：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-html</title>
    <script src="../res/vue.min.js"></script>
</head>
<body>
    <div class="app">
        <div v-html="xhtml"></div>
    </div>
</body>
<script>
    let data = {
        xhtml:'<div>{{msg}}<br><input type="text" v-model="msg"></div>'
    };
    let vm = new Vue({
        el:".app",
        data:data
    });
</script>
</html>

這裡寫圖片描述

v-bind

動態地繫結一個或多個特性，或一個元件 prop 到表示式。

在繫結 class 或 style 特性時，支援其它型別的值，如陣列或物件。可以通過下面的教程連結檢視詳情。

在繫結 prop 時，prop 必須在子元件中宣告。可以用修飾符指定不同的繫結型別。
示例：

<!-- 繫結一個屬性 -->
<img v-bind:src="imageSrc">
<!-- 縮寫 -->
<img :src="imageSrc">
<!-- 內聯字串拼接 -->
<img :src="'/path/to/images/' + fileName">
<!-- class 繫結 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 繫結 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 繫結一個有屬性的物件 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通過 prop 修飾符繫結 DOM 屬性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 繫結。“prop”必須在 my-component 中宣告。-->
<my-component :prop="someThing"></my-component>
<!-- 通過 $props 將父元件的 props 一起傳給子元件 -->
<child-component v-bind="$props"></child-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

使用 JavaScript 表示式

可以訪問使用者自定義的全域性變數和data屬性還有全域性系統屬性中的資料！！！

迄今為止，在我們的模板中，我們一直都只繫結簡單的屬性鍵值。但實際上，對於所有的資料繫結， Vue.js 都提供了完全的 JavaScript 表示式支援。

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>

這些表示式會在所屬 Vue 例項的資料作用域下作為 JavaScript 被解析。有個限制就是，每個繫結都只能包含單個表示式，所以下面的例子都不會生效。

<!-- 這是語句，不是表示式 -->
{{ var a = 1 }}
<!-- 流控制也不會生效，請使用三元表示式 -->
{{ if (ok) { return message } }}

v-if 控制某個標籤是否顯示

指令（Directives）是帶有 v- 字首的特殊屬性。指令屬性的值預期是單個 JavaScript 表示式（v-for 是例外情況，稍後我們再討論）。指令的職責是，當表示式的值改變時，將其產生的連帶影響，響應式地作用於 DOM。回顧我們在介紹中看到的例子：
<p v-if="seen">現在你看到我了</p>
這裡， v-if 指令將根據表示式 seen 的值的真假來插入/移除 <p> 元素。

引數

一些指令能夠接收一個“引數”，在指令名稱之後以冒號表示。例如，v-bind 指令可以用於響應式地更新 HTML 屬性：

<a v-bind:href="url"></a>

在這裡 href 是引數，告知 v-bind 指令將該元素的 href 屬性與表示式 url 的值繫結。

另一個例子是 v-on 指令，它用於監聽 DOM 事件：

<a v-on:click="doSomething">

在這裡引數是監聽的事件名。我們也會更詳細地討論事件處理。

修飾符

修飾符（Modifiers）是以半形句號 . 指明的特殊字尾，用於指出一個指令應該以特殊方式繫結。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件呼叫 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

之後當我們更深入地瞭解 v-on 與 v-model時，會看到更多修飾符的使用。

過濾器

Vue.js 允許你自定義過濾器，可被用作一些常見的文字格式化。過濾器可以用在兩個地方：mustache 插值和 v-bind 表示式。過濾器應該被新增在 JavaScript 表示式的尾部，由“管道”符指示：

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

由於最初計劃過濾器的使用場景，是用於文字轉換，所以 Vue 2.x 過濾器只能用於雙花括號插值(mustache interpolation)和 v-bind 表示式中（後者在 2.1.0+ 版本支援）。對於複雜資料的轉換，應該使用計算屬性。

過濾器函式總接收表示式的值 (之前的操作鏈的結果) 作為第一個引數。在這個例子中，capitalize 過濾器函式將會收到 message 的值作為第一個引數。

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

過濾器可以串聯：

{{ message | filterA | filterB }}

在這個例子中，filterA 被定義為接收單個引數的過濾器函式，表示式 message 的值將作為引數傳入到函式中，然後繼續呼叫同樣被定義為接收單個引數的過濾器函式 filterB，將 filterA 的結果傳遞到 filterB 中。
過濾器是 JavaScript 函式，因此可以接收引數：

{{ message | filterA('arg1', arg2) }}

這裡，filterA 被定義為接收三個引數的過濾器函式。其中 message 的值作為第一個引數，普通字串 ‘arg1’ 作為第二個引數，表示式 arg2 取值後的值作為第三個引數。

縮寫

v- 字首作為一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 為現有標籤新增動態行為(dynamic behavior)時，v- 字首很有幫助，然而，對於一些頻繁用到的指令來說，就會感到使用繁瑣。同時，在構建由 Vue.js 管理所有模板的單頁面應用程式(SPA - single page application)時，v- 字首也變得沒那麼重要了。因此，Vue.js 為 v-bind 和 v-on 這兩個最常用的指令，提供了特定簡寫：

v-bind 縮寫

<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>

v-on 縮寫

<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>

它們看起來可能與普通的 HTML 略有不同，但 : 與 @ 對於特性名來說都是合法字元，在所有支援 Vue.js 的瀏覽器都能被正確地解析。而且，它們不會出現在最終渲染的標記中。縮寫語法是完全可選的，但隨著你更深入地瞭解它們的作用，你會慶幸擁有它們。

Simple Dream，海賊王 主角 路飛 一直都在說一句話，“海賊王，我當定了！”，現在才知道，這是一個簡單的夢想，然後花盡一切努力去實現它，一個簡單的夢想代表著，他的心沉下去了。

而這也是我現在所需要的，我不能本末倒置，為什麼本末倒置？？？因為，在我夢想還沒實現之前，我不會再想兒女私情，另一方面我不是那種上面能夠壞壞的逗你笑，下面能夠很踏實的撐起整個家的人，並且從你對我的表現上看，我相信，我不是那種能夠取悅你的人！！！世界還很大，去找一個真真懂的人，而不是為你做事，卻成了理所當然！！！

我現在覺得，如果一開始，路就錯了，那就要及時回頭！！！不管失去什麼，我都不能失去夢想！！！

相關文章