vue-01-es6的基本語法、全域性和區域性變數和作用域、es5和es6的函式對比、自定義物件中封裝函式的寫法、vue使用、Vue指令系統的常用指令

Hi-CWJ發表於2020-10-15

一、es6的基本語法

1.let是區域性作用域,let程式碼塊內部生效,外部不能使用這個變數

if (1){
	let b = 'xxx';
}
	console.log(b);  //報錯
	
if (1){
	var a = 'xxx';
}
	console.log(a); //xxx  可以使用,但是函式不行

2.不存在變數提升

console.log(xx); //undefined
var xx = 'oo';

console.log(xxx);  //報錯
let xxx = 'ooo';

3.不能重複宣告（var可以重複宣告）

4.let宣告的全域性變數不從屬於window物件，var宣告的全域性變數從屬於window物件

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中將頂層物件和全域性變數進行隔離。
const 特點： 1.區域性作用域 2.不存在變數提升 3.不能重複宣告 4.一般宣告不可變的量
const pi = 3.1415926;

模板字串:tab鍵上面的反引號，${變數名}來插入值

  let bb = 'jj';
  var ss = `你好${bb}`;
  	
  console.log(ss); -- '你好jj'

前端的一道面試題(自行忽略)

let len = 10;
function fn() {
	console.info(this.len)
}
fn(); //undefined
let Person = {
	len: 5,
	say: function() {
		fn();  //undefined
		arguments[0](); //undefined  arguments是object型別，它內部以索引取值獲取的函式執行時，會以箭頭函式的形式執行，所以執行console.info(this.len)  這個this指向的其實是arguments物件，arguments物件有length屬性，但是沒有len屬性，length屬性是傳入的實參個數
	}
}
Person.say(fn);

二、es5全域性和區域性變數和作用域

1.函式的全域性變數和區域性變數

區域性變數：
	在JavaScript函式內部宣告的變數（使用 var）是區域性變數，所以只能在函式內部訪問它（該變數的作用域是函式內部）。只要函式執行完畢，本地變數就會被刪除。
全域性變數：
	在函式外宣告的變數是全域性變數，網頁上的所有指令碼和函式都能訪問它。

2.變數生存週期

JavaScript變數的生命期從它們被宣告的時間開始。
區域性變數會在函式執行以後被刪除。
全域性變數會在頁面關閉後被刪除。

三、es5和es6的函式對比

1.ES5寫法

function add(x){
    return x
}
add(5);

2.匿名函式

var add = function (x) {
    return x
};
add(5);

3.ES6的匿名函式

let add = function (x) {
    return x
};
add(5);

4.ES6的箭頭函式,就是上面方法的簡寫形式

let add = (x) => {
    return x
};
console.log(add(20));
// 更簡單的寫法，但不是很易閱讀
let add = x => x;
console.log(add(5));

多個引數的時候必須加括號，函式返回值還是隻能有一個，沒有引數的，必須寫一個()
let add = (x,y) => x+y;

四、自定義物件中封裝函式的寫法

1.es5物件中封裝函式的方法

var name = '子俊';
var person1 = {
    name:'超',
    age:18,
    f1:function () {  //在自定義的物件中放函式的方法
        console.log(this);//this指向的是當前的物件,{name: "超", age: 18, f1: ƒ}
        console.log(this.name)  // '超'
    }
};
//<h1 id='d1'>xxx</h1>
//document.getElementById('d1').onclick = function(){this.innerText;};
person1.f1();  //通過自定物件來使用函式

2.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()

五、es5和es6的類寫法對比（瞭解）

<script>
    //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物件
    };

    var p1 = new Person('超',18);
    p1.age
    
    p1.f1();
    p1.f2();
    //其實在es5我們將js的基本語法的時候，沒有將類的繼承，但是也是可以繼承的，還記得嗎，那麼你想，繼承之後，我們是不是可以通過子類例項化的物件呼叫父類的方法啊，當然是可以的，知道一下就行了，我們下面來看看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'
    //es6的類也是可以繼承的，這裡我們們就不做細講了，將來你需要的時候，就去學一下吧，哈哈，我記得是用的extends和super


