vue.js初學入門教程（1）

2019-11-20 08:36:22

字體：大中小

來源：轉載

供稿：網友

Vue.js是當下很火的一個JavaScript MVVM庫，它是以數據驅動和組件化的思想構建的。相比于Angular.js，Vue.js提供了更加簡潔、更易于理解的API，使得我們能夠快速地上手并使用Vue.js。

0.MVVM

　　什么是MVVM？就是Model-View-ViewModel。

ViewModel是Vue.js的核心，它是一個Vue實例。

不太懂也沒關系，慢慢就懂了。

1.基礎示例

代碼：

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title></head><body><div id="didi-navigator"> <ul> <li v-for="tab in tabs"> {{ tab.text }} </li> </ul> </div> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> new Vue({ el: '#didi-navigator', data: { tabs: [ { text: '巴士' }, { text: '快車' }, { text: '專車' }, { text: '順風車' }, { text: '出租車' }, { text: '代駕' } ] } })  </script></body></html>

使用Vue的過程就是定義MVVM各個組成部分的過程的過程。

　　? 定義View

　　? 定義Model

　　? 創建一個Vue實例或"ViewModel"，它用于連接View和Model

2.數據綁定

2.1 插值

有時候只需渲染一次數據，后續數據變化不再關心，可以通過“*”實現：

雙大括號標簽會把里面的值全部當作字符串來處理，如果值是HTML片段，則可以使用三個大括號來綁定：

Logo: ‘<span>DDFE</span>'

2.2 表達式

Mustache標簽也接受表達式形式的值。

3.指令（上）

v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令
v-model指令

　　v-if：是否渲染。

　　v-show：肯定渲染，是否顯示。

　　其中，v-show不支持<template語法>。一般來說，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁地切換，則使用v-show較好；如果在運行時條件不大可能改變，則使用v-if較好。另外，將v-show用在組件上時，因為指令的優先級v-else會出現問題，可以用另一個v-show替換v-else。

3.1 關于v-for

　　使用基礎可參看//www.49028c.com/article/96364.htm。

　　補充：

　　Vue.js增加了兩個方法觀測變化：$set、$remove。

3.1.1 應該盡量避免直接設置數據綁定的數組元素

　　因為這些變化不會被Vue.js檢測到，因而也不會更新視圖渲染。這時，我們可以使用$set方法：

demo.item.$set(0,{childMsg:'Changed!'})

　　$remove是splice的語法糖，用于從目標數組中查找并刪除元素。

demo.item.$remove(item)

3.1.2 有時可能需要用全新對象來替換數組

　　Vue.js應盡可能地復用已有實例。如果沒有唯一的鍵供追蹤，則可以使用track-by=”$index”，它強制讓v-for進入原位更新模式：片段不會被移動，而是簡單地以對應索引的新值刷新。這時DOM節點不再映射數組元素順序的改變，不能同步臨時狀態（比如<input>元素的值），以及組件的私有狀態。

　　因為js的限制，Vue.js不能檢測到下面數組的變化：

直接用索引設置元素，如vm.items[0]={}。
修改數據的長度，如vm.items.length = 0。

　　前一個問題可用$set解決，后一個問題只需用一個空數組替換items即可。

3.1.3 v-for可以和vue.js提供的內置過濾器（filterBy）或排序（orderBy）數據一起使用

　　filterBy的例子：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input v-model="searchText" /> <ul> <li v-for="user in users | filterBy searchText in 'name'">{{user.name}}</li> </ul> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var haha = new Vue({ el:'body', data:{ users:[ { name:'快車', tag:'1' }, { name:'慢車', tag:'2' }, { name:'好車', tag:'3' }, { name:'破車', tag:'4' } ] } }) </script> </body></html>

當我搜破車的時候：

orderBy的例子：

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <ul> <li v-for="user in users | orderBy field reverse">{{user.name}}</li> </ul> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var demo = new Vue({ el:'body', data:{ field:'tag', reverse:false, // 顛倒 users:[ { name:'快車', tag:'2' }, { name:'慢車', tag:'3' }, { name:'好車', tag:'1' }, { name:'破車', tag:'0' } ] } }) </script> </body></html>