day67:Vue:es6基本語法&vue.js基本使用&vue指令系統
- 2020 年 10 月 15 日
- 筆記
- PythonS31-筆記, Python全棧31期-筆記
目錄
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
官方網站：
中文：//cn.vuejs.org/
英文：//vuejs.org/
官方文檔：//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庫的基本使用
在官網下載地址： //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>
