【第一季】Vue2.0視訊教程-內部指令(共8集)

阿新 • • 發佈：2018-12-09

很高興你能來學習這套Vue2.0視訊課程，現在越來越多的小公司開始使用Vue來作為前端開發框架了，而且Vue的生態也越來越好，無論你是前端的老手還是新手，都有必要認真並系統的學習，有可能的話儘量在工作中使用它了。

第1節：走起我的Vue2.0

學習這套課程你需要的前置知識：

HTML的基礎知識，你需要達到中級水平，寫前端頁面的結構程式碼完全沒有問題。
CSS的基礎知識，最好做過半年以上的切圖和佈局，最好了解CSS3的知識。

Javascript的基礎知識，對基本語法掌握，這個要求不高，因為遇到難的我會在視訊中講解。
node.js初級知識，只需要會npm的使用和專案初始化就可以了

如果你對上面三個知識還不瞭解，建議不要冒進學習，會影響你的學習熱情。但你已經是科班出身或者在培訓班畢業後想繼續學習，是完全沒有難度的。

學習預期：這套視訊會有很多季，每一季會有幾集構成，像美國的電視劇一樣，從最基礎一直講到專案實戰，你學完這套視訊就可以直接上手專案，也希望你能找到一份不錯的工作。

學習方法：學完視訊之後，一定要動手寫一遍，如果不寫你真的到專案中一定寫錯或者寫不出來，要在學習時就不斷採坑。

下載Vue2.0的兩個版本：

官方網站：

開發版本：包含完整的警告和除錯模式
生產版本：刪除了警告，進行了壓縮

專案結構搭建

這個部分要視訊中有詳細講解。

live-server使用

用npm進行全域性安裝

npm install live-server -g

在專案目錄中開啟

live-server

編寫第一個HelloWorld程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"

></script>
<title>Helloworld</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</script>
</body>
</html>

xml

第2節：v-if v-else v-show 指令

通過上節課的學習，我們已經搭建好了開發環境，並且寫出了一個簡單的HelloWorld程式，我們今天主要學習v-if v-else 和 v-show。其實我們這一季學習的都是Vue2.0的內部指令。

v-if的使用：

v-if:是vue 的一個內部指令，指令用在我們的html中。

v-if用來判斷是否載入html的DOM，比如我們模擬一個使用者登入狀態，在使用者登入後現實使用者名稱稱。

關鍵程式碼：

<div v-if="isLogin">你好，JSPang！</div>

完整html程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-if & v-show & v-else</title>
</head>
<body>
<h1>v-if 判斷是否載入</h1>
<hr>
<div id="app">
<div v-if="isLogin">你好：JSPang</div>
<div v-else>請登入後操作</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
isLogin:false
}
})
</script>
</body>
</html>

xml

這裡我們在vue的data裡定義了isLogin的值，當它為true時，網頁就會顯示：你好：JSPang，如果為false時，就顯示請登入後操作。

2.v-show的使用：

調整css中display屬性，DOM已經載入，只是CSS控制沒有顯示出來。

<div v-show="isLogin">你好：JSPang</div>

v-if 和v-show的區別：

v-if：判斷是否載入，可以減輕伺服器的壓力，在需要時載入。
v-show：調整css dispaly屬性，可以使客戶端操作更加流暢。

第3節：v-for指令：解決模板迴圈問題

v-for指令是迴圈渲染一組data中的陣列，v-for 指令需要以 item in items 形式的特殊語法，items 是源資料陣列並且item是陣列元素迭代的別名。

一、基本用法：

模板寫法

<li v-for="item in items">
{{item}}
</li>

js寫法

var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})

javascript

完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-for 案例</title>
</head>
<body>
<h1>v-for指令用法</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items">
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,54,56,41]
}
})
</script>
</body>
</html>

django

這是一個最基礎的迴圈，先在js裡定義了items陣列，然後在模板中用v-for迴圈出來，需要注意的是，你需要那個html標籤迴圈，v-for就寫在那個上邊。

二、排序

我們已經順利的輸出了我們定義的陣列，但是我需要在輸出之前給陣列排個序，那我們就用到了Vue的computed:屬性。

computed:{
sortItems:function(){
return this.items.sort();
}
}

javascript

我們在computed裡新聲明瞭一個物件sortItems，如果不重新宣告會汙染原來的資料來源，這是Vue不允許的，所以你要重新宣告一個物件。

如果一切順利的話，你已經看到了結果，但是這個小程式還是有個小Bug的，現在我把陣列修改成這樣。

items:[20,23,18,65,32,19,5,56,41]

我們把其中的54修改成了5，我們再看一下結果，發現排序結果並不是我們想要的。

