国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

比官方文檔更易懂的Vue.js教程!包你學(xué)會!

DandJ / 523人閱讀

摘要:目前專注前端圖片優(yōu)化與新技術(shù)的探研。還有一點必須要知道的是,是國人寫的,技術(shù)文檔也妥妥的是中文,想到這我就有學(xué)習(xí)的動力。注意到,等都是頁面也可以是組件,接著注冊路由器,然后開始配置路由。

歡迎大家前往騰訊云+社區(qū),獲取更多騰訊海量技術(shù)實踐干貨哦~

本文由蔡述雄發(fā)表于云+社區(qū)專欄

蔡述雄,現(xiàn)騰訊用戶體驗設(shè)計部QQ空間高級UI工程師。智圖圖片優(yōu)化系統(tǒng)首席工程師,曾參與《眾妙之門》書籍的翻譯工作。目前專注前端圖片優(yōu)化與新技術(shù)的探研。

2016年,乃至接下來整個2017年,如果你要問前端技術(shù)框架什么最火,那無疑就是前端三巨頭:React、Angular、Vue。沒錯,什么jQuery,seaJs,gulp等都逐漸脫離了熱點。面試的時候不吹上一點新技術(shù),好像自己就不是搞前端的似的。當(dāng)然,希望大家都是抱著好學(xué)的心來開始一門學(xué)藝的,不管怎樣,求求你,請接著看下去吧~

本系列文將會通過很多一目了然的例子和一個實戰(zhàn)項目——組件庫,來幫助大家學(xué)習(xí)Vue,一步一步來,畢竟這篇文章還有接下來的【升學(xué)篇】和【結(jié)業(yè)篇】呢。

什么是Vue.js

不管你想不想了解,你只需要大概知道,Vue就是和jQuery一樣是一個前端框架,它的中心思想就是數(shù)據(jù)驅(qū)動,像遠(yuǎn)古時代的老前輩jQuery是結(jié)構(gòu)驅(qū)動,什么意思呢,以前我們寫代碼時常用$(".dom").text("我把值改變了"),這種寫法先要獲得結(jié)構(gòu),然后再修改數(shù)據(jù)更新結(jié)構(gòu),而Vue的做法直接就是this.msg="我改變了",然后msg就會同步到某個結(jié)構(gòu)上,視圖管理抽象為數(shù)據(jù)管理,而不是管理dom結(jié)構(gòu)了。不懂沒關(guān)系,慢慢來。

還有一點必須要知道的是,Vue是國人寫的,技術(shù)文檔也妥妥的是中文,想到這我就有學(xué)習(xí)的動力。

搭建環(huán)境

工欲善其事必先利其器,我們的學(xué)習(xí)計劃從學(xué)會搭建Vue所需要的環(huán)境開始,node和npm的環(huán)境不用說是必須的,現(xiàn)在前端流程化很熱門,基本上新的技術(shù)都會在這套流程的基礎(chǔ)上做開發(fā),我們只需要站在巨人的XX上裝*就可以了。我假設(shè)你的機子上已經(jīng)有了最新的node和npm了,那我們就只需要執(zhí)行以下命令:

$ npm install -g vue-cli

構(gòu)建完了之后,隨便進(jìn)入一個我們事先準(zhǔn)備好的目錄,比如demo目錄,然后在目錄中做初始化操作:

$ vue init webpack myProject

webpack參數(shù)是指myProject這個項目將會在開發(fā)和完成階段幫你自動打包代碼,比如將js文件統(tǒng)一合成一個文件,將CSS文件統(tǒng)一合并壓縮等。要是不知道webpack的話,建議先了解下為好,當(dāng)然不了解也不影響我們接著往下走。

init的過程中會問你給項目定義一些描述,版本之類的信息,可以不管,一直輸入y確定跳過,完成之后出現(xiàn)以下界面,紅框部分會提示你接下來要做的操作,按照它的提示繼續(xù)敲代碼就對了。

cd myProject
npm install
npm run dev

npm install 是安裝項目所需要的依賴,簡單理解就是安裝一些必要的插件,需要等一段時間;

