Vue.js學習筆記（一）
Vue 的核心庫只關注視圖層，方便與第三方庫或既有項目整合。
HTML + CSS + JS : 視圖 ： 給用戶看，刷新后台給的數據
網絡通信 ： axios
頁面跳轉 ： vue-router
狀態管理：vuex
Vue-UI : ICE , Element UI
- VUE 概述
Vue (讀音/vju/, 類似於view)是一套用於構建用戶界面的漸進式框架，發布於2014年2月。與其它大型框架不同的是，Vue被設計為可以自底向上逐層應用。Vue的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫(如: vue-router: 跳轉，vue-resource: 通信，vuex:管理)或既有項目整合 - 前端三要素
HTML (結構) :超文本標記語言(Hyper Text Markup Language) ，決定網頁的結構和內容
CSS (表現) :層疊樣式表(Cascading Style sheets) ，設定網頁的表現樣式
JavaScript (行為) :是一種弱類型腳本語言，其源代碼不需經過編譯，而是由瀏覽器解釋運行,用於控制網頁的行為 - JavaScript框架
jQuery: 大家熟知的JavaScript框架，優點是簡化了DOM操作，缺點是DOM操作太頻繁,影響前端性能;在前端眼里使用它僅僅是為了兼容IE6、7、8;
Angular: Google收購的前端框架，由一群Java程序員開發，其特點是將后台的MVC模式搬到了前端並增加了模塊化開發的理念，與微軟合作，采用TypeScript語法開發;對后台程序員友好，對前端程序員不太友好;最大的缺點是版本迭代不合理(如: 1代-> 2代，除了名字，基本就是兩個東西;截止發表博客時已推出了Angular6)
React: Facebook出品，一款高性能的JS前端框架;特點是提出了新概念[虛擬DOM]用於減少真實DOM操作，在內存中模擬DOM操作，有效的提升了前端渲染效率;缺點是使用復雜，因為需要額外學習一門[JSX] 語言;
Vue:一款漸進式JavaScript框架，所謂漸進式就是逐步實現新特性的意思，如實現模塊化開發、路由、狀態管理等新特性。其特點是綜合了Angular (模塊化)和React (虛擬DOM)的優點;
Axios :前端通信框架;因為Vue 的邊界很明確，就是為了處理DOM,所以並不具備通信能力，此時就需要額外使用一個通信框架與服務器交互;當然也可以直接選擇使用jQuery提供的AJAX通信功能;
前端三大框架：Angular、React、Vue
ES6語法
1.不一樣的變量聲明：const和let
ES6推薦使用let聲明局部變量，相比之前的var（無論聲明在何處，都會被視為聲明在函數的最頂部）
let和var聲明的區別：
var x = '全局變量';
{
let x = '局部變量';
console.log(x); // 局部變量
}
console.log(x); // 全局變量
<body>
<button>按鈕1</button>
<button>按鈕2</button>
<button>按鈕3</button>
<button>按鈕4</button>
<button>按鈕5</button>
<script>
// 變量作用域:變量在什么位置內是可用的
// ES5之前因為if和for都沒有塊級作用域的概念，所以在很多時候，我們都必須借助於function的作月域來解決應用外面變量的問題
// 閉包可以解決這個問題: 函數是一個作用域
// ES6中加入了let,let它是有if和for塊級作用域
// ES5語法
// var btns = document.getElementsByTagName('button');
// for(var i = 0; i<btns.length; i++){
// (function(num){
// bnts[num].addEventListener('click',function(){
// console.log('第'+num+'個按鈕被點擊');
// })
// })(i)
// }
// ES6語法
const btns = document.getElementsByTagName('button')
for (let i = 1; i < btns.length; i++) {
btns[i].addEventListener('click', function () {
console.log('第' + i + '個按鈕被點擊');
})
}
</script>
</body>
let表示聲明變量，而const表示聲明常量，兩者都為塊級作用域；
const 聲明的變量都會被認為是常量，意思就是它的值被設置完成后就不能再修改了，且const定義標識符時，必須賦值：
建議:在ES6開發中,優先使用const,只有需要改變某一個標識符的時候才使用let。
const a = 1
a = 0 //報錯
如果const的是一個對象，對象所包含的值（內部屬性）是可以被修改的。抽象一點兒說，就是對象所指向的地址沒有變就行：
const student = { name: 'cc' }
student.name = 'yy';// 不報錯
student = { name: 'yy' };// 報錯
有幾個點需要注意：
- let 關鍵詞聲明的變量不具備變量提升（hoisting）特性
- let 和 const 聲明只在最靠近的一個塊中（花括號內）有效
- 當使用常量 const 聲明時，請使用大寫變量，如：CAPITAL_CASING
- const 在聲明時必須被賦值
2.模板字符串
在ES6之前，我們往往這么處理模板字符串：
通過“\”和“+”來構建模板
$("body").html("This demonstrates the output of HTML \
content to the page, including student's\
" + name + ", " + seatNumber + ", " + sex + " and so on.");
而對ES6來說
- 基本的字符串格式化。將表達式嵌入字符串中進行拼接。用${}來界定；
- ES6反引號(``)直接搞定；
$("body").html(`This demonstrates the output of HTML content to the page,
including student's ${name}, ${seatNumber}, ${sex} and so on.`);
3.箭頭函數（Arrow Functions）
ES6 中，箭頭函數就是函數的一種簡寫形式，使用括號包裹參數，跟隨一個 =>，緊接着是函數體；
箭頭函數最直觀的三個特點。
- 不需要 function 關鍵字來創建函數
- 省略 return 關鍵字
- 繼承當前上下文的 this 關鍵字
// ES5
var add = function (a, b) {
return a + b;
};
// 使用箭頭函數
var add = (a, b) => a + b;
// ES5
[1,2,3].map((function(x){
return x + 1;
}).bind(this));
// 使用箭頭函數
[1,2,3].map(x => x + 1);
細節：當你的函數有且僅有一個參數的時候，是可以省略掉括號的。當你函數返回有且僅有一個表達式的時候可以省略{} 和 return；
4. 函數的參數默認值
在ES6之前，我們往往這樣定義參數的默認值：
// ES6之前，當未傳入參數時，text = 'default'；
function printText(text) {
text = text || 'default';
console.log(text);
}
// ES6；
function printText(text = 'default') {
console.log(text);
}
printText('hello'); // hello
printText();// default
5.Spread / Rest 操作符
Spread / Rest 操作符指的是 ...，具體是 Spread 還是 Rest 需要看上下文語境。
當被用於迭代器中時，它是一個 Spread 操作符：
function foo(x,y,z) {
console.log(x,y,z);
}
let arr = [1,2,3];
foo(...arr); // 1 2 3
當被用於函數傳參時，是一個 Rest 操作符：當被用於函數傳參時，是一個 Rest 操作符：
function foo(...args) {
console.log(args);
}
foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]
6.二進制和八進制字面量
ES6 支持二進制和八進制的字面量，通過在數字前面添加 0o 或者0O 即可將其轉換為八進制值：
let oValue = 0o10;
console.log(oValue); // 8
let bValue = 0b10; // 二進制使用 `0b` 或者 `0B`
console.log(bValue); // 2
7.對象和數組解構
// 對象
const student = {
name: 'Sam',
age: 22,
sex: '男'
}
// 數組
// const student = ['Sam', 22, '男'];
// ES5；
const name = student.name;
const age = student.age;
const sex = student.sex;
console.log(name + ' --- ' + age + ' --- ' + sex);
// ES6
const { name, age, sex } = student;
console.log(name + ' --- ' + age + ' --- ' + sex);
8.對象超類
ES6 允許在對象中使用 super 方法：
var parent = {
foo() {
console.log("Hello from the Parent");
}
}
var child = {
foo() {
super.foo();
console.log("Hello from the Child");
}
}
Object.setPrototypeOf(child, parent);
child.foo(); // Hello from the Parent
// Hello from the Child
9.for...of 和 for...in
for...of 用於遍歷一個迭代器，如數組：
let letters = ['a', 'b', 'c'];
letters.size = 3;
for (let letter of letters) {
console.log(letter);
}
// 結果: a, b, c
for...in 用來遍歷對象中的屬性：
let stus = ["Sam", "22", "男"];
for (let stu in stus) {
console.log(stus[stu]);
}
// 結果: Sam, 22, 男
10.ES6中的類
ES6 中支持 class 語法，不過，ES6的class不是新的對象繼承模型，它只是原型鏈的語法糖表現形式。
函數中使用 static 關鍵詞定義構造函數的的方法和屬性：
class Student {
constructor() {
console.log("I'm a student.");
}
study() {
console.log('study!');
}
static read() {
console.log("Reading Now.");
}
}
console.log(typeof Student); // function
let stu = new Student(); // "I'm a student."
stu.study(); // "study!"
stu.read(); // "Reading Now."
類中的繼承和超集：
class Phone {
constructor() {
console.log("I'm a phone.");
}
}
class MI extends Phone {
constructor() {
super();
console.log("I'm a phone designed by xiaomi");
}
}
let mi8 = new MI();
extends 允許一個子類繼承父類，需要注意的是，子類的constructor 函數中需要執行 super() 函數。
當然，你也可以在子類方法中調用父類的方法，如super.parentMethodName()。
在 這里 閱讀更多關於類的介紹。
有幾點值得注意的是：
- 類的聲明不會提升（hoisting)，如果你要使用某個 Class，那你必須在使用之前定義它，否則會拋出一個 ReferenceError 的錯誤
- 在類中定義函數不需要使用 function 關鍵詞
1、基本認識vue
- 輕量級，體積小是一個重要指標。Vue.js 壓縮后有只有 20多kb （Angular 壓縮后 56kb+，React 壓縮后 44kb+）
- 移動優先。更適合移動端，比如移動端的 Touch 事件
- 易上手，學習曲線平穩，文檔齊全
- 吸取了 Angular（模塊化）和 React（虛擬 DOM）的長處，並擁有自己獨特的功能，如：計算屬性
- Vue是一個漸進式的框架可以將Vue作為你應用的一 部分嵌入其中,帶來更豐富的交互體驗。
- 開源，社區活躍度高
- Vue有很多特點和Web開發中常見的高級功能
- 解耦視圖和數據.
- 可復用的組件
- 前端路由技術
- 狀態管理
- 虛擬DOM
下載地址：
- 開發版本
包含完整的警告和調試模式：https://vuejs.org/js/vue.js
刪除了警告，30.96KB min + gzip：https://vuejs.org/js/vue.min.js - CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
- NPM安裝
初識vue.js
<body>
<div id="app">{{message}}</div> //執行到這里顯然出對應的HTML
<script src="../js/vue.js"></script>
<script>
//執行這里創建Vue實例,並且對原HTML進行解析和修改。
//編程范式：聲明式編程
const app = new Vue({ //創建Vue實例
el:'#app', //用於指定要掛載的元素
data:{ //定義數據
message:"洛依塵！"
}
})
//元素js的做法(編程范式:命令式編程)
// 1.創建div元素,設置id屬性
// 2.定義一個變量叫message
// 3.將message變量放在前面的div元素中顯示
</script>
</body>
MVVM 模式
MVVM 源自於經典的 Model–View–Controller（MVC）模式（期間還演化出了 Model-View-Presenter（MVP）模式，可忽略不計）。MVVM 的出現促進了 GUI 前端開發與后端業務邏輯的分離，極大地提高了前端開發效率。MVVM 的核心是 ViewModel 層，它就像是一個中轉站（value converter），負責轉換 Model 中的數據對象來讓數據變得更容易管理和使用，該層向上與視圖層進行雙向數據綁定，向下與 Model 層通過接口請求進行數據交互，起呈上啟下作用。
如下圖所示：
簡單畫了一張圖來說明 MVVM 的各個組成部分：
分層設計一直是軟件架構的主流設計思想之一，MVVM 也不例外。
View 層
View 是視圖層，也就是用戶界面。前端主要由 HTML 和 CSS 來構建，為了更方便地展現 ViewModel 或者 Model 層的數據，已經產生了各種各樣的前后端模板語言，比如 FreeMarker、Marko、Pug、Jinja2等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用來構建用戶界面的內置模板語言。
Model 層
Model 是指數據模型，泛指后端進行的各種業務邏輯處理和數據操控，主要圍繞數據庫系統展開。后端的處理通常會非常復雜
ViewModel 層
ViewModel 是由前端開發人員組織生成和維護的視圖數據層。在這一層，前端開發者對從后端獲取的 Model 數據進行轉換處理，做二次封裝，以生成符合 View 層使用預期的視圖數據模型。需要注意的是 ViewModel 所封裝出來的數據模型包括視圖的狀態和行為兩部分，而 Model 層的數據模型是只包含狀態的，比如頁面的這一塊展示什么，那一塊展示什么這些都屬於視圖狀態（展示），而頁面加載進來時發生什么，點擊這一塊發生什么，這一塊滾動時發生什么這些都屬於視圖行為（交互），視圖狀態和行為都封裝在了 ViewModel 里。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。由於實現了雙向綁定，ViewModel 的內容會實時展現在 View 層，這是激動人心的，因為前端開發者再也不必低效又麻煩地通過操縱 DOM 去更新視圖，MVVM 框架已經把最臟最累的一塊做好了，我們開發者只需要處理和維護 ViewModel，更新數據視圖就會自動得到相應更新，真正實現數據驅動開發。看到了吧，View 層展現的不是 Model 層的數據，而是 ViewModel 的數據，由 ViewModel 負責與 Model 層交互，這就完全解耦了 View 層和 Model 層，這個解耦是至關重要的，它是前后端分離方案實施的重要一環。
Vue實例的options
- el:
類型 : string | HTMLElement
作用 : 決定之后Vue實例會管理哪一個DOM。 - data:
類型 : Object | Function (組件當中data必須是一個函數)
作用 : Vue實例對應的數據對象。 - methods:
類型 : { [key: string]: Function }
作用 : 定義屬於Vue的一 些方法，可以在其他地方調用,也可以在指令中使用。
vue實例的生命周期
一、解析
1、什么是生命周期：從Vue實例創建、運行、到銷毀期間，總是伴隨着各種各樣的事件，這些事件，統稱為生命周期！
2、生命周期鈎子 = 生命周期函數 = 生命周期事件
3、主要的生命周期函數分類：
- 創建期間的生命周期函數：
+ beforeCreate：實例剛在內存中被創建出來，此時，還沒有初始化好 data 和 methods 屬性
+ created：實例已經在內存中創建OK，此時 data 和 methods 已經創建OK，此時還沒有開始 編譯模板
+ beforeMount：此時已經完成了模板的編譯，但是還沒有掛載到頁面中
+ mounted：此時，已經將編譯好的模板，掛載到了頁面指定的容器中顯示
- 運行期間的生命周期函數：
+ beforeUpdate：狀態更新之前執行此函數， 此時 data 中的狀態值是最新的，但是界面上顯示的 數據還是舊的，因為此時還沒有開始重新渲染DOM節點
+ updated：實例更新完畢之后調用此函數，此時 data 中的狀態值 和 界面上顯示的數據，都已經完成了更新，界面已經被重新渲染好了！
- 銷毀期間的生命周期函數：
+ beforeDestroy：實例銷毀之前調用。在這一步，實例仍然完全可用。
+ destroyed：Vue 實例銷毀后調用。調用后，Vue 實例指示的所有東西都會解綁定，所有的事件監聽器會被移除，所有的子實例也會被銷毀。
<body>
<div id="app">
<input type="button" value="修改msg" @click="msg='No'">
<h3 id="h3">{{ msg }}</h3>
</div>
<script>
// 創建 Vue 實例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {
msg: 'ok'
},
methods: {
show() {
console.log('執行了show方法')
}
},
beforeCreate() { // 這是我們遇到的第一個生命周期函數，表示實例完全被創建出來之前，會執行它
console.log(this.msg)
this.show()
// 注意： 在 beforeCreate 生命周期函數執行的時候，data 和 methods 中的 數據都還沒有沒初始化
},
created() { // 這是遇到的第二個生命周期函數
console.log(this.msg)
this.show()
// 在 created 中，data 和 methods 都已經被初始化好了！
// 如果要調用 methods 中的方法，或者操作 data 中的數據，最早，只能在 created 中操作
},
beforeMount() { // 這是遇到的第3個生命周期函數，表示 模板已經在內存中編輯完成了，但是尚未把 模板渲染到 頁面中
console.log(document.getElementById('h3').innerText)
// 在 beforeMount 執行的時候，頁面中的元素，還沒有被真正替換過來，只是之前寫的一些模板字符串
},
mounted() { // 這是遇到的第4個生命周期函數，表示，內存中的模板，已經真實的掛載到了頁面中，用戶已經可以看到渲染好的頁面了
console.log(document.getElementById('h3').innerText)
// 注意： mounted 是 實例創建期間的最后一個生命周期函數，當執行完 mounted 就表示，實例已經被完全創建好了，此時，如果沒有其它操作的話，這個實例，就靜靜的 躺在我們的內存中，一動不動
},
// 接下來的是運行中的兩個事件
beforeUpdate() { // 這時候，表示 我們的界面還沒有被更新【數據被更新了嗎？ 數據肯定被更新了】
console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 數據是：' + this.msg)
// 得出結論： 當執行 beforeUpdate 的時候，頁面中的顯示的數據，還是舊的，此時 data 數據是最新的，頁面尚未和 最新的數據保持同步
},
updated() {
console.log('界面上元素的內容：' + document.getElementById('h3').innerText)
console.log('data 中的 msg 數據是：' + this.msg)
// updated 事件執行的時候，頁面和 data 數據已經保持同步了，都是最新的
}
});
</script>
</body>
2、基本語法
1、插值操作
Mustache語法
<div id="app">
<h2>{{massage}}</h2>
<h2>{{massage}},洛依塵</h2>
<h2>{{firstName+lastName}}</h2>
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{counter*2}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好",
firstName:"kobe",
lastName:"bryant",
counter:200
}
})
</script>
</body>
v-once指令
該指令后面不需要跟任何表達式(比如之前的v-for后面是由跟表達式的
該指令表示元素和組件(組件后面才會學習)只渲染- 次,不會隨着數據的改變而改變
<h2 v-once>{{massage}}</h2>
v-html
該指令后面往往會跟上一個string類型
會將string的html解析出來並且進行渲染
<h2>{{url}}</h2> <!-- <a href="www.baidu.com">百度一下</a> -->
<h2 v-html="url"></h2> <!-- 百度一下 -->
v-text
都是用於將數據顯示在界面中，但是通常只接受一個string類型
<h2 v-text="massage">,洛依塵</h2> <!--你好-->
v-pre
用於跳過這個元素和它子元素的編譯過程,用於顯示原本的Mustache語法
<h2 v-pre>{{massage}}</h2> <!-- {{massage}} -->
v-cloak
在某些情況下,f防止瀏覽器可能會直接顯然出未編譯的Mustache標簽。
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<div id="app" v-cloak>
<h2>{{massage}}</h2>
<h2 v-once>{{massage}}</h2>
<h2>{{url}}</h2> <!-- <a href="www.baidu.com">百度一下</a> -->
<h2 v-html="url"></h2> <!-- 百度一下 -->
<h2 v-text="massage">,洛依塵</h2>
<!--你好-->
<h2 v-pre>{{massage}}</h2> <!-- {{massage}} -->
</div>
<body>
<script src="../js/vue.js"></script>
<script>
//在vue解析之前，div里有一個屬性c-cloak
//在vue解析之后，div里沒有一個屬性c-cloak
const app = new Vue({
el: "#app",
data: {
massage: "你好",
url: '<a href="www.baidu.com">百度一下</a>'
}
})
</script>
</body>
2、綁定屬性
v-bind
v-bind用於綁定一個或多個屬性值,或者向另-一個組件傳遞props值
<div id="app">
<!-- <img src="{{imgURL}}" alt=""> -->
<!-- 錯誤的用法:這里不可以使用mustache語法-->
<!-- 正確用法：使用v-band指令 -->
<a v-bind:href="aHref">百度</a>
<img v-bind:src='imgURL' alt="" >
<!-- 語法糖的寫法 -->
<a :href="aHref">百度</a>
<img :src='imgURL' alt="" >
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好",
imgURL:'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
aHref:"https://www.baidu.com/"
}
})
</script>
</body>
v-bind 動態綁定class（對象語法）
- 可以通過{ }綁定一個類
- 也可以通過判斷，傳入多個值
- 和普通類同時存在，並不沖突
- 如果過於復雜，可以放在一個methods或者computed中
<style>
.active{
color: red;
}
</style>
</head>
<div id="app">
<!-- <h2 class="active">{{massage}}</h2>
<h2 :class="active">{{massage}}</h2> -->
<!-- <h2 :class="{類名1:ture,類名2:boolean}">{{massage}}</h2> 對class對象進行選擇-->
<h2 v-bind:class="{active: isActive , line: isLine}">{{massage}}</h2>
<!-- 將內容放在一個methods里，並調用 -->
<h2 v-bind:class="getClasses()">{{massage}}</h2>
<button v-on:click="bntClick">按鈕</button>
<!-- 監聽按鈕，使用bntClick方法 -->
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好",
active:'active',
isActive:true, //設置boolean值決定是否啟用
isLine:true
},
methods:{
bntClick: function(){
this.isActive=!this.isActive
},
getClasses:function(){
return {active: this.isActive, line: this.isLine}
}
}
})
</script>
</body>
v-bind 動態綁定class（數組語法）
<div id="app">
<!-- 如果在[]數組里的元素加了引號，代表他是一個字符串，而不是引用一個變量 -->
<h2 :class="[active,line]">{{massage}}</h2>
<h2 :class="['active','line']">{{massage}}</h2>
<h2 :class="getClasses()">{{massage}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好",
active:"aaa",
line:"bbb"
},
methods:{
getClasses:function(){
return [this.active,this.line]
}
}
})
</script>
</body>
小作業：點擊列表中的哪一項, 那么該項的文字變成紅色
<style>
.active {
color: red;
}
</style>
</head>
<div id="app">
<ul>
<li v-for="(item, index) in movies" :class="{active: currentIndex === index}" @click="liClick(index)">
<!-- {active: currentIndex === index}當currentIndex === index為true時，改變顏色 -->
{{index}}.{{item}}
</li>
</ul>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
movies: ['海王', '火影忍者', '進擊的巨人', '死神'],
currentIndex: 0
},
methods: {
liClick(index) {
this.currentIndex = index
}
}
})
</script>
</body>
v-bind 綁定style
<div id="app">
<!-- <h2 :style="{key(屬性名):value(屬性值)}">{{massage}}</h2> -->
<!-- 這里要加' '要不然vue會去解析50px這個變量然后報錯 -->
<h2 :style="{fontSize: '50px'}">{{massage}}</h2>
<!-- finalSize當成一個變量在使用 -->
<h2 :style="{fontSize: finalSize}">{{massage}}</h2>
<!-- 也可以拼接 -->
<h2 :style="{fontSize: finalSize + 'px',color:finalColor}">{{massage}}</h2>
<!-- 數組語法 -->
<h2 :style="[baseStyle,baseStyle1]">{{massage}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好",
finalSize: 100,
finalColor: 'red',
baseStyle:{color:'red'},
baseStyle1:{fontSize:'75px'}
}
})
</script>
</body>
3、計算屬性
一、什么是計算屬性
模板內的表達式非常便利，但是設計它們的初衷是用於簡單運算的。在模板中放入太多的邏輯會讓模板過重且難以維護。
二、計算屬性的用法
在一個計算屬性里可以完成各種復雜的邏輯，包括運算、函數調用等，只要最終返回一個結果就可以。
<div id="app">
<h2>{{firstName+' '+lastName}}</h2>
<h2>{{fullName}}</h2>
<h2>總價格:{{totalPrice}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName:"luo",
lastName:"yichen",
books:[
{id:100, name: 'java核心技術' , price:100},
{id:101, name: 'c核心技術' , price:100},
{id:102, name: 'php核心技術' , price:100},
{id:103, name: 'python核心技術' , price:100}
]
},
// computed: 計算屬性()
computed:{
fullName:function(){
return this.firstName+' '+this.lastName
},
totalPrice:function(){
let result =0
for (let i=0;i < this.books.length; i++){
result += this.books[i].price
}
return result;
}
}
})
</script>
計算屬性的getter和setter
每個計算屬性都包含一個getter和一個setter
- 在上面的例子中,我們只是使用getter來讀取。
- 在某些情況下,你也可以提供一個setter方法 (不常用)。
- 在需要寫setter的時候,代碼如下: .
<div id="app">
<h2>{{fullName}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "luo",
lastName: "yichen",
},
computed: {
// fullName: function () {
// return this.firstName + ' ' + this.lastName
// }
// 計算屬性一般沒有set值，只讀屬性。
fullName:{
set: function(newValue){
const names = newValue.split(" ");
this.firstName = names[0];
this.lastName = names[1];
},
get: function(){
return this.firstName + ' ' + this.lastName
}
},
// 簡潔寫法
// fullName:function(){
// return this.firstName+' '+this.lastName
// }
}
})
</script>
</body>
計算屬性與methods對比
<div id="app">
<!-- 通過拼接：語法過於繁瑣 -->
<h2>{{firstName}} {{lastName}}</h2>
<!-- 通過定義methods 每次都要調用-->
<h2>{{getFullName()}}</h2>
<!-- 通過computed 如果沒有發生改變只需要調用一次-->
<h2>{{fullName}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
firstName: "luo",
lastName: "yichen"
},
methods: {
getFullName: function () {
return this.firstName + ' ' + this.lastName
}
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
4、事件監聽
可以用
v-on指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。獲取到瀏覽器參數的event對象: $event
<div id="app">
<h2>{{counter}}</h2>
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
<!-- 語法糖 當沒參數時（）可以不用寫 -->
<button @click="increment">+</button>
<button @click="decrement">-</button>
<!-- 事件調用時沒有參數 -->
<button @click="bnt1Click()">按鈕1</button>
<button @click="bnt1Click">按鈕1</button>
<!-- 在事件定義前，寫函數省略了小括號，但是方法本身需要一個參數,這個時候
Vue會將瀏覽器默認生成的event事件對象作為參數傳入方法中 -->
<button @click="bnt2Click(123)">按鈕2</button>
<button @click="bnt2Click()">按鈕2</button>
<button @click="bnt2Click">按鈕2</button>
<!-- 定義方法時，我們需要event對象，同時又需要其他參數 -->
<!-- 在調用方式時，如何手動的獲取到瀏覽器參數的event對象: $event -->
<button @click="bnt3Click('abc',$event)">按鈕3</button>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
counter: 0
},
methods:{
increment(){
this.counter++
},
decrement(){
this.counter--
},
bnt1Click(){
console.log("bnt1Click");
},
bnt2Click(abc){
console.log("--------------",abc);
},
bnt3Click(abc,event){
console.log("++++++++++++++", abc,event);
}
}
})
// 如果我們函數需要參數，但是沒有傳入參數，那么函數的形參為undefined
function abc(name){
console.log(name);
}
abc()
</script>
</body>
v-on的修飾符
.stop修飾符的使用
當多對標簽進行重疊的時候, 你點擊最上面的一層標簽的時候, 會自動的冒泡到他下面的所有標簽上面
而.stop就是阻止冒泡使用的.prevent修飾符的使用
在
form表單提交時候或者在點擊a標簽的時候, 會阻止提交或跳轉.keyup監聽某個鍵盤的鍵帽
監聽某個鍵盤的鍵位
.once修飾符的使用
綁定后只會觸發一次
<div id="app">
<!-- 1. .stop -->
<div @click='divClick'>
aaaaa
<button @click.stop='bntClick'>按鈕</button>
</div>
<!-- 2. .prevent -->
<form action="baidu">
<input type="submit" value="提交" @click.prevent='submitClick'>
</form>
<!-- 3. 監聽某個鍵盤的鍵位 -->
<input type="text" @keyup.enter="keyUp">
<!-- 4. once修飾符的使用 -->
<button @click.once='bnt2Click'>按鈕</button>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好"
},
methods: {
bntClick() {
console.log('bnt')
},
divClick() {
console.log('div')
},
submitClick() {
console.log("submitClick")
},
keyUp() {
console.log("up")
},
bnt2Click() {
console.log('bnt2');
}
}
})
</script>
</body>
5、條件判斷
v-if的原理：
v-if后面的條件為false時,對應的元素以及其子元素不會渲染。
也就是根本沒有不會有對應的標簽出現在DOM中。
<div id="app">
<h2 v-if="score>90">優秀</h2>
<h2 v-else-if="score>80">良好</h2>
<h2 v-else-if="score>60">及格</h2>
<h2 v-else>不及格</h2>
<h1>{{result}}</h1>
<h2 v-if="isShow">{{massage}}</h2>
<h1 v-else>當isShow為false時顯示我</h1>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好",
isShow: true,
score: 99
},
computed: {
result() {
let showMessage = '';
if (this.score >= 90) {
showMessage = "優秀"
} else if (this.score >= 80) {
showMessage = "良好"
}
// ...
return showMessage
}
}
})
</script>
</body>
用戶切換的小案例
<div id="app">
<span v-if="isUser">
<label for="username">用戶賬號</label>
<input type="text" id="username" placeholder="用戶賬號" key='username'>
</span>
<span v-else>
<label for="emailname">用戶郵箱</label>
<input type="text" id="emailname" placeholder="用戶郵箱" key='emailname'>
</span>
<button @click="isUser = !isUser">切換類型</button>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
isUser:true
}
})
</script>
</body>
小問題:
- 如果我們在有輸入內容的情況下,切換了類型,我們會發現文字依然顯示之前的輸入的內容。
- 但是按道理講,我們應該切換到另外一個input元素中了。
- 在另一個input元素中,我們並沒有輸入內容。
- 為什么會出現這個問題呢?
問題解答:
- 這是因為Vue在進行DOM渲染時,出於性能考慮,會盡可能的復用已經存在的元素,而不是重新創建新的元素。
- 在上面的案例中, Vue內部會發現原來的input元素不再使用,直接作為else中的input來使用了.
解決方案:
- 如果我們不希望Vue出現類似重復利用的問題,可以給對應的input添加key
- 並且我們需要保證key的不同
Virtual DOM 是什么？
Virtual DOM 其實就是一棵以 JavaScript 對象( VNode 節點)作為基礎的樹，用對象屬性來描述節點，實際上它只是一層對真實 DOM 的抽象。最終可以通過一系列操作使這棵樹映射到真實環境上。
簡單來說，可以把Virtual DOM 理解為一個簡單的JS對象，並且最少包含標簽名( tag)、屬性(attrs)和子元素對象( children)三個屬性。不同的框架對這三個屬性的命名會有點差別。
對於虛擬DOM，咱們來看一個簡單的實例，就是下圖所示的這個，詳細的闡述了模板 → 渲染函數 → 虛擬DOM樹 → 真實DOM的一個過程
Virtual DOM 作用是什么？
虛擬DOM的最終目標是將虛擬節點渲染到視圖上。但是如果直接使用虛擬節點覆蓋舊節點的話，會有很多不必要的DOM操作。例如，一個ul標簽下很多個li標簽，其中只有一個li有變化，這種情況下如果使用新的ul去替代舊的ul,因為這些不必要的DOM操作而造成了性能上的浪費。
為了避免不必要的DOM操作，虛擬DOM在虛擬節點映射到視圖的過程中，將虛擬節點與上一次渲染視圖所使用的舊虛擬節點（oldVnode）做對比，找出真正需要更新的節點來進行DOM操作，從而避免操作其他無需改動的DOM。
其實虛擬DOM在Vue.js主要做了兩件事：
- 提供與真實DOM節點所對應的虛擬節點vnode
- 將虛擬節點vnode和舊虛擬節點oldVnode進行對比，然后更新視圖
v-if和v-show的區別
v-show控制的是節點的display屬性 v-if是將節點刪除了 如果節點需要頻繁顯示隱藏 使用v-show性能更佳！
<div id="app">
<!-- v-if: 當條件為false時，包含v-if指令的元素，根本就不會存在dom中 -->
<h2 v-if='isShow' id="aaa">{{massage}}</h2>
<!-- V- show:當條件為false時，v-show只是給我們的元素添加一個行內樣式: display: none -->
<h2 v-show='isShow' id="bbb">{{massage}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好",
isShow: true
}
})
</script>
</body>
6、循環遍歷
當我們有一組數據需 要進行渲染時,我們就可以使用v-for來完成。
v-for的語法類似於JavaScript中的for循環。
格式如下: item in items的形式。
<div id="app">
<!-- 1.在遍歷的過程中，沒有使用索引值（下標值） -->
<ul>
<li v-for='item in names'>{{item}}</li>
</ul>
<!-- 2.在遍歷過程中,獲取索引值 -->
<ul>
<li v-for='(item,index) in names'>
{{index+1}}.{{item}}
</li>
</ul>
<!-- 1.在遍歷對象的過程中，如果只是獲取一個值，那么獲取到的是value -->
<ul>
<li v-for="item in info">{{item}}</li>
</ul>
<!-- 2.， 獲取key和value 格式(value,key) -->
<ul>
<li v-for="(value,key) in info">{{value}}-{{key}}</li>
</ul>
<!-- 3. 獲取key和value和index 格式(value,key,index)-->
<ul>
<li v-for="(value,key,index) in info">{{value}}-{{key}}-{{index}}</li>
</ul>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
names: ['why', 'who', 'what', 'where'] //遍歷數組
},
info: { //遍歷對象
name: 'lyc',
age: 18,
height: 1.88
}
})
</script>
</body>
v-for加key屬性
-
為什么需要這個key屬性呢(了解) ?
- 這個其實和Vue的虛擬DOM的Diff算法有關系。
- 這里我們借用React' S diff algorithm中的一張圖來簡單說明一下:
-
當某一層有很多相同的節點時,也就是列表節點時,我們希望插入一一個新
的節點- 我們希望可以在B和C之間加一一個F , Diff算法默認執行起來是這樣的。
- 即把C更新成F , D更新成C , E更新成D ,最后再插入E ,是不是很沒有
效率?
-
所以我們需要使用key來給每個節點做一個唯一標識
-
Diff算法就可以正確的識別此節點
-
0找到正確的位置區插入新的節點。
-
所以一句話, key的作用主要是為了高效的更新虛擬DOM。
哪些數組方法是響應式的
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
letters: ['A', 'C', 'B', 'D', 'E']
},
methods: {
btnClick() {
// 1.push() 在數組最后添加元素
this.letters.push('aaa','bbb')
// 2.pop() 在數組最后刪除一個元素
this.letters.pop();
// 3.shift() 刪除在數組第一個元素
this.letters.shift();
// 4.unshift() 在數組最前面添加元素
this.letters.unshift('ddd','ddd');
// 5.splice() 刪除/插入/替換元素
// 刪除元素: 第一參數傳入你從第幾個元素開始刪除，第二參數傳入你要刪除的幾個元素(如果沒有傳,就刪除后面所有元素)
// 插入元素: 第二個傳入0，后面跟上要添加的值
// 替換元素: 第二參數傳入你要刪除元素，后面追加你要寫入的元素完成替換
this.letters.splice(1,3,'m','n','l')
// 6.sort() 排序
this.letters.sort()
// 7.reverse() 反轉
this.letters.reverse()
// 注意：通過索引值直接來修改數組中的元素 不是響應式
// this.letters[0]='bbbbbbbbbbbb'
// set(要修改的對象，索引值，修改后的值)
Vue.set(this.letters,0,'bbbbbb')
}
}
})
// 擴展知識：可變參數
// function sum(...sum){
// console.log(sum);
// }
// sum(11,223,44,56,77,889,9,1)
</script>
</body>
6、表單綁定
- 表單控件在實際開發中是非常常見的。特別是對於用戶信息的提交,需要大量的表單。
- Vue中使用v-model指令來實現表單元素和數據的雙向綁定。
<body>
<div id="app">
<input type="text" v-model="massage">
{{massage}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好"
}
})
</script>
</body>
- 當我們在輸入框輸入內容時
- 因為input中的v-model綁定了message ,所以會實時將輸入的內容傳遞給message , message發生改變。
- 當message發生改變時,因為上面我們使用Mustache語法,將message的值插入到DOM中,所以DOM會發生響應的改變。
- 所以,通過v-model實現了雙向的綁定。
原理：
<div id="app">
<!-- <input type="text" v-model="massage"> -->
<!-- <input type="text" :value="massage" @input="valueChange"> -->
<input type="text" :value="massage" @input="massage = $event.target.value">
{{massage}}
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
massage: "你好"
},
methods: {
valueChange(event) {
this.massage = event.target.value;
}
}
})
</script>
</body>
v-model結合radio類型
<div id="app">
<label for="">
<input type="radio" id="male" value="男" v-model="sex">男
</label>
<label for="">
<input type="radio" id="female" value="女" v-model="sex">女
</label>
<h2>{{sex}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
sex:'男'
}
})
</script>
</body>
v-model結合checkbox類型
單個勾選框: .
- v-modelI即為布爾值。
- 此時input的value並不影響v-model的值。
多個復選框:
- 多個復選框時,因為可以選中多個,所以對應的data中屬性是一個數組。
- 當選中某一個時 ,就會將input的value添加到數組中。
<div id="app">
<!-- 單選框 -->
<!-- <label for="agree">
<input type="checkbox" id="agree" v-model="isAgree">同意協議
</label>
<h2>{{isAgree}}</h2>
<button :disabled="!isAgree">下一步</button> -->
<!-- 多選框 -->
<!-- <input type="checkbox" value="籃球" v-model="hobbies">籃球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="排球" v-model="hobbies">排球
<input type="checkbox" value="手球" v-model="hobbies">手球
<h2>{{hobbies}}</h2> -->
<label v-for="item in originHobbies" :for="item">
<input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
</label>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
isAgree: false,//單選框
hobbies:[],//多選框
originHobbies:['籃球','足球','乒乓球','台球','高爾夫球']
//也可以通過值綁定來從服務器獲取值
}
})
</script>
</body>
v-model結合select
單選:只能選中一個值。
- v-model綁定的是一個值。
- 當我們選中option中的一個時,會將它對應的value賦值到mySelect中
多選:可以選中多個值。
- v-model綁定的是一個數組。
- 當選中多個值時,就會將選中的option對應的value添加到數組mySelects中
<body>
<div id="app">
<!-- 1、選擇一個 -->
<select name="abc" id="" v-model="fruit">
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="榴蓮">榴蓮</option>
<option value="西瓜">西瓜</option>
</select>
<h2>{{fruit}}</h2>
<!-- 2、選擇多個 -->
<select name="abc" id="" v-model="fruits" multiple>
<option value="蘋果">蘋果</option>
<option value="香蕉">香蕉</option>
<option value="榴蓮">榴蓮</option>
<option value="西瓜">西瓜</option>
</select>
<h2>{{fruits}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
fruit:"香蕉",
fruits:[]
}
})
</script>
</body>
v-model的修飾符
lazy修飾符:
- 默認情況下, v- model默認是在input事件中同步輸入框的數據的。
- 也就是說, 一旦有數據發生改變對應的data中的數據就會自動發生
改變。 - lazy修飾符可以讓數據在失去焦點或者回車時才會更新:
number修飾符:
- 默認情況下,在輸入框中無論我們輸入的是字母還是數字,都會被
當做字符串類型進行處理。 - 但是如果我們希望處理的是數字類型,那么最好直接將內容當做數
字處理。 - number修飾符可以讓在輸入框中輸入的內容自動轉成數字類型:
trim修飾符:
- 如果輸入的內容首尾有很多空格,通常我們希望將其去除
- trim修飾符可以過濾內容左右兩邊的空格
<div id="app">
<!-- 1.修飾符：lazy -->
<input type="text" v-model.lazy="message">
<h2>{{message}}</h2>
<!-- 2.修飾符：number -->
<input type="number" v-model.number="age">
<h2>{{typeof age}}</h2>
<!-- 3.修飾符：trim -->
<input type="text" v-model.trim="name">
<h2>{{name}}</h2>
</div>
<body>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app",
data: {
message: "你好",
age:12,
name:''
}
})
</script>
</body>
綜合-書籍購物車案例
- HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div id="app">
<div v-if="books.length">
<table>
<thead>
<tr>
<th></th>
<th>書籍名稱</th>
<th> 出版日期</th>
<th> 價格</th>
<th> 購買數量</th>
<th> 操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in books">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.date}}</td>
<td>{{item.price | showPrice}}</td>
<td>
<button @click="decrement(index)" v-bind:disabled="item.count <= 1">-</button>
{{item.count}}
<button @click="increment(index)">+</button>
</td>
<td><button @click="removeHandler(index)">移除</button></td>
</tr>
</tbody>
</table>
<h2>
總價格: {{totalPrice | showPrice}}
</h2>
</div>
<div v-else>
<h1>購物車為空</h1>
</div>
</div>
<script src="../js/vue.js"></script>
<script src="./main.js"></script>
</body>
</html>
- CSS
table{
border: 1px solid #000;
border-collapse: collapse;
border-spacing: 0;
}
th,td{
padding: 8px 16px;
border: 1px solid #000;
text-align: left;
}
th{
background-color: #f7f7f7;
color: #5c6b77;
font-weight: 600;
}
- JS
const app = new Vue({
el: "#app",
data: {
books: [{
id: 1,
name: '《算法導論》',
date: "2006-9",
price: 85.00,
count: 1
},
{
id: 2,
name: '《算法導論》',
date: "2006-9",
price: 85.00,
count: 1
},
{
id: 3,
name: '《算法導論》',
date: "2006-9",
price: 85.00,
count: 1
},
{
id: 4,
name: '《算法導論》',
date: "2006-9",
price: 85.00,
count: 1
}
]
},
methods: {
// getFinalPrice(price){
// return '￥'+price.toFixed(2) //toFixed(2)保留兩位小數
// }
increment(index) {
this.books[index].count++
},
decrement(index) {
this.books[index].count--
},
removeHandler(index) {
this.books.splice(index, 1)
}
},
filters: { //過濾器
showPrice(price) {
return '￥' + price.toFixed(2)
}
},
computed: {
totalPrice() {
let totalPrice = 0;
for (let i = 0; i < this.books.length; i++) {
totalPrice += this.books[i].price * this.books[i].count;
}
return totalPrice;
}
}
})
JS高階函數
編程范式：命令式編程/聲明式編程
編程范式：面向對象編程(第一公民:對象)/函數式編程（第一公民:函數)
filter/map/reduce
filter中的回調函數有一個要求：必須返回一個 boolean值
true:當返回true時，函數內部會自動將這次回調的n加入到新的數組中
false:當返回false時，函數內部會過濾掉這次的n
- 基本寫法
const nums = [10,20,111,222,444,40,50]
// 1.需求:取出小於100的數字
let newNums = []
for(let n of nums){
if(n > 100){
newNums.push(n)
}
}
// 2.需求：將所有小於160的數字進行轉化：全部*2
let new2Nums = []
for(let n of newNums){
new2Nums.push(n*2)
}
// 3.需求：將所有new2Nums數字相加，得到最終的記過
let total = 0
for(let n of new2Nums){
total +=n
}
console.log(total)
- 高階寫法
const nums = [10,20,111,222,444,40,50]
// 1.filter函數的使用
let newNums = nums.filter(function(n){
return n<100
})
console.log(newNums)
// 2.map函數的使用
let new2Nums = newNums.map(function(n){
return n*2
})
console.log(new2Nums)
// 3.reduce函數的使用
// reduce作用對數組中所有的內容進行匯總
let total = new2Nums.reduce(function(preValue,n){
return preValue + n;
},0)
console.log(total)
// 第一次： revalue 0 n 20
// 第二次： revalue 20 n 40
// 第二次： revalue 60 n 80
// 第二次： revalue 140 n 100
// 240
- 高階綜合寫法
const nums = [10,20,111,222,444,40,50]
// 綜合
let total = nums.filter(function(n){
return n<100
}).map(function(n){
return n*2
}).reduce(function(preValue,n){
return preValue + n;
},0) //初始化
console.log(total)
//使用箭頭函數進一步簡化
let total = nums.filter(n => n<100).map(n => n*2).reduce((pre,n) => pre+n)
console.log(total)