目錄

第1章 Vue核心

1.1 Vue簡介

1.1.2 Vue的特點

1.1.3 與其它 JS 框架的關(guān)聯(lián)

1.1.4 學(xué)習(xí)Vue之前要掌握的JavaScript基礎(chǔ)知識

1.1.5 Vue官網(wǎng)

1.1.6 Vue周邊庫

1.3 模塊語法

1.3.1 模板的理解

1.3.2 插值語法

1.3.3 指令語法

1.4 數(shù)據(jù)綁定

1.4.1. 單向數(shù)據(jù)綁定

1.4.2. 雙向數(shù)據(jù)綁定

1.4.3 el與data的兩種寫法

1.el

2.data

1.5 Vue中的MVVM模型

1.5? 事件處理

1.5.1 事件修飾符

1.5.2 鍵盤事件

1.6 計算屬性與監(jiān)視

1.6.1 計算屬性-computed

1.6.2 監(jiān)視屬性-watch

?1.6.2.1 深度監(jiān)視

1.6.3 computed和watch之間的區(qū)別

1.7? 綁定樣式

1.8? 條件渲染

1.9 列表渲染

2.0 收集表單數(shù)據(jù)

第1章 Vue核心

1.1 Vue簡介

Vue是什么？

????????一套用于動態(tài)構(gòu)建用戶界面的漸進式JavaScript框架

????????作者: 尤雨溪

????????Vue可以自底向上的應(yīng)用

簡單應(yīng)用：只需一個輕量小巧的核心庫

復(fù)雜應(yīng)用：可以引入各式各樣的Vue插件

1.1.2 Vue的特點

1. 采用組件化模式，提高代碼復(fù)用率、且讓代碼更好維護
2. 聲明式編碼，讓編碼人員無需直接操作DOM，提高開發(fā)效率
3. 遵循 MVVM 模式
4. 編碼簡潔, 體積小, 運行效率高, 適合移動/PC 端開發(fā)
5. 它本身只關(guān)注 UI, 也可以引入其它第三方庫開發(fā)項目

1.1.3 與其它 JS 框架的關(guān)聯(lián)

1. 借鑒 Angular 的模板和數(shù)據(jù)綁定技術(shù)

2. 借鑒 React 的組件化和虛擬 DOM 技術(shù)

1.1.4 學(xué)習(xí)Vue之前要掌握的JavaScript基礎(chǔ)知識

ES6語法規(guī)范、ES6模塊化、包管理器、原型、原型鏈、數(shù)組常用方法、axious、promise

1.1.5 Vue官網(wǎng)

????????英文官網(wǎng): Vue.js - The Progressive JavaScript Framework | Vue.js
????????中文官網(wǎng): Vue.js - 漸進式 JavaScript 框架 | Vue.js

1.1.6 Vue周邊庫

1. vue-cli: vue 腳手架

2. vue-resource

3. axios

4. vue-router: 路由

5. vuex: 狀態(tài)管理

6. element-ui: 基于 vue 的 UI 組件庫(PC 端)

   ……

1.3 模塊語法

1.插值語法

2.指令語法

1.3.1 模板的理解

html 中包含了一些 JS 語法代碼，語法分為兩種，分別為：

1. 插值語法（雙大括號表達式）

2. 指令（以 v-開頭）

1.3.2 插值語法

1. 功能: 用于解析標簽體內(nèi)容
2. 語法: {{xxx}} ，xxxx 會作為 js 表達式解析

1.3.3 指令語法

1. 功能: 解析標簽屬性、解析標簽體內(nèi)容、綁定事件

2. 舉例：v-bind:href = 'xxxx' ，xxxx 會作為 js 表達式被解析

3. 說明：Vue 中有有很多的指令，此處只是用 v-bind 舉個例子

Vue實例和容器是：一對一的關(guān)系

1.4 數(shù)據(jù)綁定

1.4.1. 單向數(shù)據(jù)綁定