我們可以自己編寫一個方法sortNumber，然後傳給我們的sort函式解決這個Bug。

function sortNumber(a,b){
return a-b
}

用法

computed:{
sortItems:function(){
return this.items.sort(sortNumber);
}
}

css

經過一番折騰，我們終於實現了真正的數字排序，這是在工作中非常常用的，一定要學好，記住。

三、物件迴圈輸出

我們上邊迴圈的都是陣列，那我們來看一個物件型別的迴圈是如何輸出的。

我們先定義個數組，數組裡邊是物件資料

students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]

javascript

在模板中輸出

<ul>
<li v-for="student in students">
{{student.name}} - {{student.age}}
</li>
</ul>

加入索引序號：

//陣列物件方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}

javascript

有了陣列的排序方法，在computed中進行呼叫排序

sortStudent:function(){
return sortByKey(this.students,'age');
}

javascript

注意：vue低版本中 data裡面的items和computed裡面可以一樣，但是高版本，是不允許相同名稱。有很多小夥伴踩到了這個坑，這裡提醒學習的小夥伴，根據自己版本的不同，請修改程式碼。（感謝網友：tannnb的指正）。

第4節：v-text & v-html

我們已經會在html中輸出data中的值了，我們已經用的是{{xxx}},這種情況是有弊端的，就是當我們網速很慢或者javascript出錯時，會暴露我們的{{xxx}}。Vue給我們提供的v-text,就是解決這個問題的。我們來看程式碼：

<span>{{ message }}</span>=<span v-text="message"></span><br/>

如果在javascript中寫有html標籤，用v-text是輸出不出來的，這時候我們就需要用v-html標籤了。

<span v-html="msgHtml"></span>

雙大括號會將資料解釋為純文字，而非HTML。為了輸出真正的HTML，你就需要使用v-html 指令。需要注意的是：在生產環境中動態渲染HTML是非常危險的，因為容易導致XSS攻擊。所以只能在可信的內容上使用v-html，永遠不要在使用者提交和可操作的網頁上使用。完整程式碼：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-text & v-html 案例</title>
</head>
<body>
<h1>v-text & v-html 案例</h1>
<hr>
<div id="app">
<span>{{ message }}</span>=<span v-text="message"></span><br/>
<span v-html="msgHtml"></span>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!',
msgHtml:'<h2>hello Vue!</h2>'
}
})
</script>
</body>
</html>

django

第5節：v-on：繫結事件監聽器

v-on 就是監聽事件，可以用v-on指令監聽DOM事件來觸發一些javascript程式碼。

一、使用繫結事件監聽器，編寫一個加分減分的程式。

程式程式碼

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>v-on事件監聽器</title>
</head>
<body>
<h1>v-on 事件監聽器</h1>
<hr>
<div id="app">
本場比賽得分： {{count}}<br/>
<button v-on:click="jiafen">加分</button>
<button v-on:click="jianfen">減分</button>
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
count:1
},
methods:{
jiafen:function(){
this.count++;
},
jianfen:function(){
this.count--;
}
}
})
</script>
</body>
</html>

django

我們的v-on 還有一種簡單的寫法，就是用@代替。

<button @click="jianfen">減分</button>

我們除了繫結click之外，我們還可以繫結其它事件，比如鍵盤迴車事件v-on:keyup.enter,現在我們增加一個輸入框，然後繫結回車事件，回車後把文字框裡的值加到我們的count上。繫結事件寫法：

<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">

javascript程式碼：

onEnter:function(){
this.count=this.count+parseInt(this.secondCount);
}

javascript

因為文字框的數字會預設轉變成字串，所以我們需要用parseInt()函式進行整數轉換。

你也可以根據鍵值表來定義鍵盤事件：

第6節：v-model指令

這節課強烈建議你看視訊，文字版你可能會看蒙！

v-model指令，我理解為繫結資料來源。就是把資料繫結在特定的表單元素上，可以很容易的實現雙向資料繫結。

一、我們來看一個最簡單的雙向資料繫結程式碼：

html檔案

<div id="app">
<p>原始文字資訊：{{message}}</p>
<h3>文字框</h3>
<p>v-model:<input type="text" v-model="message"></p>
</div>

html

javascript程式碼：

var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})

lasso

二、修飾符

.lazy：取代 imput 監聽 change 事件。
.number：輸入字串轉為數字。
.trim：輸入去掉首尾空格。

三、文字區域加入資料繫結

<textarea < cols="30" rows="10" v-model="message"></textarea>

四、多選按鈕繫結一個值

<h3>多選按鈕繫結一個值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for='isTrue'>{{isTrue}}</label>

