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)境版本。

<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生產(chǎn)環(huán)境版本，優(yōu)化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>

NPM

（二）介紹

Vue.js（讀音 /vju?/, 類似于 view） 是一套構(gòu)建用戶界面的漸進式框架。
構(gòu)建用戶界面：用vue往html頁面中填充數(shù)據(jù)，非常的方便

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數(shù)據(jù)渲染進 DOM 的系統(tǒng)。

它專注于MVVM模型的ViewModel層，通過雙向數(shù)據(jù)綁定把View層和Model層鏈接起來。

• m 是vue實例中的data，自定義的數(shù)據(jù)或后端返回的數(shù)據(jù)。不是mvc里的model，概念不同
• vm是vue的實例，是m和v之間的調(diào)度者，所以vm是MVVM思想的核心
• v是html頁面

vue的兩個特征：

• 數(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-bind:屬性名=表達式

簡寫的話可以省略v-bind，只保留 :屬性名=表達式

如果需要動態(tài)的增刪class，建議使用對象的方式

（六）條件渲染（v-show/v-if）

v-if

v-if指令的作用是：根據(jù)表達式的真假切換元素的顯示狀態(tài)

本質(zhì)是通過操縱dom元素來切換顯示狀態(tài)

若表達式的值為true，則元素存在于dom樹中；若為false，則從dom樹中刪除

頻繁切換的元素用v-show，反之用v-if。因為操作dom樹對性能的消耗比較大

v-show

另一個用于根據(jù)條件展示元素的選項是 v-show 指令。用法大致一樣。

v-show指令的作用是：根據(jù)真假切換元素的顯示狀態(tài)

原理是修改元素的display，實現(xiàn)顯示隱藏

指令后面的內(nèi)容，最終都會解析為布爾值。值為true則元素顯示，為false則元素隱藏
不同的是帶有 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的值。

<div v-for="item in items" v-bind:key="item.id"><!-- 內(nèi)容 --> </div>

在組件上使用v-for：
2.2.0+ 的版本里，當在組件上使用 v-for 時， key 現(xiàn)在是必須的。

（八）事件處理（v-on）

v-on指令的作用是：為元素綁定事件

事件名不需要寫on

指令可以簡寫為@

綁定的方法定義在methods屬性中

方法內(nèi)部通過this關(guān)鍵字可以訪問定義在data中的數(shù)據(jù)
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
  默認情況下，v-model同步輸入框的值和數(shù)據(jù)。可以通過這個修飾符，轉(zhuǎn)變?yōu)閏hange事件再同步。

  <input v-model.lazy="msg">

• .number
  自動將用戶的輸入值轉(zhuǎn)化為數(shù)值類型。

  <input v-model.number="age">

• .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組件中，為了使樣式私有化（模塊化），不對全局造成污染，可以在style標簽上添加scoped屬性以表示它的只屬于當下的模塊

普通的style標簽只支持普通的樣式，如果想要啟用scss或less，需要為style元素設(shè)置lang屬性

三、過渡 & 動畫

四、路由

（一）什么是路由

前端路由：對于普通網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對應(yīng)服務(wù)器上對應(yīng)的資源；

后端路由 ：對于單頁面應(yīng)用程序來說，主要通過URL中的hash(#號)來實現(xiàn)不同頁面的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關(guān)的內(nèi)容，所以，單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)。

在單頁面應(yīng)用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區(qū)別于后端路由）

URL中的hash

（二）vue-router的基本使用

安裝
怎么安裝就找了老半天，原來是要用 ctrl + s （微笑）
參考

五、webpack

（一）概念引入

在網(wǎng)頁中有哪些靜態(tài)資源？
js、css、Images、字體文件（Fonts）、模板文件

網(wǎng)頁中引入的靜態(tài)資源多了以后有什么問題？
? 網(wǎng)頁加載速度慢，因為我們要發(fā)起很多的二次請求
? 要處理錯綜復雜的依賴關(guān)系

如何解決上述的兩個問題？
? 合并、壓縮、精靈圖、圖片的Base64編碼
? 可以使用requireJS，也可以使用webpack解決各個包之間復雜的依賴關(guān)系

什么是webpack？
webpack是前端的一個項目構(gòu)建工具，它是基于Node.js 開發(fā)出來的一個前端工具

webpack可以做什么？
? 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)自動打包編譯

