快捷導(dǎo)航

vue.js初學(xué)入門教程（1）

更新時間：2016年11月03日 09:02:36 作者：Redchar

這篇文章主要為大家詳細(xì)介紹了vue.js初學(xué)入門教程,具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

0.MVVM

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

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

不太懂也沒關(guān)系，慢慢就懂了。

1.基礎(chǔ)示例

代碼：

<!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: '順風(fēng)車' },

 { text: '出租車' },

 { text: '代駕' }

 ]

 }

 })

 

 </script>

</body>

</html>

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

　　· 定義View

　　· 定義Model

　　· 創(chuàng)建一個Vue實例或"ViewModel"，它用于連接View和Model

2.數(shù)據(jù)綁定

2.1 插值

有時候只需渲染一次數(shù)據(jù)，后續(xù)數(shù)據(jù)變化不再關(guān)心，可以通過“*”實現(xiàn)：

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

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

2.2 表達(dá)式

Mustache標(biāo)簽也接受表達(dá)式形式的值。

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用在組件上時，因為指令的優(yōu)先級v-else會出現(xiàn)問題，可以用另一個v-show替換v-else。

3.1 關(guān)于v-for

　　使用基礎(chǔ)可參看http://m.fzitv.net/article/96364.htm。

　　補充：

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

3.1.1 應(yīng)該盡量避免直接設(shè)置數(shù)據(jù)綁定的數(shù)組元素

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

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

　　$remove是splice的語法糖，用于從目標(biāo)數(shù)組中查找并刪除元素。

demo.item.$remove(item)

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

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

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

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

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

3.1.3 v-for可以和vue.js提供的內(nèi)置過濾器（filterBy）或排序（orderBy）數(shù)據(jù)一起使用

　　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>

當(dāng)我搜破車的時候：

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>