---
# System prepended metadata

title: Vue 學習筆記-1

---

# Vue 學習筆記-1
Codepen 如何使用vue:
![](https://i.imgur.com/S3j5OI2.png =500x400)
![](https://i.imgur.com/1l3se7b.png)

第一個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>
```