五、多選繫結一個數組

<h3>多選繫結一個數組</h3>
<p>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_Names">
<label for="JSPang">JSPang</label><br/>
<input type="checkbox" id="Panda" value="Panda" v-model="web_Names">
<label for="JSPang">Panda</label><br/>
<input type="checkbox" id="PanPan" value="PanPan" v-model="web_Names">
<label for="JSPang">PanPan</label>
<p>{{web_Names}}</p>
</p>

html

六、單選按鈕繫結資料

<h3>單選按鈕繫結</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="one">女</label>
<p>{{sex}}</p>

html

第7節：v-bind 指令

v-bind是處理HTML中的標籤屬性的，例如

就是一個標籤，也是一個標籤，我們繫結上的src進行動態賦值。

html檔案：

<div id="app">
<img v-bind:src="imgSrc" width="200px">
</div>

在html中我們用v-bind:src=”imgSrc”的動態綁定了src的值，這個值是在vue構造器裡的data屬性中找到的。

js檔案：

var app=new Vue({
el:'#app',
data:{
imgSrc:'http://baidu.com/wp-content/uploads/2017/02/vue01-2.jpg'
}
})

lasso

我們在data物件在中增加了imgSrc屬性來供html呼叫。

v-bind 縮寫

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

xml

繫結CSS樣式

在工作中我們經常使用v-bind來繫結css樣式：

在繫結CSS樣式是，繫結的值必須在vue中的data屬性中進行宣告。 1、直接繫結class樣式

<div :class="className">1、繫結classA</div>

2、繫結classA並進行判斷，在isOK為true時顯示樣式，在isOk為false時不顯示樣式。

<div :class="{classA:isOk}">2、繫結class中的判斷</div>

3、繫結class中的陣列

<div :class="[classA,classB]">3、繫結class中的陣列</div>

4、繫結class中使用三元表示式判斷

<div :class="isOk?classA:classB">4、繫結class中的三元表示式判斷</div>

5、繫結style

<div :style="{color:red,fontSize:font}">5、繫結style</div>

6、用物件繫結style樣式

<div :style="styleObject">6、用物件繫結style樣式</div>

var app=new Vue({
el:'#app',
data:{
styleObject:{
fontSize:'24px',
color:'green'
}
}
})

javascript

第8節：其他內部指令(v-pre & v-cloak & v-once)

v-pre指令

在模板中跳過vue的編譯，直接輸出原始值。就是在標籤中加入v-pre就不會輸出vue中的data值了。

<div v-pre>{{message}}</div>

這時並不會輸出我們的message值，而是直接在網頁中顯示{{message}}

v-cloak指令

在vue渲染完指定的整個DOM後才進行顯示。它必須和CSS樣式一起使用，

[v-cloak] {
display: none;
}

<div v-cloak>
{{ message }}
</div>

v-once指令

在第一次DOM時進行渲染，渲染完成後視為靜態內容，跳出以後的渲染過程。

<div v-once>第一次繫結的值：{{message}}</div>
<div><input type="text" v-model="message"></div>

第一季總結：

第一季我們學習了Vue中的指令，這也是Vue中最容易理解的部分，以前我也只是使用Vue，通過這個課程的製作，我也對Vue指令有了全面和更深刻的瞭解。對於小夥伴們的學習，我想說的是，你看完視訊後一定要動手去敲寫程式碼，這樣你才能理解並記住。我們第二季的課程也已經在準備中了，第二季我們將講解Vue的全域性API。

如有侵權請與我聯絡刪除

【第一季】Vue2.0視訊教程-內部指令(共8集)

第1節：走起我的Vue2.0

學習這套課程你需要的前置知識：

下載Vue2.0的兩個版本：

專案結構搭建

live-server使用

編寫第一個HelloWorld程式碼：

第2節：v-if v-else v-show 指令

v-if的使用：

2.v-show的使用：

v-if 和v-show的區別：

第3節：v-for指令 ：解決模板迴圈問題

一、基本用法：

二、排序

三、物件迴圈輸出

第4節：v-text & v-html

第5節：v-on：繫結事件監聽器

第6節：v-model指令

一、我們來看一個最簡單的雙向資料繫結程式碼：

二、修飾符

三、文字區域加入資料繫結

四、多選按鈕繫結一個值

五、多選繫結一個數組

六、單選按鈕繫結資料

第7節：v-bind 指令

v-bind 縮寫

繫結CSS樣式

第8節：其他內部指令(v-pre & v-cloak & v-once)

v-pre指令

v-cloak指令

v-once指令

第一季總結：

相關推薦

第3節：v-for指令：解決模板迴圈問題