watch監(jiān)聽:
這個(gè)對(duì)象中可以監(jiān)聽到data中屬性的變化,并觸發(fā)屬性對(duì)應(yīng)的function函數(shù),通過newVal和oldVal把值傳遞過來.
watch和keyup事件相比,除了可以監(jiān)聽元素的變化,還可以監(jiān)聽到前端路由的改變.(監(jiān)聽-->
this.$route.path)
computed計(jì)算屬性:
注意:
1.計(jì)算屬性實(shí)際上是個(gè)函數(shù),但是在引用計(jì)算屬性的時(shí)候,要當(dāng)成普通屬性來用.
2.只要計(jì)算屬性這個(gè)函數(shù)內(nèi)引用的任何data中的數(shù)據(jù)發(fā)生變化,就會(huì)立即重新計(jì)算這個(gè)計(jì)算屬性的值.
3.計(jì)算屬性的結(jié)果,會(huì)立即被緩存起來,如果再次引用,并發(fā)現(xiàn)計(jì)算屬性的值沒有發(fā)生過改變,那么不會(huì)觸發(fā)計(jì)算屬性的重新求值.
watch computed methods對(duì)比:
computed和watch 兩個(gè)都是function,但是computed必須要return一個(gè)值,watch可以不返回.
computed屬性的結(jié)果會(huì)被緩存,除非依賴的響應(yīng)式屬性發(fā)生變化才會(huì)重新計(jì)算,主要當(dāng)做屬性來使用.
methods方法表示一個(gè)具體的操作,主要用來寫業(yè)務(wù)邏輯.
watch一個(gè)對(duì)象,鍵是需要觀察的表達(dá)式,值是對(duì)應(yīng)的回調(diào)函數(shù),主要用來監(jiān)聽某些特定數(shù)據(jù)的變化,從而進(jìn)行某些具體的業(yè)務(wù)邏輯操作,可以看成computed和methods的結(jié)合體.
nrm工具介紹:
nrm只是單純的提供了下載包的地址,并能夠讓我們很方便的在這幾個(gè)地址間進(jìn)行切換,但是每次裝包的時(shí)候 使用的裝包工具仍舊是npm
常用命令:
安裝nrm:npm install nrm -g
查看當(dāng)前使用的鏡像源地址:nrm ls
切換不同的鏡像源地址:nrm use taobao(使用淘寶鏡像提供下載)
webpack
webpack是前端的一個(gè)項(xiàng)目構(gòu)建工具,是基于Node.js開發(fā)出來的
是基于整個(gè)項(xiàng)目進(jìn)行構(gòu)建的
import $ from 'jquery'
這句話含義是從當(dāng)前目錄下的node-modules文件夾下找名為jquery的這個(gè)模塊,并導(dǎo)入,以$變量名接收.
由于import是es6的語法,瀏覽器不識(shí)別,此時(shí)需要用webpack進(jìn)行處理
命令格式:webpack 要打包的文件的路徑 打包好的輸出文件的路徑
建議叫bundle.js
webpack作用:
1.webpack能夠處理js文件的互相依賴關(guān)系.
2.webpack能夠處理js的兼容問題,把高級(jí)的 不識(shí)別的語法 轉(zhuǎn)為低級(jí)的,瀏覽器能正常識(shí)別的語法.
可以使用一個(gè)配置文件,默認(rèn)webpack打包命令是采用的文件位置和輸出位置
默認(rèn)文件名:webpack.config.js
這個(gè)配置文件,其實(shí)就是一個(gè)js文件,通過Node中的模塊操作,向外暴露了一個(gè)配置對(duì)象
module.exports={...}
entry:代表入口,指定我們要打包哪個(gè)文件
output:代表出口,指定我們要輸出到哪個(gè)目錄下,以什么名稱來命名.
使用webpack-dev-server來實(shí)現(xiàn)自動(dòng)打包和編譯的功能
他會(huì)監(jiān)聽webpack.config.js中ertry節(jié)點(diǎn)的需要打包的文件變化,然后自動(dòng)進(jìn)行打包構(gòu)建.
1.運(yùn)行webpack-dev-server -D 把這個(gè)項(xiàng)目安裝到項(xiàng)目的本地開發(fā)依賴
2.安裝完畢后,這個(gè)工具的用法和webpack命令一樣
3.由于 我們是在項(xiàng)目中,本地安裝的webpack-dev-server,所以 無法把它當(dāng)做腳本命令,無法在控制臺(tái)中直接運(yùn)行(只有那些安裝到全局 -g 的工具,才能在終端中正常執(zhí)行),可以在package.json文件的scripts這個(gè)節(jié)點(diǎn)中配置我們需要運(yùn)行的命令,只要我們輸入 npm run dev就代表要執(zhí)行這個(gè)命令了,同樣會(huì)執(zhí)行我們的項(xiàng)目構(gòu)建.
4.webpack-dev-server依賴于webpack,強(qiáng)制要求項(xiàng)目本地里要安裝webpack,需要再次安裝
cnpm install webpack -D
在webpack4.X版本之后,需要安裝webpack-cli,為了防止模塊沖突,可以使用下面的版本安裝:
//卸載版本
cnpm uninstall webpack -g
cnpm uninstall -g webpack-dev-server
//安裝指定版本
cnpm install webpack@3.8.0 --save-dev
cnpm install webpack-dev-server@2.9.7 --save-dev
webpack-dev-server控制臺(tái)輸出內(nèi)容:
1.表示項(xiàng)目運(yùn)行到localhost:8080,把項(xiàng)目以服務(wù)器的形式運(yùn)行起來
2.webpack的輸出文件被托管于根目錄,說明頁面在引用bundle.js的時(shí)候要引入根目錄的文件,而不是dist目錄下的
webpack-dev-server 幫我們打包生成的bundle.js文件,并沒有保存在實(shí)際的物理磁盤上,而是 直接托管到了 電腦的內(nèi)存中,看不到,他與dist node_modules平級(jí),我們?cè)陧?xiàng)目根目錄中根本找不到打包好的bundle.js
配置命令的第2種方式:
webpack-dev-server命令常用參數(shù)介紹:
--open 構(gòu)建完成后自動(dòng)打開瀏覽器
--port 80 指定端口
--contentBase 基于那個(gè)目錄打開瀏覽器
--hot 可以實(shí)現(xiàn)熱加載(構(gòu)建的時(shí)候可以實(shí)現(xiàn)部分更新,而不是生成全新的bundle.js文件),頁面不會(huì)刷新,可以異步更新,對(duì)js文件無效.可以用作樣式更新.
配置命令的第2種方式:
可以在webpack.config.js中進(jìn)行配置
需要在webpack.config.js文件中導(dǎo)入webpack模塊
使用html-webpack-plugin,可以把html放入內(nèi)存中
安裝命令cnpm install html-webpack-plugin -D
在webpack.config.js中導(dǎo)入這個(gè)模塊,只要是插件,一定要放到plugins這個(gè)節(jié)點(diǎn)中
這個(gè)插件的兩個(gè)作用:
1.自動(dòng)的在內(nèi)存中根據(jù)指定頁面生成一個(gè)內(nèi)存的頁面
2.自動(dòng)把打包好的bundle.js追加到我們內(nèi)存中的頁面中去.
當(dāng)使用了html-webpack-plugin之后,我們不在手動(dòng)處理bundle.js的引用路徑了,因?yàn)?這個(gè)插件 已經(jīng)幫我們創(chuàng)建了一個(gè)合適的script標(biāo)簽,并且 引用了正確的路徑.
在main.js中導(dǎo)入樣式表
使用import './css/index.css'來導(dǎo)入CSS樣式表
和導(dǎo)入模塊的區(qū)別是:
jquery模塊是標(biāo)準(zhǔn)的js模塊,通過module.exports向外暴露了一個(gè)成員,通過import $ from 'jquery'來接收一下成員
而樣式表沒有暴露任何成員,所以使用import通過路徑把樣式拿過來放在這里(非js模塊使用這種方式).
注意:webpack 默認(rèn)只能打包處理JS類型的文件,無法處理 其他的非 JS類型的文件.
如果要處理 非JS類型的文件,需要手動(dòng)安裝一下 合適的 第三方 loader 加載器.
1.如果想要打包處理css文件,需要安裝 cnpm install style-loader css-loader -D
2.打開webpack.config.js 這個(gè)配置文件,在里面 新增一個(gè)配置節(jié)點(diǎn), module 他是一個(gè)對(duì)象,在這個(gè)module對(duì)象身上,有個(gè)rules屬性 他是個(gè)數(shù)組,這個(gè)數(shù)組里 存放了所有的第三方文件的匹配和處理規(guī)則.
注意:匹配規(guī)則use屬性應(yīng)該為loader,否則還是會(huì)報(bào)webpack打包失敗,需要一個(gè)合適的加載器來處理css
webpack處理第三方文件類型的過程:
1.發(fā)現(xiàn)這個(gè) 要處理的文件不是JS文件 然后就去 配置文件中,查找有沒有對(duì)應(yīng)的第三方 loader規(guī)則.
2.如果能夠找到對(duì)應(yīng)的規(guī)則,就會(huì)調(diào)用對(duì)應(yīng)的loader處理這種文件類型.
3.在調(diào)用loader的時(shí)候,是從后往前調(diào)用的,也就是先調(diào)用css-loader,然后把結(jié)果交給style-loader繼續(xù)處理.
4.當(dāng)最后的一個(gè)loader調(diào)用完畢,會(huì)把處理的結(jié)果,直接交給webpack進(jìn)行打包合并,最終輸出到bundle.js中去.
對(duì)于less類型的,需要安裝less的加載器
安裝cnpm install less-loader -D
他在內(nèi)部依賴less
cnpm install less -D
注意:如果是處理樣式的加載器,那么再配置loader的時(shí)候,必須要有['style-loader','css-loader'],說明后面的特殊加載器把對(duì)應(yīng)的格式處理成普通css,再交給css-loader繼續(xù)處理
