目錄
1.4.let宣告的全域性變數不從屬於window物件，var宣告的全域性變數從屬於window物件
Vue前戲:es6的基本語法
1.es6中的let特點
1.1.區域性作用域
如果在程式碼塊外呼叫程式碼塊內定義的變數，var和let的區別如下所示
if (1){ var a = 'xxx'; } console.log(a); // xxx if (1){ let b = 'xxx'; } console.log(b);// 報錯
如果在函式外呼叫函式內的變數,var和let都不可以呼叫
| 在程式碼塊外呼叫程式碼塊內的變數 | 在函式體外呼叫函式體內的變數 | |
| var | 可以 | 不可以 |
| let | 不可以 | 不可以 |
2.不存在變數提升
var命令會發生”變數提升“現象，即變數可以在宣告之前使用，值為undefined。這種現象多多少少是有些奇怪的，按照一般的邏輯，變數應該在宣告語句之後才可以使用。
為了糾正這種現象，let命令改變了語法行為，它所宣告的變數一定要在宣告後使用，否則報錯
console.log(xx); //undefined var xx = 'oo'; console.log(xxx); //報錯 let xxx = 'ooo';
3.不能重複宣告
var可以重複宣告，而let不可以重複宣告
var a = 'xx' let a = 'oo'//報錯
4.let宣告的全域性變數不從屬於window物件，var宣告的全域性變數從屬於window物件
關於第4個特點的簡單說明：
ES5宣告變數只有兩種方式：var和function。
ES6有let、const、import、class再加上ES5的var、function共有六種宣告變數的方式
還需要了解頂層物件：瀏覽器環境中頂層物件是window.
ES5中，頂層物件的屬性等價於全域性變數。var a = 10; window.a
ES6中，有所改變：var、function宣告的全域性變數，依然是頂層物件的屬性；let、const、class宣告的全域性變數不屬於頂層物件的屬性，也就是說ES6開始，全域性變數和頂層物件的屬性開始分離、脫鉤，目的是以防宣告的全域性變數將window物件的屬性造成汙染，因為window物件是頂層物件，它裡面的屬性是各個js程式中都可以使用的，不利於模組化開發，並且window物件有很多的自有屬性，也為了防止對window的自由屬性的汙染，所以在ES6中將頂層物件和全域性變數進行隔離。
var a = 1; console.info(window.a); // 2 let b = 2; console.info(window.b); //undefined
2.es6中定義常量和字串格式化
定義常量:const
// const ：特點： 1.區域性作用域 2.不存在變數提升 3.不能重複宣告 4.一般宣告不可變的量 const PI = 3.1415926; pi = 'xx' // 報錯，常量不能修改！
字串格式化:${...}
tab鍵上面的反引號，${變數名}來插入值
let bb = 'jj'; var ss = `你好${bb}`; console.log(ss); // 你好jj'
3.es5全域性和區域性變數的作用域
# 函式的全域性變數和區域性變數 '''1.區域性變數'''： 在JavaScript函式內部宣告的變數（使用 var）是區域性變數，所以只能在函式內部訪問它（該變數的作用域是函式內部）。只要函式執行完畢，本地變數就會被刪除。 '''2.全域性變數''' 在函式外宣告的變數是全域性變數，網頁上的所有指令碼和函式都能訪問它。 # 變數生存週期： JavaScript變數的生命期從它們被宣告的時間開始。 區域性變數會在函式執行以後被刪除。 全域性變數會在頁面關閉後被刪除。 # 作用域 首先在函式內部查詢變數，找不到則到外層函式查詢，逐步找到最外層。
4.es5和es6的函式對比
//ES5函式寫法 function add(x){ return x } add(5);
//ES5的匿名函式 var add = function (x) { return x }; add(5);
//ES6的匿名函式 let add = function (x) { return x }; add(5);
//ES6的箭頭函式,就是上面方法的簡寫形式 let add = (x) => { return x }; console.log(add(20));
//更簡單的寫法，但不是很易閱讀 let add = x => x; console.log(add(5));
// 多個引數的時候必須加括號，函式返回值還是隻能有一個，沒有引數的，必須寫一個() let add = (x,y) => x+y;
5.es5和es6中自定義物件封裝函式的寫法
1.es5物件中封裝函式的方法
// es5物件中封裝函式的方法 var name = '子俊'; var person1 = { name:'超', age:18, f1:function () { // 在自定義的物件中放函式的方法 console.log(this);// this指向的是當前的物件,{name: "超", age: 18, f1: ƒ} console.log(this.name) // '超' } }; person1.f1(); // 通過自定義物件來使用函式
2.es6中自定義物件中來封裝箭頭函式的寫法
// ES6中自定義物件中來封裝箭頭函式的寫法 let username = '子俊'; //-- window.username let person2 = { name:'超', age:18, //f1:function(){}; f1: () => { // 在自定義的物件中放函式的方法 console.log(this); // this指向的不再是當前的物件了，而是指向了person的父級物件(稱為上下文)，而此時的父級物件是我們的window物件，Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} console.log(window);// 還記得window物件嗎，全域性瀏覽器物件，列印結果和上面一樣：Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} console.log(this.username) // '子俊' } }; person2.f1(); // 通過自定物件來使用函式 person2 -- window.person2
而我們在使用this的時候，希望this是person物件，而不是window物件，所以還有下面這種寫法-->單體模式
let person3 = { name:'超', age:18, //f1:function(){}; //f1(){} f1(){ // 相當於f1:function(){},只是一種簡寫方式,稱為物件的單體模式寫法，寫起來也簡單，vue裡面會看用到這種方法 console.log(this);// this指向的是當前的物件,{name: "超", age: 18, f1: ƒ} console.log(this.name) // '超' } }; person3.f1()
6.es5和es6的類寫法對比
1.es5寫類的方式
function Person(name,age) { //封裝屬性 this.name = name; //this--Python的self this.age = age; }
//類中封裝方法，原型鏈 Person.prototype.f1 = function () { console.log(this.name);//this指的是Person物件, 結果：'超' };
//類中封裝方法，箭頭函式的形式寫匿名函式 Person.prototype.f2 = ()=>{ console.log(this); //Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …} this指向的是window物件 };
其實在es5我們將js的基本語法的時候，沒有將類的繼承，但是也是可以繼承的，在繼承之後，我們是不是可以通過子類例項化的物件呼叫父類的方法啊，當然是可以的，知道一下就行了，我們下面來看看es6裡面的類怎麼寫
2.es6中寫類的方式
class Person2{ constructor(name,age){ // 物件裡面的單體模式，記得上面將函式的時候的單體模式嗎，這個方法類似於python的__init__()構造方法，寫引數的時候也可以寫關鍵字引數 constructor(name='超2',age=18 // 封裝屬性 this.name = name; this.age = age; } // 注意這裡不能寫逗號 //封裝方法 showname(){ console.log(this.name); } // 不能寫逗號 showage(){ console.log(this.age); } } let p2 = new Person2('超2',18); p2.showname() //呼叫方法 '超2'
Vue.js快速入門使用
1.vue.js庫的下載
另外幾個常見的工具庫：react.js /angular.js
官方網站：
中文：https://cn.vuejs.org/
英文：https://vuejs.org/
官方文件：https://cn.vuejs.org/v2/guide/
vue.js目前有1.x、2.x和3.x 版本，我們學習2.x版本的。2.x到3.x是平滑過渡的，也就是說你之前用2.x寫的程式碼，用3.x的版本的vue.js也是沒問題的。
2.vue.js庫的基本使用
在官網下載地址： https://cn.vuejs.org/v2/guide/installation.html
vue的引入類似於jQuery，開發中可以使用開發版本vue.js，產品上線要換成vue.min.js。
1.vue的最基本使用語法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue.min.js"></script> </head> <body> <div id="app"> <!-- {{ message }} 表示把vue物件裡面data屬性中的對應資料輸出到頁面中 --> <!-- 在雙標籤中顯示資料要通過{{ }}來完成 --> <p>{{ message }}</p> </div> </body> <script> // 起源：vue.js的程式碼開始於一個Vue物件。所以每次運算元據都要宣告Vue物件開始。 let vm = new Vue({ el:'#app', // 設定當前vue物件要控制的標籤範圍。 // data屬性寫法方式1 data:{ // data是將要展示到HTML標籤元素中的資料。 message: 'hello world!', } // data屬性寫法方式2 data:function () { return { 'msg':'掀起你的蓋頭來1！' } } // data屬性寫法方式3 data(){ // 單體模式 這種寫法用的居多，並且後面學習中有個地方一定要這樣寫，所以我們就記下來這種寫法就可以了 return { 'msg':'掀起你的蓋頭來2！', } } }); </script> </html>
2.關於上述程式碼的總結
// 1. vue的使用要從建立Vue物件開始 var vm = new Vue(); // 2. 建立vue物件的時候，需要傳遞引數，是自定義物件，自定義物件物件必須至少有兩個屬性成員 var vm = new Vue({ el:"#app", data: { 資料變數:"變數值", 資料變數:"變數值", 資料變數:"變數值", }, }); // el:圈地，劃地盤，設定vue可以操作的html內容範圍，值就是css的id選擇器,其他選擇器也可以，但是多用id選擇器。 // data: 儲存vue.js中要顯示到html頁面的資料。 // 3. vue.js要控制器的內容外圍，必須先通過id來設定。 <div id="app"> <h1>{{message}}</h1> <p>{{message}}</p> </div>
3.vue中的變數可以直接進行一些簡單直接的js操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test vue</title> </head> <body> <div id="app"> <!-- vue的模板語法，和django的模板語法類似 --> <h2>{{ msg }}</h2> <!-- 放一個變數，會到data屬性中去找對應的值 --> <!-- 有人說，我們直接這樣寫資料不就行嗎，但是你注意，我們將來的資料都是從後端動態取出來的，不能寫死這些資料啊，你說對不對 --> <h2>{{ 'hello beautiful girl!' }}</h2> <!-- 直接放一個字串 --> <h2>{{ num+1 }}</h2> <!-- 四則運算 --> <h2>{{ 2+1 }}</h2> <!-- 四則運算 --> <h2>{{ {'name':'chao'} }}</h2> <!-- 直接放一個自定義物件 --> <h2>{{ person.name }}</h2> <!-- 下面data屬性裡面的person屬性中的name屬性的值 --> <h2>{{ 1>2?'真的':'假的' }}</h2> <!-- js的三元運算 --> <h2>{{ msg2.split('').reverse().join('') }}</h2> <!-- 字串反轉 --> </div> <!-- 1.引包 --> <script src="vue.js"></script> <script> //2.例項化物件 new Vue({ el:'#app', data:{ msg:'黃瓜', person:{ name:'超', }, msg2:'hello Vue', num:10, } }) </script> </body> </html>
3.vue.js的M-V-VM思想
Model 指代的就是vue物件的data屬性裡面的資料。這裡的資料要顯示到頁面中。
View 指代的就是vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” 。
ViewModel 資料驅動檢視 指代的是vue.js中我們編寫程式碼時的vm物件了，它是vue.js的核心，負責連線 View 和 Model，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的。
1.用程式碼來更加清晰的瞭解MVVM
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.min.js"></script> <script> window.onload = function(){ // 建立vm物件 var vm = new Vue({ el: "#app", data: { name:"大標題", age:16, }, }) } </script> </head> <body> <div id="app"> <!-- 在雙標籤中顯示資料要通過{{ }}來完成 --> <h1>{{name}}</h1> <p>{{age}}</p> <!-- 在表單輸入框中顯示資料要使用v-model來完成，模板語法的時候，我們會詳細學習 --> <input type="text" v-model="name"> </div> </body> </html>
在瀏覽器中可以在 console.log通過 vm物件可以直接訪問el和data屬性,甚至可以訪問data裡面的資料：
console.log(vm.$el) # #box vm物件可以控制的範圍 console.log(vm.$data); # vm物件要顯示到頁面中的資料 console.log(vm.message);# 這個 message就是data裡面宣告的資料,也可以使用 vm.變數名顯示其他資料,message只是舉例.
2.總結
// 1. 如果要輸出data裡面的資料作為普通標籤的內容，需要使用{{ }} // vue物件的data屬性： data:{ name:"小明", } // 標籤元素： <h1>{{ name }}</h1> // 2. 如果要輸出data裡面的資料作為表單元素的值，需要使用vue.js提供的元素屬性v-model // vue物件的data屬性： data:{ name:"小明", } // 表單元素： <input v-model="name"> 使用v-model把data裡面的資料顯示到表單元素以後，一旦使用者修改表單元素的值，則data裡面對應資料的值也會隨之發生改變，甚至，頁面中凡是使用了這個資料都會發生變化。
Vue指令系統的常用指令
在vue中，提供了很多指令，常用的有：v-html、v-if、v-model、v-for等等。
1.文字指令v-html和v-test
v-html相當於innerHtml
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test vue</title> </head> <body> <div id="app"> <!-- vue的模板語法 --> <div>{{ msg }}</div> <div v-text="msg"></div> <div v-html="msg"></div> </div> <script src="vue.js"></script> <script> new Vue({ el:'#app', data(){ //記著data中是一個函式，函式中return一個物件，可以是一個空物件，但必須return return{ msg:'<h2>超</h2>', //後端返回的是標籤，那麼我們就可以直接通過v-html渲染出來標籤效果 } } }) </script> </body> </html>
指令會在vm物件的data屬性的資料發生變化時，會同時改變元素中的其控制的內容或屬性。
Tip:因為vue的歷史版本原因，所以有一部分指令都有兩種寫法
vue1.x寫法 vue2.x的寫法 // v-html ----> {{ }} # vue2.x 也支援v-html // v-bind:屬性名 ----> :屬性 // v-on:事件名 ----> @事件名
2.條件渲染指令v-if和v-show
vue中提供了兩個指令可以用於判斷是否要顯示元素，分別是v-if和v-show。
1. v-if
標籤元素： <!-- vue物件最終會把條件的結果變成布林值 --> <h1 v-if="ok">Yes</h1> data資料： data:{ ok:false // true則是顯示，false是隱藏 }
2.v-else
v-else指令來表示 v-if 的“else 塊”，v-else 元素必須緊跟在帶 v-if 或者 v-else-if 的元素的後面，否則它將不會被識別。
標籤元素： <h1 v-if="ok">Yes</h1> <h1 v-else>No</h1> data資料： data:{ ok:false // true則是顯示，false是隱藏 }
3.v-else-if
可以出現多個v-else-if語句，但是v-else-if之前必須有一個v-if開頭。後面可以跟著v-else，也可以沒有。
標籤元素： <h1 v-if="num===1">num的值為1</h1> <h1 v-else-if="num===2">num的值為2</h1> <h1 v-else>num的值是{{num}}</h1> data資料： data:{ num:2 }
4.v-show
標籤元素： <h1 v-show="ok">Hello!</h1> data資料： data:{ ok:false // true則是顯示，false是隱藏 }
對於v-if和v-show總結
// 1.v-show後面不能v-else或者v-else-if // 2.v-show隱藏元素時，使用的是display:none來隱藏的，而v-if是直接從HTML文件中移除元素[DOM操作中的remove] // 3.v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。 // 4.v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。 // 5.相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。 // 6.一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。
3.操作屬性v-bind
1.格式
<標籤名 :標籤屬性="data屬性"></標籤名>
2.v-bind使用方法
<a v-bind:href="url1">百度</a> <!-- v-bind是vue1.x版本的寫法 --> <a :href="url2">淘寶</a> <!-- v-bind的簡寫，只需要寫冒號就可以了 -->
3.顯示wifi密碼效果：配合v-on事件繫結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test vue</title> </head> <body> <div id="app"> <input :type="type" v-model = "xxx"> <button @click="f1">{{ tip }}</button> </div> </body> <script src="vue.js"></script> <script> let vm = new Vue({ el:'#app', data(){ return{ tip:'顯示密碼', type:'password', msg:'', } }, methods:{ f1(){ if(this.type === 'password'){ this.type = 'text'; this.tip = '隱藏密碼'; } else{ this.type = "password"; this.tip = '顯示密碼'; } } } }) </script> </html>
4.事件繫結v-on和method屬性
有兩種事件操作的寫法，@事件名 和 v-on:事件名
<button v-on:click="num++">按鈕</button> <!-- v-on 是vue1.x版本的寫法 --> <button @click="num+=5">按鈕2</button>
總結
1. 使用@事件名來進行事件的繫結 語法： <h1 @click="num++">{{num}}</h1> 2. 繫結的事件的事件名，全部都是js的事件名： @submit ---> onsubmit @focus ---> onfocus ....
商城的商品增加減少數量示例
-
給vue物件新增運算元據的方法
-
在標籤中使用指令呼叫運算元據的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test vue</title> <script src="vue.js"></script> </head> <body> <div id="app"> <button @click="add">+1</button> <input type="text" v-model="num"> <button @click="sub">-1</button> </div> </body> <script> let vm = new Vue({ el:'#app', data:{ num:0, }, methods:{ add(){ this.num++ }, sub(){ if(this.num>0){ this.num-- } } } }) </script> </html>