目錄
es6學習：https://es6.ruanyifeng.com/#README
vue學習：https://www.runoob.com/vue2/vue-template-syntax.html
學習網站
es6學習：https://es6.ruanyifeng.com/#README
vue學習：https://www.runoob.com/vue2/vue-template-syntax.html
ES6中的let與var的區別
1. 作用域不同:
全局中var聲明的變量的作用域是全局，而函數內部用var聲明的變量的作用域是該函數內部；
let聲明的變量的作用域在塊級或子塊中(一般情況下是被{}包裹起來的區域)
if(1==1)
{
var num = 10;
let sum = 20;
console.log(sum); //20
}
console.log(num); //10
console.log(sum); //報錯
2. 變量提升(未重現）
在全局作用域及函數作用域中用var聲明的變量，都會被提升到作用域的頂部；
用let聲明的變量，不會提升到作用域的頂部，只能在變量聲明後才能使用；
console.log(num); //undefined
var num = 10;
console.log(sum); //報錯
let sum = 20;
3. 相同的作用域內不能重複聲明一個變量
if(1 == 1){
let num = 10; //報錯
let num = 20; //報錯
console.log(num);
}
if(1 == 1){
var num = 10;
var num = 20;
console.log(num); // 20
}
4.let解決了閉包的問題
for(var i=0;i<10;i++){
arr[i]=function(){
return i;
}
}
console.log(arr[3]());//10
顯然這段代碼輸出10，並沒有向我們期望的返回3，原因也很簡單（js的變量提升）函數在調用時候訪問的是一個全局作用域的i，此時for循環已經執行完畢，全局變量i=10；
let解決閉包 就像下面這樣：
let arr=[];
for(let i=0;i<10;i++){
arr[i]=function(){
return i;
}
}
console.log(arr[3]());//3
來自：
https://www.cnblogs.com/yifeng555/p/8455414.html
https://blog.csdn.net/huangqqdy/article/details/83413219
vue學習
{{...}}
數據綁定最常見的形式就是使用 {{...}}（雙大括號）的文本插值
指令
指令是帶有 v- 前綴的特殊屬性。
v-model
用來在 input、select、textarea、checkbox、radio 等表單控件元素上創建雙向數據綁定，根據表單上的值，自動更新綁定的元素的值。
v-on
監聽事件
v-html
用於輸出 html 代碼
v-bind
被用來響應地更新 HTML 屬性
<div v-bind:id="'list-' + id">菜鳥教程</div>
爲什麼vue組件的屬性，有點需要加冒號： 有的不用？
需要加冒號：後面是一個變量或者表達式，或者boolean或者number
不需要加冒號： 後面是字符串變量
v-if
將根據表達式 seen 的值(true 或 false )來決定是否插入 p 元素。
v-if：每次都會重新刪除活創建元素，有較高的切換性能消耗
v-show：每次不會重新進行DOM的刪除和創建操作，只會切換元素的 display:none樣式，有較高的初始渲染消耗
縮寫
v-bind 縮寫
Vue.js 爲兩個最爲常用的指令提供了特別的縮寫：
<!-- 完整語法 -->
<a v-bind:href="url"></a>
<!-- 縮寫 -->
<a :href="url"></a>
v-on 縮寫
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
==與===的區別
- =是賦值的意思，是讓左邊的值等於右邊的值，比如：var a=1;那麼現在alert(a)就是1，當然右邊可以是變量，如：var a=1; var b也是1;
- ==是判斷等於的意思，返回的是一個布爾值，如：alert(1==1);將返回true，因爲1等於1，如果 alert(1=='1');也返回true，雖說後面的1是字符串類型，但是==是不判斷類型的，所以還是true，如果：alert(1=='2')就是false了，因爲1不等於2;
- ===也是判斷的，但是它要比==判斷的嚴謹一點，它的判斷必須什麼都相等，比如說類型，值;如： alert(1===1);將返回true，因爲它們都是1，而且都是數字類型，如果：alert(1==='1');將返回false，因爲前面的1是數字類型，後面的1是字符串類型。https://xuexb.com/post/142.html
Vue scoped屬性的作用
實現組件的私有化，不對全局造成樣式污染，表示當前style屬性只屬於當前模塊。使用 scoped 後，父組件的樣式將不會滲透到子組件中。
效果：
打開F12，觀察DOM結構發現：vue在DOM結構及css樣式上加上唯一的標記，達到樣式私有化，來保證不會被污染全局的作用。
scoped設計的初衷：就是讓樣式變得不可修改
vue 關於組件那些事
1. vue中的prop
定義：prop 是父子交流的組件，但是是數據單項傳遞，父影響子，子不影響父
常用用法：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
大小寫不敏感，camelCase (駝峯命名法) 的 prop 名使用其等價的 kebab-case (短橫線分隔命名) 命名都能接受
2. 自定義事件
this.$emit('myEvent')
<!-- 沒有效果 --> <my-component v-on:my-event="doSomething"></my-component>
命名敏感，必須全匹配
3. <keep-alive><keep-alive/>：把你的組件給緩存下來了，不讓組件重新渲染，節省性能
keep-alive有2個鉤子函數：activated、deactivated
一般可用activated函數來初始化數據
created mounted activated區別
created()在創建vue對象時，在html渲染之前就觸發,此時初始化了data和methods
mounted()在html渲染完成之後纔會執行的
activated()進入當前存在activated()函數的頁面時，一進入頁面就觸發；