運行 npm i webpack-dev-server -D 把這個工具安裝到項目的本地開發(fā)依賴

安裝完畢后，這個工具的用法和 webpack 工具的用法完全一樣

由于我們是在項目中本地安裝的 webpack-dev-server ，所以無法把它當作腳本命令，在 powershell 終端中直接運行；（只有那些安裝到 -g 的工具才能在終端中正常執(zhí)行

注意，webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中必須安裝 webpack

webpack-dev-server 幫我們打包生成的 bundle.js 文件，并沒有存放到實際的物理磁盤上，而是直接托管到了電腦的內(nèi)存中，所以，我們在項目根目錄中，根本找不到這個打包好的 bundle.js（放到內(nèi)存中的目的：快）

我們可以認為 webpack-dev-server 把它打包好的文件以一種虛擬的形式，托管到了我們項目的根目錄中，雖然我們看不但它，但是可以認為和 dist src node_modules 平級，有一個看不見的文件叫做 bundle.js

(就還挺麻煩的。。。)

（四）webpack-dev-server 常用的命令參數(shù)

停止項目操作的快捷鍵：ctrl + c

–open 自動打開瀏覽器

–port 設(shè)置啟動時候的運行窗口

–contentBase 指定托管的跟目錄

–hot啟用熱更新

（五）第三方 loader 處理 css 樣式

webpack 默認只能打包處理 JS 類型的文件，無法處理其他的非 js 類型的文件。
如果非要處理非 JS 類型的文件，我們需要手動安裝一些合適的 loader 加載器。

如果只想要打包處理 css 文件，需要安裝 cnpm i style-loader css-loader -D；

打開 webpack.config.js 這個配置文件，在里面新增一個配置節(jié)點，叫做 module，它是一個對象，在這個module對象身上，有個 rules 屬性是個數(shù)組，在這個數(shù)組中存放了所有第三方文件的匹配和處理規(guī)則。

（六）使用 html-webpack-plugin 插件配置啟動頁面

由于使用 --contentBase 指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改 index.html 中的 script 標簽的src屬性，所以推薦大家使用 html-webpack-plugin 插件配置來啟動頁面。

運行 cnpm i html-webpack-plugin --save-dev 安裝到開發(fā)環(huán)境依賴

修改 webpack.config.js 配置文件如下：
（半途而廢的筆記）

六、過濾器

vue.js允許自定義過濾器，可以被用作一些常見的文本格式(（也就是修飾文本，但是文本內(nèi)容不會改變）)。
過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式。過濾器應(yīng)該被添加在 JavaScript 表達式的尾部，由“管道”符號指示。
更詳細的

<!-- 在雙花括號中 --> {{ message | capitalize }}<!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>

七、nrm的安裝使用

作用：提供了一些最常用的NPM包鏡像地址，能夠讓我們快速的切換安裝包時候的服務(wù)地址。

鏡像：原來包括一開始只存在于國外的NPM服務(wù)器，但是由于網(wǎng)絡(luò)原因，經(jīng)常訪問不到，這時候，我們可以在國內(nèi)，創(chuàng)建一個和官網(wǎng)完全一樣的NPM服務(wù)器，只不過數(shù)據(jù)是從人家那里拿過來的，除此之外，使用方式完全一樣。

• 運行 ‘npm i nrm -g’ 全局安裝 ‘nrm’ 包
• 使用 ‘nrm ls’ 查看當前所有可用資源
• 使用 ‘nrm use npm’ 或 ‘nrm use taobao’ 切換不同的鏡像源地址

【注】nrm只是單純的提供了幾個常用的下載包的 URL 地址，并能夠讓我們在這幾個地址中方便的進行切換。但是，我們每次裝包的時候，使用的裝包工具都是 npm

最后：Vue屬性、方法、指令總結(jié)

點擊移步

總結(jié)

以上是生活随笔為你收集整理的Vue——B站黑马程序员教程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。