Vue學習筆記（一）

1、Vue.js介紹

Vue.js也稱爲Vue，讀音相似view，錯誤讀音v-u-e，由華人尤雨溪開源並維護。

Vue有如下特色：

• 是一個構建用戶界面的框架
• 是一個輕量級MVVM（Model-View-ViewModel）框架，和angular、react相似
• 數據驅動+組件化的前端開發（核心思想）
• 經過簡單的API實現響應式的數據綁定和組合的視圖組件
• 更容易上手、小巧

參考：官網文檔

2、第一個vue程序

<div id="main">
    {{msg}}  //字符串模板
</div>

<script src="./js/vue.js"></script>   //引入vue文件
<script>
    new Vue({   //建立vue實例
        el: '#main',  //綁定元素
        data: {
            msg: 'hello Vue.js'
        },
        methods:{  //用於存放方法
        }
    })
</script>

以上就是一個很是簡單的vue程序。綁定元素這裏不但可使用id選擇器，咱們還可使用類選擇器或者標籤選擇器。可是，vue2.0中不容許將vue實例掛在到html或者body元素上。

3、經常使用指令

指令用來擴展HTML功能。vue內置了不少指令。

一、v-model

實現雙向數據綁定，實時監控數據變化，通常用於表單。

<div id="main">
    <input type="text" v-model="content">
    
    <br> {{content}}
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            content: ''
        }
    })
</script>

在這裏，使用v-model指令將輸入框的值與vue實例中的content進行綁定。此後，兩者中的任一值發生變化，另外一個值都會跟隨變化。

二、v-for

用於遍歷數組、對象等。

<div id="main">
    <ul>
        <li v-for="item in arr">  //遍歷數組
            {{item}}
        </li>
    </ul>
    
    <ul>
        <li v-for="item in obj">   //遍歷對象
            {{item}}
        </li>
    </ul>
    
    <ul>      
        <li v-for="(value,key) in obj">   //鍵值循環，數組也適用，注意key在後面
            {{key}}----{{value}}
        </li>
    </ul>
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            arr: [1, 2, 3, 4, 5, 6],
            obj: {
                name: 'hedawei',
                age: 22,
                gender: 'man'
            }
        }
    })
</script>

三、v-on

用於綁定事件，用法：v-on:事件="函數"。

示例：點擊事件

<div id="main">
        <button type="button" v-on:click="showHello()">點擊顯示</button>
        <br>
        {{msg}}
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            msg:''
        },
        methods: {
            showHello() {
                this.msg = 'Hello Vue.js';
            }
        }
    })
</script>

this指向當前vue實例，由此可獲取實例的其餘屬性。除了點擊事件外還有不少其餘事件，具體參考官網API。

四、v-show

用來顯示或隱藏元素，v-show是經過display實現。當v-show的值爲true時顯示，爲false時隱藏。

<div id="main">
    <button type="button" v-on:click="change()">隱藏</button>
    <div style="width:100px;height:100px;background:red" v-show="flag"></div>
</div>

<script src="./js/vue.js"></script>
<script>
    new Vue({
        el: '#main',
        data: {
            flag: true
        },
        methods: {
            change() {
                this.flag = !this.flag;
            }
        }
    })
</script>

4、事件

以前說了一些關於事件的指令，這裏詳細學習一下事件的相關知識。

一、事件簡寫

以前的事件都是這樣的寫法：v-on:click="showHello()"，vue提供了一種簡寫方式：
@click="showHello()"

二、事件對象$event

咱們能夠經過事件對象取得事件相關信息，如事件源、事件類型、偏移量。

下面這個例子經過事件對象取得按鈕的值：

<div id="main">
    <button type="button" @click="print($event)">點擊顯示按鈕的值</button>
        <br> {{msg}}
    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#main',
            data: {
                msg: ''
            },
            methods: {
                print(e) {
                    this.msg = e.target.innerHTML;
                }
            }
        })
    </script>

三、事件冒泡與事件默認行爲

這裏須要討論阻止事件冒泡與阻止默認行爲，原生js阻止事件冒泡首先得取得事件對象，而後調用事件對象的stopPropagation方法。在vue裏，則不須要依賴於事件對象，只須要調用相應的事件修飾符stop便可：

@click.stop = "print()"

阻止事件默認行爲和阻止事件冒泡基本一致，在vue裏也有十分便利的操做方法：