</script>

六、vue使用

1.vue.js庫的下載

vue.js是目前前端web開發最流行的工具庫，由尤雨溪在2014年2月釋出的。

另外幾個常見的工具庫：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庫的基本使用

在github下載：https://github.com/vuejs/vue/releases

在官網下載地址： https://cn.vuejs.org/v2/guide/installation.html

vue的引入類似於jQuery，開發中可以使用開發版本vue.js，產品上線要換成vue.min.js。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="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!',
            }
          	// 方式2
            // data:function () {
            //     return {
            //         'msg':'掀起你的蓋頭來1！'
            //     }
            // }
			// 方式3
            data(){   // 單體模式  這種寫法用的居多，並且後面學習中有個地方一定要這樣寫，所以我們就記下來這種寫法就可以了
                  return {
                      'msg':'掀起你的蓋頭來2！',
                  }
              }
            });
    
    </script>
</html>

總結：

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>

4.vue.js的M-V-VM思想

MVVM 是Model-View-ViewModel 的縮寫，它是一種基於前端開發的架構模式。
Model 指代的就是vue物件的data屬性裡面的資料。這裡的資料要顯示到頁面中。
View 指代的就是vue中資料要顯示的HTML頁面，在vue中，也稱之為“檢視模板” 。
ViewModel（資料驅動檢視）指代的是vue.js中我們編寫程式碼時的vm物件了，它是vue.js的核心，負責連線 View 和Model，保證檢視和資料的一致性，所以前面程式碼中，data裡面的資料被顯示中p標籤中就是vm物件自動完成的。

<!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只是舉例.

總結：

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指令系統的常用指令

1.文字指令v-html和v-text

v-text相當於js程式碼的innerText，相當於我們上面說的模板語法，直接在html中插值了，插的就是文字，如果data裡面寫了個標籤，那麼通過模板語法渲染的是文字內容，這個大家不陌生，這個v-text就是輔助我們使用模板語法的

<!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屬性的資料發生變化時，會同時改變元素中的其控制的內容或屬性。
因為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

v-show後面不能v-else或者v-else-if

v-show隱藏元素時，使用的是display:none來隱藏的，而v-if是直接從HTML文件中移除元素[DOM操作中的remove]

v-if 是“真正”的條件渲染，因為它會確保在切換過程中條件塊內的事件監聽器和子元件適當地被銷燬和重建。

v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——直到條件第一次變為真時，才會開始渲染條件塊。

相比之下，v-show 就簡單得多——不管初始條件是什麼，元素總是會被渲染，並且只是簡單地基於 CSS 進行切換。

一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在執行時條件很少改變，則使用 v-if 較好。

3.操作屬性v-bind

格式：
	<標籤名 :標籤屬性="data屬性"></標籤名>

<p :title="str1">{{ str1 }}</p> <!-- 也可以使用v-html顯示雙標籤的內容，{{  }} 是簡寫 -->
<a :href="url2">淘寶</a>
<a v-bind:href="url1">百度</a>  <!-- v-bind是vue1.x版本的寫法 -->

3.事件繫結v-on和methods屬性

有兩種事件操作的寫法，@事件名和 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

密碼明文密文切換效果：配合v-on事件繫結

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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', //圈地,劃分vue的控制區域
        data(){ //資料屬性寫法,後面學的元件必須這樣寫
            return {
                tip:'睜眼',
                xxx:'',
                type:'password'

            }
        },
        methods:{
            // f1:function(){}
            f1() { //單體模式
                if (this.type === 'password'){
                    this.type='text';
                    this.tip = '閉眼';
                }
                else {
                    this.type='password';
                    this.tip = '睜眼';
                }
            }
        }

    })
</script>
</html>

商品增加減少數量