1. 語法：v-bind:href ="xxx" 或簡寫為 :href

2. 特點：數(shù)據(jù)只能從 data 流向頁面

1.4.2. 雙向數(shù)據(jù)綁定

1. 語法：v-mode:value="xxx" 或簡寫為 v-model="xxx"

2. 特點：數(shù)據(jù)不僅能從 data 流向頁面，還能從頁面流向 data

1.4.3 el與data的兩種寫法

1.el

 ? ?<script type="text/javascript">
 ? ? ? ?Vue.config.productionTip = false 
 ? ? ? ?const v = new Vue({
 ? ? ? ? ? ?// el:'#box',  //第1種el的寫法
 ? ? ? ? ? ?data:{
 ? ? ? ? ? ? ? ?name:'帥哥'
 ? ? ? ? ?  }
 ? ? ?  })
?
 ? ? ? ?console.log(v)
 ? ? ? ?setTimeout(() => {
 ? ? ? ? ? ?v.$mount('#box') //第2種el的寫法
 ? ? ?  },1000);
 ? ?</script>

2.data

2.1 對象式

<script type="text/javascript">
 ? ? ? ?Vue.config.productionTip = false 
 ? ?    new Vue({
 ? ? ? ? ? ?el:'#box',
 ? ? ? ? ? ?data:{
 ? ? ? ? ? ? ? ?name:'帥哥'
 ? ? ? ? ?  }
 ? ? ?  })
 ? ?</script>

2.2 函數(shù)式

使用組件的時候,必須使用函數(shù)式

<script type="text/javascript">
 ? ? ? ?Vue.config.productionTip = false 
 ? ? ? ?new Vue({
 ? ? ? ? ? ?el:'#box',
 ? ? ? ? ? ?data(){
 ? ? ? ? ? ? ? return{
 ? ? ? ? ? ? ? ?name:'66611'
 ? ? ? ? ? ? ? }
 ? ? ? ? ?  }
 ? ? ?  })
 ? ?</script>

1.5 Vue中的MVVM模型

M：模型(Model) ：對應(yīng) data 中的數(shù)據(jù)

V：視圖(View) ：模板

VM：視圖模型(ViewModel) ： Vue 實例對象

1.5? 事件處理

事件綁定指令：v-on

v-on：xxx 或 @xxx 綁定事件，xxx是事件名稱

1.5.1 事件修飾符

1. prevent：阻止默認事件（常用）；
2. stop：阻止事件冒泡（常用）；
3. once：事件只觸發(fā)一次（常用）；
4. capture：使用事件的捕獲模式；
5. self：只有event.target是當前操作的元素時才觸發(fā)事件；
6. passive：事件的默認行為立即執(zhí)行，無需等待事件回調(diào)執(zhí)行完畢；

1.5.2 鍵盤事件

1.Vue中常用的按鍵別名：

????????回車 => enter

????????刪除 => delete (捕獲“刪除”和“退格”鍵)

????????退出 => esc

????????空格 => space

????????換行 => tab (特殊，必須配合keydown去使用)

????????上 => up

????????下 => down

????????左 => left

????????右 => right

2.Vue未提供別名的按鍵，可以使用按鍵原始的key值去綁定，但注意要轉(zhuǎn)為kebab-case（短橫線命名）

3.系統(tǒng)修飾鍵（用法特殊）：ctrl、alt、shift、meta

(1).配合keyup使用：按下修飾鍵的同時，再按下其他鍵，隨后釋放其他鍵，事件才被觸發(fā)。

(2).配合keydown使用：正常觸發(fā)事件。

4.也可以使用keyCode去指定具體的按鍵（不推薦）

5.Vue.config.keyCodes.自定義鍵名 = 鍵碼，可以去定制按鍵別名

1.6 計算屬性與監(jiān)視

1.6.1 計算屬性-computed

1. 要顯示的數(shù)據(jù)不存在，要通過計算得來

2. 在 computed 對象中定義計算屬性

3. 在頁面中使用{{方法名}}來顯示計算的結(jié)果

1.6.2 監(jiān)視屬性-watch

1. 通過通過 vm 對象的$watch()或 watch 配置來監(jiān)視指定的屬性

2. 當屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 在函數(shù)內(nèi)部進行計算

????????監(jiān)視屬性watch：

????????1.當被監(jiān)視的屬性變化時, 回調(diào)函數(shù)自動調(diào)用, 進行相關(guān)操作

????????2.監(jiān)視的屬性必須存在，才能進行監(jiān)視！！

????????3.監(jiān)視的兩種寫法：

????????(1).new Vue時傳入watch配置

????????(2).通過vm.$watch監(jiān)視

?1.6.2.1 深度監(jiān)視

(1).Vue中的watch默認不監(jiān)測對象內(nèi)部值的改變（一層）

(2).配置deep:true可以監(jiān)測對象內(nèi)部值改變（多層）

備注：

(1).Vue自身可以監(jiān)測對象內(nèi)部值的改變，但Vue提供的watch默認不可以！

(2).使用watch時根據(jù)數(shù)據(jù)的具體結(jié)構(gòu)，決定是否采用深度監(jiān)視。

1.6.3 computed和watch之間的區(qū)別

1.computed能完成的功能，watch都可以完成

2.watch能完成的功能，computed不一定能完成，例如：watch可以進行異步操作。

1.7? 綁定樣式

1. class樣式寫法:

????????class="xxx" xxx可以是字符串、對象、數(shù)組。

????????字符串寫法適用于：類名不確定，要動態(tài)獲取。

????????對象寫法適用于：要綁定多個樣式，個數(shù)不確定，名字也不確定。

????????數(shù)組寫法適用于：要綁定多個樣式，個數(shù)確定，名字也確定，但不確定用不用。

2. style樣式:

????????style="{fontSize: xxx}"其中xxx是動態(tài)值。

? ? ? ? :style="[a,b]"其中a、b是樣式對象。

1.8? 條件渲染

1.v-if寫法：

????????(1).v-if="表達式"

????????(2).v-else-if="表達式"

????????(3).v-else="表達式"

????????適用于：切換頻率較低的場景。

????????特點：不展示的DOM元素直接被移除。

????????注意：v-if可以和:v-else-if、v-else一起使用，但要求結(jié)構(gòu)不能被“打斷”。

2.v-show寫法：

????????v-show="表達式"

????????適用于：切換頻率較高的場景。

????????特點：不展示的DOM元素未被移除，僅僅是使用樣式隱藏掉

3.備注：使用v-if的時，元素可能無法獲取到，而使用v-show一定可以獲取到

1.9 列表渲染

v-for指令:

1.用于展示列表數(shù)據(jù)

2.語法：v-for="(item, index) in xxx" :key="yyy"

3.可遍歷：數(shù)組、對象、字符串（用的很少）、指定次數(shù)（用的很少）

2.0 收集表單數(shù)據(jù)

收集表單數(shù)據(jù)：

????????若：<input type="text"/>，則v-model收集的是value值，用戶輸入的就是value值。

????????若：<input type="radio"/>，則v-model收集的是value值，且要給標簽配置value值。

????????若：<input type="checkbox"/>

1.沒有配置input的value屬性，那么收集的就是checked（勾選 or 未勾選，是布爾值）

2.配置input的value屬性:

????????(1)v-model的初始值是非數(shù)組，那么收集的就是checked（勾選 or 未勾選，是布爾值）

????????(2)v-model的初始值是數(shù)組，那么收集的的就是value組成的數(shù)組備注

v-model的三個修飾符：

????????lazy：失去焦點再收集數(shù)據(jù)

????????number：輸入字符串轉(zhuǎn)為有效的數(shù)字

????????trim：輸入首尾空格過濾

?文章來源地址http://www.zghlxwxcb.cn/news/detail-536757.html

?

到了這里，關(guān)于前端框架Vue-Vue核心的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！