# Vue 學習筆記-1
Codepen 如何使用vue:

第一個vue程式:
HTML:

<div id="app">{{msg}}</div>

JavaScript

new Vue({
  el:'#app',
  data:{
    msg:'hello'
  }
})

## Javascript ES6基本功
### 1-1 var由let 和 const 替換
var:可以被改變，全域變數，具有hoisting特性
let:可以被改變，區域變數，不具hoisting
const:不可以被改變，區域變數，不具hoisting

hoisting:在function或變數被使用之後，才進行宣告並且執行成功，稱為hoisting

a+=1;

var a;

const 不允許被Re assign

let a=1;
a=2 //允許

let c={};
c.x=1; //允許

const d=1;
d=3;//不允許

const  e={x:0};
e.x=3;//允許(物件裡的內容可以修改)

### 1-2物件縮寫
原始function

function makePoint(x,y){
  return{
    x:x,
    y:y,
  }
}

縮寫:(當x=x,y=y....)

function makePoint(x,y){
  return{
    x,
    y,
  }
}

---

原始物件

function createObj(key,value)){
  const obj={};
  obj[key]=value;
  return obj;
}

const person=createObj('name','John');
{
  name=John
}

縮寫：

function createObj(key,value)){
  const obj={
  	[key]=value,
  };
  return obj;
}

const person=createObj('name','John');
{
  name=John
}

計算屬性：

function createObj1(key,value)){
  const obj={
  	[key+1]=value,
  };
  return obj;
}

const person=createObj('name','John');
{
  name1=John
}

---

function:

const option = {
  name:'Option',
  created: function(){
    
  }
}

縮寫:

const option = {
  name:'Option',
  created(){
    
  }
}

### 1-3解構賦值

### 陣列解構
原始陣列取值：

const nums=[1,2,3];

const first=nums[0];
const second=nums[1];

解構陣列取值：

1.
const nums=[1,2,3];

const [first,second]=nums;

2.
const nums=[1,2,3];

let first;
let second;
[first,second]=nums;

預設值：預設third Undefined 為0

const nums=[1,2];

const [first,second,third = 0]=nums;

忽略元素:若只在乎第二個

const nums=[1,2];

const [,second]=nums;

變數交換：原本需要使用temp

let a=1;
let b=2;
[a,b]=[b,a]

其他解構：

const nums=[1,2,3,4]
const[first, ...others]=nums;
first===1;
others//[2,3,4]

---
### 物件解構

物件內容呼叫：

const point ={
  x:100,
  y:150,
  
}
const x=point.x;
const y=point.y;

物件解構：

const point ={
  x:100,
  y:150,
  
}
const {x,y}=point;

指定新名稱

const point ={
  x:100,
  y:150,
  
}
const {x:px,y:py}=point;
px*py;

---
### 解構函式參數

function distance(point){
  return Math.sqrt(point.x*point.x+point.y*point.y);
}

物件解構

function distance(point){
  const{x,y}=point;
  return Math.sqrt(x*x+y*y);
}

函式參數

function distance({x,y}){

  return Math.sqrt(x*x+y*y);
}

### 1-4 更強的字串
範例

function greet(name){
  console.log('Hello, '+ name + '!');
}
greet('Jack');
//Hello, Jack!

字串模板：使用 ` 代替 '，表達式使用

function greet(name){
  console.log(`Hello, ${name}!`);
}
greet('Jack');
//Hello, Jack!

表達式運算

function greet(name,days){
  console.log(`Hello, ${name}! It's been ${days*24} hours!`);
}
greet('Jack',3);

表達式判斷

function greet(name,days){
  console.log(`Hello, ${name}! ${(days<7)?'':'Long time no see'}`);
}
greet('Jack',3);

多行字串
原始

const word='dddddddddd\n
ddddddddddd\n
ddddddddddd\n
ddddddddddddddd'

ES6

const word=`dddddddddd
ddddddddddd
ddddddddddd
ddddddddddddddd`

### 1-5箭頭函式
自動綁定：箭頭函式內部的this 與外部相同

const a = () => {
  console.log(this);
 
}
  console.log(this);

this:
- 直接執行：window(global)
- 作為物件的成員函式執行：該物件
- 作為DOM的偵聽函式執行：該DOM

var name='Heisenburg'
var sayMyName=function(){
  console.log(this.name);
}
var teacher = {
  name:'White'
}
teacher.sayMyName=sayMyName;
sayMyName()//Heisenburg
teacher.sayMyName();//White
btn.addEventListener('click',sayMyName);
//<button id="btn" name="god damn right">Response</button>