npm run dev 是開始執(zhí)行我們的項目了,一旦執(zhí)行這個命令之后,等一小會,瀏覽器應(yīng)該會自動幫你打開一個tab為http://localhost:8080/#/的鏈接,這個鏈接就是我們本地開發(fā)的項目主頁了,如果沒有,說明出錯了。請移步到評論區(qū)回復(fù)吧。。。

(PS:開發(fā)完成后執(zhí)行npm run build會編譯我們的源代碼生成最終的發(fā)布代碼,在dist目錄下)

看看Vue都給我們生成一些什么文件,這其中我們需要關(guān)注的是以下文件

package.json保存一些依賴信息,config保存一些項目初始化配置,build里面保存一些webpack的初始化配置,index.html是我們的首頁,除了這些,最關(guān)鍵的代碼都在src目錄中,index在很多服務(wù)器語言中都是預(yù)設(shè)為首頁,像index.htm,index.php等;打開build目錄中的webpack.base.conf.js,會看到這樣的代碼

說明我們的入口js文件在src目錄中的main.js,接下來我們就分析下這些初始化代碼先;

跟著代碼走

Vue的核心架構(gòu),按照官方解釋和個人理解,主要在于組件和路由兩大模塊,只要理解了這兩大模塊的思想內(nèi)容,剩下API使用就只是分分鐘的事情了。所以在我的系列文中,會圍繞組件和路由教大家開發(fā)一個前端組件庫,這個過程也是我個人學(xué)習(xí)的練手項目,個人覺得一步步做下來之后,對Vue的理解就可以算是出師了,勝過讀10遍書籍文檔,那是后話了,先讓我們看看最基本的Vue生成的默認(rèn)代碼吧!

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue"
import App from "./App"
import router from "./router"

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  template: "",
  components: { App }
})

先是第一句

import Vue from "vue"

這句很好理解,就像你要引入jQuery一樣,vue就是jquery-min.js,然后Vue就是$;然后又引入了./App文件,也就是目錄中和main.js同級的App.vue文件;在Vue中引入文件可以直接用import,文件后綴名可以是.vue,這是Vue自己的文件類型,之前說的webpack會將js和css文件打包,同樣的道理,在webpack中配置vue插件后(項目默認(rèn)配置),webpack就可以將.vue類型的文件整合打包,這和nodeJs中require差不多的道理。

說回App.vue這個文件,這是一個視圖(或者說組件和頁面),想象一下我們的index.html中什么也沒有,只有一個視圖,這個視圖相當(dāng)于一個容器,然后我們往這個容器中放各種各樣的積木(其他組件或者其他頁面),App.vue中的內(nèi)容我們后面說;

import router from "./router"

這句代碼引入一段路由配置,同樣的后邊說(很快就說到的不用急)

接下來的 new Vue實例化,其實就相當(dāng)于平時我們寫js時候常用的init啦,然后聲明el:"#app",意思是將所有視圖放在id值為app這個dom元素中,components表明引入的文件,即上述的App.vue文件,這個文件的內(nèi)容將以這樣的標(biāo)簽寫進(jìn)去#app中,總的來說,這段代碼意思就是將App.vue放到#app中,然后以來指代我們的#app。

import Vue from "vue"
import App from "./App"/*引入App這個組件*/
import router from "./router"/*引入路由配置*/

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: "#app",/*最后效果將會替換頁面中id為app的div元素*/
  router,/*使用路由*/
  template: "",/*告知頁面這個組件用這樣的標(biāo)簽來包裹著,并且使用它*/
  components: { App }/*告知當(dāng)前頁面想使用App這個組件*/
})
單頁面組件

好了,現(xiàn)在打開我們的App.vue文件,在Vue中,官網(wǎng)叫它做組件,單頁面的意思是結(jié)構(gòu),樣式,邏輯代碼都寫在同一個文件中,當(dāng)我們引入這個文件后,就相當(dāng)于引入對應(yīng)的結(jié)構(gòu)、樣式和JS代碼,這不就是我們做前端組件化最想看到的嗎,從前的asp、php也有這樣的文件思想。





node端之所以能識別.vue文件,是因為前面說的webpack在編譯時將.vue文件中的html,js,css都抽出來合成新的多帶帶的文件。

單頁面組件會在后面的實戰(zhàn)中完整體現(xiàn),這里先不做過多描述;

看到我們文件內(nèi)分為三大部分,分別是