vue.js入門(一)
第一章 什麼是vue.js
vue.js是目前很火的一個前端框架,react是最流行的一個前端框架,(React除了開發網站,還可以開發手機APP,Vue語法也是可以用於進行手機App開發的,需要藉助於Weex)
vue.js是前端的主流框架之一,和angular.js,reac.js一起,並稱為前端三大主流框架.
vue.js是一套構建使用者介面的框架,只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合.
前端的主要工作?主要負責MVC中的V這一層;主要工作就是和介面打交道,來製作前端頁面效果.
學習前端框架能提高開發效率
提高開發效率的發展歷程:原生JS->Jquery之類的類庫->前端引擎模板->angular.js/vue.js
在Vue中,一個核心的概念,就是讓使用者不再操作DOM元素,解放了使用者的雙手,讓程式設計師有更多的時間去關注業務邏輯
1.1 框架和庫的區別
框架:是一套完整的解決方案,對專案的侵入性比較大,專案如果需要更換框架,需要重新架構整個專案.
庫:提供一個小功能,對專案的入侵性較小,如果某個庫無法完成某些需求,可以很容易進行切換.
1.從jquery切換到zepto
2.從ejs切換到art-template
1.2 MVC和MVVM的關係圖解
MVC是後端的分層開發的概念;
View指的是檢視,model指的是對資料庫的操作,c就是路由加上controller.
MVVM是前端檢視層的概念,主要是關注於檢視層分離,也就是說:MVVM把前端的檢視層分為了三部分Model,View,VM ViewModel
M修改了要傳入到V中,V中修改了資料要傳到M中,不能直接傳,要通過VM才行.
1.3 vue基本程式碼和MVVM之間對應關係
首先導包,當匯入包之後,在瀏覽器的記憶體中,就多了一個Vue的建構函式,基本模板就是下圖
更改EL,新增data
第二章 指令的使用
2.1 v-cloak
當我們網速比較慢的時候,請求資源的時候會將我們的程式碼顯示在網頁上,然後請求到vue.js之後才會將data中的資料進行顯示,這個叫做閃爍問題,如果我們不希望客戶看到我們的程式碼,可以加上v-cloak
2.2 v-text
v-text是沒有閃爍問題的.
msg:123
2.3 v-html
如果我們想在訊息中放入html標籤,{{}}與v-text都將失效,需要用v-html.
2.4 v-bind指令的學習
當我們想在按鈕上使用訊息時,需要用v-bind,如果直接寫的話,會將我們的data的key值直接當字串進行渲染.下圖就是當成了字串進行渲染
我們需要告訴它是一個變數
其實是將字串中的內容當作表示式來進行使用,所以我們加上'123'也是可以的.
我們可以直接寫個冒號,當作v-bind來使用
2.5 v-on指令
v-on提供了事件繫結機制,縮寫是@
也有一些其它的事件:比如v-on:mouseover事件
2.6 事件修飾符介紹
.stop和.self雖然都會阻止冒泡.但是.self是僅僅阻止了自己的,.stop是阻止了後續所有的.
點選按鈕時會彈出兩個事件
2.6.1 .stop事件修飾符
可以阻止冒泡,
2.6.2 .prevent事件修飾符
這裡我們只想觸發方法,不想去觸發事件,可以用prevent
2.6.3 .capture事件修飾符
使用捕獲機制來觸發事件,我們正常的是從裡往外,即點選按鈕觸發後面的div,這個是從外往裡觸發事件,即點選外面的div觸發按鈕.
2.6.4 .selft事件修飾符
只點擊我自己才觸發事件,不管冒泡和捕獲
2.6.5 .once事件修飾符
事件只觸發一次
事件修飾符可以串聯的,比如下圖,第一次點選不會觸發預設行為,第二次點就會觸發預設行為.先後沒關係
2.7 v-model指令
這是唯一的指令可以實現雙向資料繫結的,此指令只能在表單元素中使用
2.8 在Vue中使用樣式
下圖是普通的使用方式
第一種使用方式:
第二種使用方式:
第三種使用方式:
第四種使用方式:
使用內聯樣式:
如果屬性有橫槓-,則必須使用引號
第一種使用方式:
第二種使用方式:
將內聯樣式移動到data中
第三種使用方式:
使用陣列
2.9 v-for指令
for迴圈普通陣列:
for迴圈物件陣列:
for迴圈遍歷物件:
for迴圈迭代數字:
從1開始
注意事項:
當迴圈的不指定key時,系統不知道你指定的是哪一項,可能會出錯,key的型別必須為number或者string
2.10 v-if與v-show指令
第三章 小例子
3.1 跑馬燈效果製作
當我們要在函式中使用this時,會遇到到底這個this是用在函式中的this,還是用在Vue中的this,來讓我們呼叫自己的資料的.用ES6中的箭頭函式可以很好的解決這一點,這代表this就是Vue中的this了,用來引用Vue的資料或方法.
為了避免連續的啟動定時器,我們在data中儲存資料id
