快捷導(dǎo)航

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

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

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

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

0.MVVM

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

ViewModel是Vue.js的核心，它是一個(gè)Vue實(shí)例。

不太懂也沒(méi)關(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: '快車(chē)' },

 { text: '專(zhuān)車(chē)' },

 { text: '順風(fēng)車(chē)' },

 { text: '出租車(chē)' },

 { text: '代駕' }

 ]

 }

 })

 

 </script>

</body>

</html>

使用Vue的過(guò)程就是定義MVVM各個(gè)組成部分的過(guò)程的過(guò)程。

　　· 定義View

　　· 定義Model

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

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

2.1 插值

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

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

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語(yǔ)法>。一般來(lái)說(shuō)，v-if有更高的切換消耗，而v-show有更高的初始渲染消耗。因此，如果需要頻繁地切換，則使用v-show較好；如果在運(yùn)行時(shí)條件不大可能改變，則使用v-if較好。另外，將v-show用在組件上時(shí)，因?yàn)橹噶畹膬?yōu)先級(jí)v-else會(huì)出現(xiàn)問(wèn)題，可以用另一個(gè)v-show替換v-else。

3.1 關(guān)于v-for

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

　　補(bǔ)充：

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

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

　　因?yàn)檫@些變化不會(huì)被Vue.js檢測(cè)到，因而也不會(huì)更新視圖渲染。這時(shí)，我們可以使用$set方法：

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

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

demo.item.$remove(item)

3.1.2 有時(shí)可能需要用全新對(duì)象來(lái)替換數(shù)組

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

　　因?yàn)閖s的限制，Vue.js不能檢測(cè)到下面數(shù)組的變化：

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

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

3.1.3 v-for可以和vue.js提供的內(nèi)置過(guò)濾器（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:'快車(chē)',
 tag:'1'
 },
 {
 name:'慢車(chē)',
 tag:'2'
 },
 {
 name:'好車(chē)',
 tag:'3'
 },
 {
 name:'破車(chē)',
 tag:'4'
 }
 ]
 }
 })
 </script>
 </body>
</html>

當(dāng)我搜破車(chē)的時(shí)候：

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:'快車(chē)',
 tag:'2'
 },
 {
 name:'慢車(chē)',
 tag:'3'
 },
 {
 name:'好車(chē)',
 tag:'1'
 },
 {
 name:'破車(chē)',
 tag:'0'
 }
 ]
 }
 })
 </script>
 </body>
</html>

其他：

　　v-bind指令可以縮寫(xiě)為一個(gè)冒號(hào)，v-on指令可以縮寫(xiě)為@符號(hào)。

　　v-model指令后面可以添加number、lazy、debounce參數(shù)。

Number可以將用戶(hù)的輸入轉(zhuǎn)換為Number類(lèi)型（如果原值的轉(zhuǎn)換結(jié)果為NaN，則返回原值）。
在input中時(shí)添加lazy將數(shù)據(jù)改到在change事件中發(fā)生。
Debounce可設(shè)置延時(shí)。

參考：大神寫(xiě)的：http://www.fzitv.net/article/96426.htm《vue.js權(quán)威指南》

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: