Vue.js學習總結——1
- 2019 年 10 月 10 日
- 筆記
1、什麼是Vue.js
1、Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架 2、Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，並成為前端三大主流框架！ 3、Vue.js 是一套構建用戶介面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發） 4、前端的主要工作？主要負責MVC中的V這一層；主要工作就是和介面打交道，來製作前端頁面效果
2、框架和庫的區別：
框架：是一套完整的解決方案；對項目的侵入性較大，項目如果需要更換框架，則需要重新架構整個項目。 庫（插件）：提供某一個小功能，對項目的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。
3、MVC和MVVM圖解：
4、Vue.js初體驗：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 1. 導入Vue的包 --> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <!-- 將來 new 的Vue實例，會控制這個 元素中的所有內容 --> <!-- Vue 實例所控制的這個元素區域，就是我們的 V --> <div id="app"> <p>{{ msg }}</p> </div> <script> // 2. 創建一個Vue的實例 // 當我們導入包之後，在瀏覽器的記憶體中，就多了一個 Vue 構造函數 // 注意：我們 new 出來的這個 vm 對象，就是我們 MVVM中的 VM調度者 var vm = new Vue({ el: '#app', // 表示，當前我們 new 的這個 Vue 實例，要控制頁面上的哪個區域 // 這裡的 data 就是 MVVM中的 M，專門用來保存 每個頁面的數據的 data: { // data 屬性中，存放的是 el 中要用到的數據 msg: '歡迎學習Vue' // 通過 Vue 提供的指令，很方便的就能把數據渲染到頁面上，程式設計師不再手動操作DOM元素了【前端的Vue之類的框架，不提倡我們去手動操作DOM元素了】 } }) </script> </body> </html>
第一步：引入vue-2.4.0.js文件
第二步：創建vue實例
第三步：在頁面中利用插值表達式渲染數據
5、Vue.js詳細介紹：
(1)、插值：
#文本：
數據綁定最常見的形式就是使用「Mustache」語法 (雙大括弧) 的文本插值：
<p>{{msg}}</p> 此處將顯示msg的內容
<p v-text="msg"></p> 此處將顯示msg的內容
#原始的HTML：
雙大括弧會將數據解釋為普通文本，而非 HTML 程式碼。為了輸出真正的 HTML，你需要使用 v-html 指令：
<p v-html="msg2"></p> 此處將顯示經過渲染後的html程式碼
三種插值的對比：
1、{{}}：在顯示數據時會出現閃爍問題（閃爍就是在數據渲染出來之前會顯示一些其他字元）；而v-text和v-html則不會出現閃爍問題 2、{{}}：不會替換標籤原本存在的數據，如果標籤原本存在數據，則將拼接後的結果進行顯示；而v-text和v-html則會覆蓋頁面原有的數據 3、{{}}和v-text不會解析msg中的標籤，會原樣輸出；而v-html則會將msg中的標籤解析輸出
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> [v-cloak] { display: none; } </style> </head> <body> <div id="app"> <!-- 使用 v-cloak 能夠解決 插值表達式閃爍的問題 --> <p v-cloak>++++++++ {{ msg }} ----------</p> <h4 v-text="msg">==================</h4> <!-- 默認 v-text 是沒有閃爍問題的 --> <!-- v-text會覆蓋元素中原本的內容，但是 插值表達式 只會替換自己的這個佔位符，不會把 整個元素的內容清空 --> <div>{{msg2}}</div> <div v-text="msg2"></div> <div v-html="msg2">1212112</div> </div> <script src="./lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: '#app', data: { msg: '123', msg2: '<h1>哈哈，我是一個大大的H1， 我大，我驕傲</h1>', mytitle: '這是一個自己定義的title' } }) </script> </body> </html>
效果圖：
（2）、屬性和事件綁定：
v-bind:屬性綁定，可以簡寫為:
v-on:事件綁定，可以簡寫為@:
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-bind和v-on的學習</title> <script src="../lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <!--屬性綁定--> <input type="button" v-bind:value="mytitle+'123S'"> <!-- 事件綁定 --> <input type="button" value="點擊" v-on:click="show"> </div> <script> var vm=new Vue({ el:'#app', data:{ mytitle:'我是按鈕' }, methods:{ show:function(){ alert("hello") } } }) </script> </body> </html>
效果圖：
（3）、事件修飾符：
.stop 阻止事件冒泡
.prevent 阻止默認行為
.capture 實現捕獲觸發事件的機制
.self 實現只有點擊當前元素時候，才會觸發事件處理函數
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .inner { height: 150px; background-color: darkcyan; } .outer { padding: 40px; background-color: red; } </style> </head> <body> <div id="app"> <!-- 使用 .stop 阻止冒泡 點擊戳他只會觸發btnHandler，不會觸發div1Handler--> <div class="inner" @click="div1Handler"> <input type="button" value="戳他" @click.stop="btnHandler"> </div> <br/> <!-- 使用 .prevent 阻止默認行為 點擊超鏈接不會跳轉到相應頁面 --> <a href="http://www.baidu.com" @click.prevent="linkClick">有問題，先去百度</a> <br/> <!-- 使用 .capture 實現捕獲觸發事件的機制 點擊戳他按鈕先觸發div1Handler事件，然後觸發btnHandler --> <div class="inner" @click.capture="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> <br/> <!-- 使用 .self 實現只有點擊當前元素時候，才會觸發事件處理函數--> <div class="inner" @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> <br/> <!-- 使用 .once 只觸發一次事件處理函數 --> <a href="http://www.baidu.com" @click.prevent.once="linkClick">有問題，先去百度</a> <br/> <!-- 演示： .stop 和 .self 的區別 --> <!-- stop真正阻止冒泡行為 --> <div class="outer" @click="div2Handler"> <div class="inner" @click="div1Handler"> <input type="button" value="戳他" @click.stop="btnHandler"> </div> </div> <br/> <!-- .self 只會阻止自己身上冒泡行為的觸發，並不會真正阻止 冒泡的行為 --> <div class="outer" @click="div2Handler"> <div class="inner" @click.self="div1Handler"> <input type="button" value="戳他" @click="btnHandler"> </div> </div> <br/> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {}, methods: { div1Handler() { console.log('這是觸發了 inner div 的點擊事件') }, btnHandler() { console.log('這是觸發了 btn 按鈕 的點擊事件') }, linkClick() { console.log('觸發了連接的點擊事件') }, div2Handler() { console.log('這是觸發了 outer div 的點擊事件') } } }); </script> </body> </html>
（4）v-model雙向綁定：
前面學習了v-bind可以用於綁定屬性，v-model的作用也是用於綁定數據，v-bind是單向數據綁定，從M到V，而v-model是雙向數據綁定既可以從M到V，也可以從V到M。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> </head> <body> <div id="app"> <h4>{{ msg }}</h4> <!-- v-bind 只能實現數據的單向綁定，從 M 自動綁定到 V， 無法實現數據的雙向綁定 --> <!-- <input type="text" v-bind:value="msg" style="width:100%;"> --> <!-- 使用 v-model 指令，可以實現 表單元素和 Model 中數據的雙向數據綁定 --> <!-- 注意： v-model 只能運用在 表單元素中 --> <!-- input(radio, text, address, email....) select checkbox textarea --> <input type="text" style="width:100%;" v-model="msg"> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '大家都是好學生，愛敲程式碼，愛學習，愛思考，簡直是完美，沒瑕疵！' }, methods: { } }); </script> </body> </html>
注意： v-model 只能運用在 表單元素中，因為只有表單元素才可以在頁面上進行修改
（5）、vue中的樣式：
Class樣式：
1、對象語法：
我們可以傳給 v-bind:class 一個對象，以動態地切換 class：
<div v-bind:class="{ active: isActive }"></div>
2、數組語法：
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
內聯樣式：
1、對象語法：
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
2、數組語法：
我們可以把一個數組傳給 v-bind:class，以應用一個 class 列表：
<div v-bind:class="[activeClass, errorClass]"></div>
程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue-2.4.0.js"></script> <style> .red { color: red; } .thin { font-weight: 200; } .italic { font-style: italic; } .active { letter-spacing: 0.5em; } </style> </head> <body> <div id="app"> <h1 class="red thin">這是一個很大很大的H1，大到你無法想像！！！</h1> <!-- 第一種使用方式，直接傳遞一個數組，注意： 這裡的 class 需要使用 v-bind 做數據綁定 --> <h1 :class="['thin', 'italic']">這是一個很大很大的H1，大到你無法想像！！！</h1> <!-- 在數組中使用三元表達式 --> <h1 :class="['thin', 'italic', flag?'active':'']">這是一個很大很大的H1，大到你無法想像！！！</h1> <!-- 在數組中使用 對象來代替三元表達式，提高程式碼的可讀性 --> <h1 :class="['thin', 'italic', {'active':flag} ]">這是一個很大很大的H1，大到你無法想像！！！</h1> <!-- 在為 class 使用 v-bind 綁定 對象的時候，對象的屬性是類名，由於 對象的屬性可帶引號，也可不帶引號，所以 這裡我沒寫引號； 屬性的值 是一個標識符 --> <h1 :class="classObj">這是一個很大很大的H1，大到你無法想像！！！</h1> </div> <script> // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: { flag: true, classObj: { red: true, thin: true, italic: false, active: false } }, methods: {} }); </script> </body> </html>
效果圖：
未完待續。。。
