# Vue基礎培訓 <br> ## 1 培訓簡介 ### 1.1 內容 <p @click="changeShow1">本次培訓是一次較為基礎的培訓，目的讓大家能夠產生對Vue的興趣，了解Vue和jQuery之間的區別以及初學一下Vue。</p> <img v-show="showImg1" @click="changeShow2" src='https://t1.picb.cc/uploads/2020/03/04/k3qNjR.md.png' style="width:500px;display:none;"> <img v-show="showImg1 && showImg2" src='https://t1.picb.cc/uploads/2020/03/04/k3qQY8.jpg' style="width:500px;display:none;"> ### 1.2 目標 認真學完之后，大家拿到Vue工程源碼的時候，能夠將它運行起來，并且能夠了解大部分常用的Vue基礎語法，做到能夠大致閱讀和簡單修改Vue源碼。 <br><br> ## 2 Vue項目的運行 ### 2.1 下載并安裝nodejs <a href="https://nodejs.org/zh-cn/download/" target="_blank">下載鏈接</a> 安裝完成之后，打開命令行工具，輸入 node -v，如果出現相應的版本號，則說明安裝成功。 ### 2.2 了解npm npm包管理器（類似Java中的maven），是集成在node中的，所以，直接輸入 npm -v就會顯示出npm的版本信息。 npm常用命令： npm install packagename --save 或 -S（生產環境依賴） npm install packagename --save-dev 或 -D（開發環境依賴） npm install packagename -g 或 --global（全局） npm uninstall（卸載） npm update（更新） npm run build（編譯） 將Vue工程代碼打包成html，js，css的目錄結構包 注：當安裝不上依賴的時候可以優先切換npm源（npm config set registry http://r.cnpmjs.org/） <img src='https://t1.picb.cc/uploads/2020/03/02/kvDZv7.png'> ### 2.3 拿到工程源碼，安裝依賴并運行。 npm install 直接安裝依賴。原理就是包管理器會去檢索package.json文件，并且安裝json文件中的包。 并且會增加一個node_modules文件夾，工程所需要的所有依賴包都會安裝到該文件中。依賴安裝完成之后， 運行npm run dev 或者npm run serve 命令即可啟動應用。具體使用哪一條命令可以在package.json中查看。 <img src='https://t1.picb.cc/uploads/2020/03/02/kvDOpW.md.png'> <br><br> ## 3 Vue概述與基礎知識點 ### 3.1 Vue概述 3.1.1 什么是Vue Vue 是一套用于構建用戶界面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。 Vue 的核心庫只關注視圖層，不僅易于上手，還便于與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈 以及各種支持類庫結合使用時，Vue 也完全能夠為復雜的單頁應用提供驅動。 Vue有三個核心概念：數據驅動，組件系統，生命周期。 用原生JavaScript事件驅動通常是這樣的流程： 先通過特定的選擇器查找到需要操作的節點 -> 給節點添加相應的事件監聽，然后用戶執行某事件（點擊，輸入 ，后退等等） -> 調用 JavaScript 來修改節點這種模式對業務來說是沒有什么問題，但是從開發成本和效率 來說會比較不理想，特別是在業務系統越來越龐大的時候。另一方面，找節點和修改節點這件事，效率本身就很低， 因此出現了數據驅動模式。 Vue的一個核心思想是數據驅動。所謂數據驅動，是指視圖是由數據驅動生成的，我們對視圖的修改，不會直接操作 DOM，而是通過修改數據,其流程如下： 用戶執行某個操作 -> 反饋到 VM 處理（可以導致 Model 變動） -> VM 層改變，通過綁定關系直接更新頁面對應 位置的數據可以簡單地理解：數據驅動不是操作節點的，而是通過虛擬的抽象數據層來直接更新頁面。主要就是因為 這一點，數據驅動框架才得以有較快的運行速度（因為不需要去折騰節點），并且可以應用到大型項目。 <a href="https://cn.vuejs.org/v2/guide/" target="_blank">Vue官方教程</a> 3.1.2 Vue與jquery的區別 jquery是一個前端js庫，相當于是一個工具類，而Vue是一個基于MVVM模型的框架。 jQuery是使用選擇器（$）選取DOM對象，對其進行賦值、取值、事件綁定等操作，數據和界面是在一起的。比如 需要獲取label標簽的內容：$("lable").val();它還是依賴DOM元素的值。 Vue則是通過Vue對象將數據和View完全分離開來了。對數據進行操作不再需要引用相應的DOM對象，可以說數據和 View是分離的，他們通過Vue對象這個vm實現相互的綁定。這就是傳說中的MVVM。 3.1.3 MVC與MVVM的區別 MVC <img src='https://t1.picb.cc/uploads/2020/03/04/k3qRGN.png'> M（Model）模型：用來存放應用的所有數據對象。 V（View）視圖：視圖層是呈現給用戶的，用戶與之產生交互。 C（Controller）控制器：控制器是模型和視圖的紐帶。 MVVM <img src='https://t1.picb.cc/uploads/2020/03/04/k3qxpe.png'> M（Model）對應數據層的域模型，它主要做域模型的同步。 V（View）作為視圖模板，用于定義結構、布局。 VM（ViewModel）一個同步View 和 Model的對象,起著連接View和Model的作用，同時用于處理View中的邏輯。 MVVM與MVC最大的區別就是：它實現了View和Model的自動同步，也就是當Model的屬性改變時，我們不用再自己手動 操作Dom元素，來改變View的顯示，而是改變屬性后該屬性對應View層顯示會自動改變。整體看來，MVVM比MVC精簡很多， 不僅簡化了業務與界面的依賴，還解決了數據頻繁更新的問題，不用再用選擇器操作DOM元素。 ### 3.2 Vue基礎語法 3.2.1 雙花括號{{}}，模板中顯示變量值 3.2.2 指令 v-if 判斷指令 v-if 指令用于條件性地渲染一塊內容。這塊內容只會在指令的表達式返回 truthy(除 false、0、""、null、 undefined 和 NaN 以外皆為真值) 值的時候被渲染。也可以用 v-else 添加一個“else 塊”，或者用 v-else-if 添加一個“else if 塊”。 v-show 顯隱指令 另一個用于根據條件展示元素的選項是 v-show 指令，不同的是帶有 v-show 的元素始終會被渲染并保留在 DOM中。v-show 只是簡單地切換元素的 CSS 屬性 display。 v-for 循環指令 v-for 指令需要使用 item in items 形式的特殊語法，其中 items 是源數據數組，而 item 則是被迭代的 數組元素的別名。 v-model 雙向數據綁定指令 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創建雙向數據綁定。它會根據控件類型自動 選取正確的方法來更新元素。 v-html 原始HTML指令 （不建議使用，容易導致xss跨站腳本攻擊） v-text 文本指令 v-bind 屬性綁定指令 （縮寫:） v-on 事件綁定指令 （縮寫@） v-on 指令監聽 DOM 事件，并在觸發時運行一些 JavaScript 代碼。 <a href="https://codepen.io/cyt68/pen/BaNpLOv" target="_blank">在線運行示例</a> 3.2.3 事件綁定修飾符 .stop 阻止單擊事件繼續傳播 .prevent 阻止默認事件 .capture 添加事件監聽器時使用事件捕獲模式 .self 只當在 event.target 是當前元素自身時觸發處理函數 .once 事件將只會觸發一次 .passive 告訴瀏覽器你不想阻止事件的默認行為 還有按鍵修飾符，鼠標按鈕修飾符等 <a href="https://codepen.io/cyt68/pen/RwPpVOO" target="_blank">在線運行示例</a> 3.2.4 計算屬性與偵聽屬性 計算屬性computed，計算屬性是基于它們的響應式依賴進行緩存的。 ::: demo ```js computed: { reversedMessage: function () { return this.message.split('').reverse().join(''); } } ``` ::: 偵聽屬性watch，當需要在數據變化時執行異步或開銷較大的操作時，這個方式是最有用的。 ::: demo ```js watch: { message: function () { window.alert(this.message); } } ``` ::: <a href="https://codepen.io/cyt68/pen/dyovvXM" target="_blank">在線運行示例</a> ### 3.3 Vue生命周期 <img src="https://cn.vuejs.org/images/lifecycle.png" width="760"> beforeCreate 實例組件剛創建，元素DOM和數據都還沒有初始化 created 數據data已經初始化完成，方法也已經可以調用，但是DOM未渲染，多用于數據獲取。 beforeMount DOM未完成掛載，數據也初始化完成，但是數據的雙向綁定還是顯示{{}}，這是因為Vue采用了 Virtual DOM（虛擬Dom）技術。先占住了一個坑。 mounted 數據和DOM都完成掛載，在上一個周期占位的數據把值給渲染進去，多用于dom處理。 beforeUpdate 只要是頁面數據改變了都會觸發，數據更新之前，頁面數據還是原來的數據，當你請求賦值一 個數據的時候會執行這個周期，如果沒有數據改變不執行。 updated 只要是頁面數據改變了都會觸發，數據更新完畢，頁面的數據是更新完成的。beforeUpdate和 updated要謹慎使用，因為頁面更新數據的時候都會觸發，在這里操作數據很影響性能和容易死循環。 beforeDestroy 這個周期是在組件銷毀之前執行。 destroyed 組件已銷毀。 <a href="https://codepen.io/cyt68/pen/MWwpmZp" target="_blank">在線運行示例</a> <script> export default { data() { return { showImg1: false, showImg2: false } }, methods: { changeShow1() { this.showImg1 = !this.showImg1; }, changeShow2() { this.showImg2 = !this.showImg2; } } } </script>