VUE-es6，
es6:
es:EMCAScript 6 （es2015）
Emca:國際標準組織
一、常量與變數
const a='hello' 常量const只能定義一次，不能重複定
const聲明的變數不得改變值，這意味著const一旦聲明變數，就必須立即初始化，不能留到以後賦值。
let命令是es6中新增的一個命令，它是用來聲明變數，它的用法類似於var，它所聲明的變數的，只用於let命令所在的代碼塊內有效。
let:定義一個塊級範圍的變數
let它需要先定義在使用（不存在變數提升）
1、let與var的區別
a、let它需要先定義在使用（不存在變數提升）
b、let不能重複定義，但是可以被修改
c、var可以定義多次
const的範圍與let的命令相同，只在聲明所在的塊級範圍內有效
如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> const a = "hello"; console.log(a);// console.log(b);// var b = 123456; //變數提升// var b;// console.log(b);// b = 123456; //let c = 100; if(10> 9){ let c=200; console.log(c); } console.log(c); var c = 300 let d = 888; d = 999 console.log(d); var i=10; var arr = [22,33,44,55] for(let i=0;i< arr.length;i++){ } if(i>5){ console.log(i+10); } const obj = { name: "謝小二", age: 22 } var obj2 = obj; obj2.age = 90 console.log(obj.age); </script></head><body></body></html>View Code
補充：
js的資料類型：
string,array,number,null,undefined,boolean,object
基礎資料型別 (Elementary Data Type)：
string，number，null，undefinedboolean
參考型別:
array,object
二、模板字串
a、通過反引號來使用，字串當中可以使用變數
b、可以當作一般字元串來處理
c、可以使用多行字串
如：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul id="list_1"> </ul> <script> let name = `小三`; console.log(`她的名字叫${name}`); document.getElementById("list_1").innerHTML = ` <li>11</li> <li>22</li> <li>33</li> <li>44</li> ` </script></body></html>View Code
三、解構變數
a、數組結構賦值：把資料元素的值依次地賦值給變數
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script>// let arr = [89,90,99];// let a = arr[0];// let b = arr[1];// let c = arr[2]; let [a,b,c,[d]] = [89,90,99,[100]]; console.log(a); console.log(c); console.log(d); let obj = { "a1":"json", a2: 23 } let {a1,a2} = obj; console.log(a1); </script></head><body></body></html>View Code
四、對象的擴充
解構不僅可以用於數組，還可以用對象
a、對象當中的屬性可以簡寫
b、對象當中的方法也可以簡寫
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> let username = '謝小閑'; let obj = { username, fun() { alert(999); } }; console.log(obj.username); obj.fun();// var useranme = $("#text1").val();// var password = $("#text2").val();// $.get(url,{useranme,password},function(){////// }) </script></head><body></body></html>View Code
五、函數的擴充
a、可以給函數預設參數
b、剩餘的參數可以用...（這三個點代替）
如：
function fun(a,...b ){}fun(11,22,33)則：b = [22,33]
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> function fun(x=100) { alert(x); } //fun(); function fun2(x=3,...y) { //alert(x); console.log(x); console.log(y); } fun2(x=2,y=300) </script></head><body></body></html>View Code
六、數組的擴充
a、對數組的遍曆
（1）、用forEach迴圈
如果在原來的基礎上都加1就是對數組的遍曆用map,反悔的時候用return（map(),在括弧裡面放函數）
如：
arr.forEach(function (value,index) { console.log(value); }) var arr2 = arr.map(function (value,index) { return value+1 })
b、判斷數組當中是否存在某個數組
（1）、取索引的時候用indexOf
（2）、包含用includes
console.log(arr.indexOf(1000)) console.log(arr.includes(201))
c、對數組的過濾用filter
var arr4 = arr.filter(function (value,index) { return value > 50 }) console.log(arr4);
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> var arr = [78,89,90,21]; arr.forEach(function (value,index) { console.log(value); }) var arr2 = arr.map(function (value,index) { return value+1 }) console.log(arr2); console.log(arr.indexOf(1000)) console.log(arr.includes(201)) let arr3 = [11,22,33] for(var i in arr3){ // console.log(arr3[i]); } for(var i of arr3){ console.log(i); } var arr4 = arr.filter(function (value,index) { return value > 50 }) console.log(arr4); </script></head><body></body></html>View Code
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> <style> ul li{ list-style: none; } .tipbox{ width: 200px; height:200px; border: 1px solid cornflowerblue; position: absolute; background-color: #aaaaaa; top: 200px; left: 600px; } </style></head><body> <div id="app"> <div> <input type="text" placeholder="姓名" v-model="username"> <input type="text" placeholder="年齡" v-model="age"> <input type="button" value="增加" @click="add"> </div> <div> <table cellpadding="0" border="1"> <tr v-for="(item,index) in arr"> <td>{{item.username}}</td> <td>{{item.age}}</td> <td>{{index}}</td> <td><input type="button" value="刪除" @click="del(index)"></td> <td><input type="button" value="修改" @click="showBox(index)"></td> </tr> </table> </div> <div class="tipbox" v-show="isShow"> <p><input type="text" placeholder="姓名" v-model="m_username"></p> <p><input type="text" placeholder="年齡" v-model="m_age"></p> <p> <input type="button" value="確定" @click="save()"> <input type="button" value="取消" @click="cancel()"> </p> </div> </div> <script> new Vue({ el: "#app", //表示在當前這個元素內開始使用VUE data:{ username: "", age: "", arr: [], isShow:false, m_username: "", m_age: "", n: 0 }, methods: { add: function () { this.arr.push({username:this.username,age: this.age}); console.log(this.arr); }, del: function (index) { this.arr.splice(index,1); }, showBox: function (index) { this.isShow = true; this.n = index; this.m_username = this.arr[index].username; this.m_age = this.arr[index].age; }, cancel: function () { this.isShow = false }, save: function () { this.arr[this.n].username = this.m_username; this.arr[this.n].age = this.m_age; this.isShow = false } } }) </script></body></html>維護學生資訊
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
