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