Vue——B站黑马程序员教程
Vue.js學習筆記
- 一、基礎(chǔ)
- (一)安裝
- (二)介紹
- (三)Vue實例
- (四)插值表達式
- 花括號
- 插值閃爍
- v-text 和 v-html
- (五)class 與 style 綁定(v-bind)
- (六)條件渲染(v-show/v-if)
- v-if
- v-show
- v-if ? VS ? v-show
- (七)列表渲染(v-for)
- (八)事件處理(v-on)
- v-on的事件修飾符
- 按鍵修飾符
- (九)表單輸入綁定(v-model)
- v-model 修飾符
- 二、組件
- (一)組件基礎(chǔ)
- (二)組件的創(chuàng)建
- 組件中style標簽lang屬性和scoped屬性
- 三、過渡 & 動畫
- 四、路由
- (一)什么是路由
- (二)vue-router的基本使用
- 五、webpack
- (一)概念引入
- (二)基本使用
- (三)使用 webpack-dev-server 實現(xiàn)自動打包編譯
- (四)webpack-dev-server 常用的命令參數(shù)
- (五)第三方 loader 處理 css 樣式
- (六)使用 html-webpack-plugin 插件配置啟動頁面
- 六、過濾器
- 七、nrm的安裝使用
- 最后:Vue屬性、方法、指令總結(jié)
一、基礎(chǔ)
(一)安裝
直接用 < script> 引入
直接下載并用 < script> 標簽引入,Vue 會被注冊為一個全局變量。
使用CDN方法
建議開發(fā)時使用開發(fā)環(huán)境版本,發(fā)布時使用生產(chǎn)環(huán)境版本。
NPM
(二)介紹
構(gòu)建用戶界面:用vue往html頁面中填充數(shù)據(jù),非常的方便
- m 是vue實例中的data,自定義的數(shù)據(jù)或后端返回的數(shù)據(jù)。不是mvc里的model,概念不同
- vm是vue的實例,是m和v之間的調(diào)度者,所以vm是MVVM思想的核心
- v是html頁面
- 數(shù)據(jù)驅(qū)動視圖
數(shù)據(jù)的變化會驅(qū)動視圖自動更新
好處:程序員只需要把數(shù)據(jù)維護好,那么頁面結(jié)構(gòu)就會被vue自動渲染出來 - 雙向數(shù)據(jù)綁定
在頁面中,form表單負責采集數(shù)據(jù),Ajax負責提交數(shù)據(jù)
js數(shù)據(jù)的變化,會被自動渲染到頁面上
頁面上表單采集的數(shù)據(jù)發(fā)生變化的時候,會被vue自動獲取到,并更新到j(luò)s數(shù)據(jù)中
注意:數(shù)據(jù)驅(qū)動視圖和雙向數(shù)據(jù)綁定的底層原理是MVVM。
(三)Vue實例
每個 Vue 應(yīng)用都是通過用 Vue 函數(shù)創(chuàng)建一個新的 Vue 實例開始的:
var vm = new Vue({// 選項 })當一個 Vue 實例被創(chuàng)建時,它將 data 對象中的所有的 property 加入到 Vue 的響應(yīng)式系統(tǒng)中。當這些 property 的值發(fā)生改變時,視圖將會產(chǎn)生“響應(yīng)”,即匹配更新為新的值。
生命周期及生命周期鉤子圖示
(四)插值表達式
花括號
數(shù)據(jù)綁定最常見的形式就是使用“Mustache”語法 (雙大括號) 的文本插值:
{{ 表達式 }}說明:
- 該表達式支持JS語法,可以調(diào)用js內(nèi)置函數(shù)(必須有返回值)
- 表達式必須有返回結(jié)果,例如 1 + 1;沒有結(jié)果的表達式不允許使用,如:var a = 1 + 1;
- 可以直接獲取Vue實例中定義的數(shù)據(jù)或函數(shù)
插值閃爍
使用{{ }}方式在網(wǎng)速較慢時會出現(xiàn)問題。在數(shù)據(jù)未加載完成時,頁面會顯示出原始的{{ }},加載完畢后才顯示正確數(shù)據(jù),我們稱為插值閃爍。
v-text 和 v-html
可以使用v-text和v-html指令來替代 {{ }}。
- v-text:將數(shù)據(jù)輸出到元素內(nèi)部,如果輸出的數(shù)據(jù)有HTML代碼,會作為普通文本輸出
- v-html:將數(shù)據(jù)輸出到元素內(nèi)部,如果輸出的數(shù)據(jù)有HTML代碼,會被渲染
v-text 和 v-html 都不會出現(xiàn)插值閃爍問題,當沒有數(shù)據(jù)時,頁面會顯示空白。
(五)class 與 style 綁定(v-bind)
是Vue中提供的用于綁定屬性的指令(屬性綁定機制)。
v-bind 中,可以寫合法的表達式。
(六)條件渲染(v-show/v-if)
v-if
v-show
另一個用于根據(jù)條件展示元素的選項是 v-show 指令。用法大致一樣。
不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM 中。v-show 只是簡單地切換元素的 CSS property display。
【注】v-show 不支持 <template> 元素,也不支持 v-else。
v-if ? VS ? v-show
- v-if有更高的切換開銷;v-show有更高的初始渲染開銷。
- 如果要非常頻繁的切換,則使用v-show較好;如果在運行時條件不太可能改變,則v-if較好。
(七)列表渲染(v-for)
可以用 v-for 指令基于一個數(shù)組來渲染一個列表。語法:v-for = "item in items"
v-for 還支持一個可選的第二個參數(shù),即當前項的索引。語法:v-for="(item, index) in items"
- in 后面可以放普通數(shù)組、對象數(shù)組、對象、還可以放數(shù)字。
- 也可以用 of 替代 in 作為分隔符。如果使用 v-for 迭代數(shù)字的話, count值從1開始。
- 也可以用 v-for 來遍歷一個對象的 property。v-for="(value, name, index) in object"
建議盡可能在使用 v-for 時提供 key attribute,key屬性只能使用 number 或者 string。key在使用的時候,必須使用v-bind屬性綁定的形式來指定key的值。
在組件上使用v-for:
2.2.0+ 的版本里,當在組件上使用 v-for 時, key 現(xiàn)在是必須的。
(八)事件處理(v-on)
v-on 指令用于監(jiān)聽 DOM 事件,并在觸發(fā)時運行一些 JavaScript 代碼。
v-on的事件修飾符
- .stop
防止事件冒泡。
冒泡事件:嵌套兩三層父子關(guān)系,然后所有都有點擊事件,點擊子節(jié)點,就會觸發(fā)從內(nèi)至外的點擊事件 - .prevent
防止執(zhí)行預(yù)設(shè)的行為(如果事件可取消,則取消該事件,而不停止事件的進一步傳播) - .capture
使用事件捕獲模式。與事件冒泡的方向相反,即元素自身觸發(fā)的事件先在此處處理,然后才交由內(nèi)部元素進行處理。 - .self
只會觸發(fā)自己范圍內(nèi)的事件,不包含子元素 - .once
事件只會觸發(fā)一次 - .passive
這個修飾符會執(zhí)行默認方法,即告訴瀏覽器你不想阻止事件的默認行為。
passive和prevent沖突,不能同時綁定在一個監(jiān)聽器上,如果一起使用,.prevent將會被忽略。
.stop 和 .self 的區(qū)別
.self 只會阻止自己身上冒泡行為的觸發(fā),并不會真正阻止冒泡行為。
按鍵修飾符
- .enter:回車鍵
- .tab:制表鍵
- .delete:含delete和backspace鍵
- .esc:返回鍵
- .space: 空格鍵
- .up:向上鍵
- .down:向下鍵
- .left:向左鍵
- .right:向右鍵
(九)表單輸入綁定(v-model)
v-bind 只能實現(xiàn)數(shù)據(jù)的單向綁定,從 M 自動綁定到 V,無法實現(xiàn)數(shù)據(jù)的雙向綁定。
v-model 指令可以實現(xiàn)表單元素和 Model 中數(shù)據(jù)的雙向綁定。
- input
- radio
- select
- checkbox
- textarea
- components(Vue中的自定義組件)
【注】v-model只能運用在表單元素中
v-model 修飾符
-
.lazy
<input v-model.lazy="msg">
默認情況下,v-model同步輸入框的值和數(shù)據(jù)。可以通過這個修飾符,轉(zhuǎn)變?yōu)閏hange事件再同步。 -
.number
<input v-model.number="age">
自動將用戶的輸入值轉(zhuǎn)化為數(shù)值類型。 -
.trim
<input v-model.trim="msg">
自動過濾用戶輸入的首尾空白字符。
二、組件
寫得很不錯的一篇總結(jié),具體的看這里復習吧。
(一)組件基礎(chǔ)
組件的出現(xiàn),就是為了拆分Vue實例的代碼量的,能夠讓我們以不同的組件,來劃分不同的功能模塊,將來我們需要什么樣的功能,就可以調(diào)用對應(yīng)的組件即可。
模塊化 VS 組件化
- 模塊化:是從代碼邏輯的角度進行劃分的;方便后臺代碼的分層開發(fā),保證每個功能模塊的職能單一。
- 組件化:是從UI界面的角度進行劃分的;前端的組件化,方便UI組件的重用
通過template屬性,指定了組件要展示的HTML內(nèi)容
如果使用Vue.component 定義全局組件的時候,組件使用了駝峰命名,則在引用組件的時候,需要把大寫的駝峰改成小寫的字母,同時,兩個單詞之間使用-連接。如果不使用駝峰,則直接拿名稱來用即可。
組件可以有自己的 data 數(shù)據(jù)。與實例中的data不同的是,實例中的data可以為一個對象,但組件中的data必須是一個方法,而且這個方法內(nèi)部還必須返回一個對象。組件中的data使用方式,和實例中data使用方式完全一樣。
Vue提供了 component,來展示對應(yīng)名稱的組件
<!-- component 是一個占位符,:is 屬性 可以用來指定要展示的組件的名稱 --> <component :is="'componentId'"></component>父組件向子組件傳遞方法,使用的是事件綁定機制 v-on
(二)組件的創(chuàng)建
組件中style標簽lang屬性和scoped屬性
三、過渡 & 動畫
四、路由
(一)什么是路由
(二)vue-router的基本使用
怎么安裝就找了老半天,原來是要用 ctrl + s (微笑)
參考
五、webpack
(一)概念引入
js、css、Images、字體文件(Fonts)、模板文件
? 網(wǎng)頁加載速度慢,因為我們要發(fā)起很多的二次請求
? 要處理錯綜復雜的依賴關(guān)系
? 合并、壓縮、精靈圖、圖片的Base64編碼
? 可以使用requireJS,也可以使用webpack解決各個包之間復雜的依賴關(guān)系
webpack是前端的一個項目構(gòu)建工具,它是基于Node.js 開發(fā)出來的一個前端工具
? webpack 能夠處理 JS 文件的互相依賴關(guān)系;
? webpack 能夠處理 JS 的兼容問題,把高級的、瀏覽器不識別的語法,轉(zhuǎn)為低級的、瀏覽器能正常識別的語法。
(二)基本使用
命令格式: webpack 要打包的文件的路徑 打包好的輸出文件的路徑
這樣
const path = require('path') module.exports = {entry: path.join(__dirname,'./src/main.js'), //入口,表示要使用webpack打包哪個文件output:{ //輸出文件的相關(guān)配置path:path.join(__dirname, './dist'), //指定打包好的文件要輸出到哪個文件目錄中去filename:'bundle.js' //指定輸出文件的名稱} }- 當我們在控制臺直接輸入 webpack 命令執(zhí)行的時候, webpack 做了以下幾步:
- 首先, webpack 發(fā)現(xiàn),我們并沒有通過命令的形式,給它指定入口和出口
- webpack 就會去項目的根目錄中,查找一個叫做 ‘webpack.config.js’ 的配置文件
- 當找到配置文件后, webpack 會去解析執(zhí)行這個配置文件,當解析執(zhí)行完配置文件后,就得到了配置文件中導出的配置對象
- 當 webpack 拿到配置對象后,就拿到了配置對象中指定的入口和出口,然后進行打包構(gòu)建
(三)使用 webpack-dev-server 實現(xiàn)自動打包編譯
(就還挺麻煩的。。。)
(四)webpack-dev-server 常用的命令參數(shù)
(五)第三方 loader 處理 css 樣式
webpack 默認只能打包處理 JS 類型的文件,無法處理其他的非 js 類型的文件。
如果非要處理非 JS 類型的文件,我們需要手動安裝一些合適的 loader 加載器。
(六)使用 html-webpack-plugin 插件配置啟動頁面
由于使用 --contentBase 指令的過程比較繁瑣,需要指定啟動的目錄,同時還需要修改 index.html 中的 script 標簽的src屬性,所以推薦大家使用 html-webpack-plugin 插件配置來啟動頁面。
(半途而廢的筆記)
六、過濾器
vue.js允許自定義過濾器,可以被用作一些常見的文本格式((也就是修飾文本,但是文本內(nèi)容不會改變))。
過濾器可以用在兩個地方:雙花括號插值和 v-bind 表達式。過濾器應(yīng)該被添加在 JavaScript 表達式的尾部,由“管道”符號指示。
更詳細的
七、nrm的安裝使用
- 運行 ‘npm i nrm -g’ 全局安裝 ‘nrm’ 包
- 使用 ‘nrm ls’ 查看當前所有可用資源
- 使用 ‘nrm use npm’ 或 ‘nrm use taobao’ 切換不同的鏡像源地址
【注】nrm只是單純的提供了幾個常用的下載包的 URL 地址,并能夠讓我們在這幾個地址中方便的進行切換。但是,我們每次裝包的時候,使用的裝包工具都是 npm
最后:Vue屬性、方法、指令總結(jié)
點擊移步
總結(jié)
以上是生活随笔為你收集整理的Vue——B站黑马程序员教程的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vue-cli 3.0
- 下一篇: Halcon例程详解(基于卡尺工具的匹配