步驟：
	1. 給vue物件新增運算元據的方法
	2. 在標籤中使用指令呼叫運算元據的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="box">
        <!--<button @click="num++">+</button>-->
        <button @click="add">+</button>
        <input type="text" v-model="num">
       <!--    <button @click="num--">-</button>  -->
        <button @click="sub">-</button>
    </div>

    <script>
        let vm = new Vue({
            el:"#box",
            data:{
                num:0,
            },
            methods: {
                // add(){
                //     this.num++
                // },
                // sub(){
                //     if (this.num > 0){
                //         this.num--
                //     }
                //
                //
                // }
            }
        })
    </script>
</body>
</html>

Vue入門指南-02自定義全域性和區域性指令 (快速上手vue)
2019-03-16
Vue
十二、變數作用域：區域性變數、全域性變數，函式版名片管理系統—新增函式文件
2018-07-23
變數函式
javascript中的作用域（全域性變數和區域性變數）
2018-05-22
JavaScript變數
Dotnet的區域性函式和委託的對比
2021-02-03
函式
javascript基礎（函式與方法的區別，變數作用域，變數和函式的宣告提前，函式作用域）（十五）
2017-02-08
JavaScript函式變數
函式（三）作用域之變數作用域、函式巢狀中區域性函式作用域、預設值引數作用域
2020-11-12
函式變數巢狀
Python的全域性和區域性變數
2018-01-03
Python變數
test函式中的區域性變數
2022-02-28
函式變數
Python的區域性變數和全域性變數使用解惑
2017-08-16
Python變數
Python中的全域性變數和區域性變數
2018-10-05
Python變數
js-js的全域性變數和區域性變數
2018-11-01
JS變數
java 全域性變數和區域性變數
2018-07-27
Java變數
JavaScript —— 區域性變數和全域性變數
2013-07-20
JavaScript變數
jmeter全域性變數和區域性變數
2024-04-02
JMeter變數
javascript的函式的引數是區域性變數
2017-04-10
JavaScript函式變數
在vue專案中如何定義全域性變數全域性函式
2017-10-24
Vue變數函式
vue定義全域性變數和全域性方法
2018-08-01
Vue變數
vue 全域性函式的定義與任意呼叫
2020-11-18
Vue函式
es6和es5變數宣告和作用域的不同
2017-03-13
變數
酒店房間和 C++ 區域性變數的作用域
2014-06-06
C++變數
python全域性變數和區域性變數， global
2017-03-07
Python變數
JavaScript全域性作用域下，變數加var和不加var的區別。
2018-07-17
JavaScript變數
vue.js全域性元件和區域性元件區別
2020-07-26
Vue.js元件
day67:Vue:es6基本語法&vue.js基本使用&vue指令系統
2020-10-15
Vue.js
uni-app全域性樣式和區域性樣式
2023-12-07
APP
TempDB 中表變數和區域性臨時表的對比
2012-06-07
變數
laravel 自定義全域性函式
2020-04-07
Laravel函式
區域性變數和全域性變數（靜態和非靜態）區別
2020-10-27
變數
vue面試題:列舉說明vue的模板語法和常用指令?
2018-11-04
Vue面試題
彙編眼中的函式呼叫引數傳遞以及全域性與區域性變數與“基址”
2020-02-04
函式變數
函式不能返回區域性指標變數
2013-07-26
函式指標變數
C語言區域性變數、全域性變數、靜態區域性變數、靜態全域性變數
2017-11-21
C語言變數
python學習筆記區域性和全域性作用域
2019-03-20
Python筆記
暫時性死區以及函式作用域
2023-02-22
函式
SQLServer和Oracle的常用函式對比
2010-11-30
SQLServerOracle函式
成員變數和區域性變數的區別
2017-03-23
變數
vue.js常用屬性 es6的常用語法
2019-03-21
Vue.js
第五章：常用的高階函式和函式的補充語法
2017-02-24
函式