@click.prevent = "print()"

四、鍵盤事件

vue裏內置了一些鍵盤事件，便於開發者操做。語法以下：

@keydown.13 = "print()"
@keydown.enter = "print()"

除了回車事件外，還有不少其餘鍵盤事件，例以下：@keydown.38="print()"。還有一些其餘鍵盤事件，具體參考官方文檔。

默認沒有@keydown.a/b/c...事件，能夠全局自定義鍵盤事件，也稱爲自定義鍵碼或自定義鍵位別名：

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // camelCase 不可用
  mediaPlayPause: 179,
  // 取而代之的是 kebab-case 且用雙引號括起來
  "media-play-pause": 179,
  up: [38, 87]
}

除了stop、prevent、keyCode這些事件修飾符之外，還有一些比較經常使用：

• .native - 監聽組件根元素的原生事件。
• .once - 只觸發一次回調。

5、屬性

vue提供了綁定屬性的方法：v-bind:屬性名=""，這樣咱們便可動態的改變屬性值。

一、屬性簡寫

屬性和事件同樣，也有簡寫方式：:屬性名=""

二、class屬性和style屬性

綁定class和style屬性時的語法比較複雜。

（1）變量形式

html部分：

<p :class="myClass">Hello vue.js</p>

對應的vue的data部分：

data:{
    myClass:className
}

（2）數組形式，同時引入多個類

html部分：
<p :class="[myClass1,myClass2]">Hello vue.js</p>

對應的vue的data部分：

data:{
    myClass1:className1,
    myClass2:className2,
}

（3）json形式（經常使用）

html部分：
<p :class="{className1:true,className2:false}">Hello vue.js</p>

（4）變量引用json形式

html部分：
<p :class="myClass">Hello vue.js</p>

對應的vue的data部分：

data:{
    myClass:{
        className:true
    }
}

style的用法和class的用法基本一致，可是不經常使用。

6、模板

Vue.js使用基於HTML的模板語法，能夠將DOM綁定到Vue實例中的數據。模板就是{{}}，用來進行數據綁定，顯示在頁面中，也稱爲Mustache語法。

一、數據綁定的方式

（1）雙向數據綁定

使用v-model指令，前面已經學習過。

（2）單向數據綁定

a.使用兩對大括號{{}}

這個在以前也常用，可是有一個缺點，就是vue實例須要長時間編譯時會在頁面中出現{{}}（閃爍現象）。vue提供了一個解決辦法：使用v-cloak配合css。

//html內容
<div id="app" v-cloak>
  {{msg}}
</div>

//css內容
[v-cloak] {
 display: none;
}

b.使用指令v-text、v-html

v-text也可達到與使用v-cloak相同的效果。

//html內容
<div id="app" v-text="msg">
</div>

v-html會將文本中的html解析爲html標籤，而後渲染到頁面中。

//html內容
<div id="app" v-html="msg">
</div>

//vue實例中data部份內容
 data: {
    msg: 'hello<mark>vue.js<mark>'
 },

這裏的vue.js會有一個黃色的背景顏色。

7、過濾器

過濾器用來過濾模型數據，在顯示以前進行數據處理和篩選。語法：{{ data | filter1(參數) | filter2(參數)}}。

vue1.0中內置了不少過濾器，可是在2.0中所有刪除了。使用過濾器咱們能夠經過使用第三方庫：lodash、date-fns日期格式化、accounting.js貨幣格式化。或者咱們能夠自定義過濾器。

一、自定義過濾器

過濾器分爲全局過濾器和局部過濾器。

（1）全局過濾器

使用全局方法Vue.filter(過濾器ID,過濾器函數)。

示例：

<p>{{8|addZero}}</p>//數據會自動做爲傳過去

 Vue.filter('addZero', data => {
    return data > 10 ? data : '0' + data;
 });

有時過濾器也要傳遞本身的參數：

<p>{{12.3456|number(3)}}</p>

 Vue.filter('number', (data,n) => {
    return data.toFixed(n);
 });

（2）局部過濾器

局部過濾器的使用方法與全局過濾器的使用方法一致。

不過過濾器寫在vue實例中filters選項中。

new Vue({
    el:'#app',
    data:{},
    filters:{
        number:data => {
            //具體操做
        }
    }
})

未完待續。