# Vue?!🤨
---
## History of Website
----
* 1990s 世界上出現的[第一個網站](http://info.cern.ch/hypertext/WWW/TheProject.html)
By Tim Berners Lee [靜態網頁]
* 2000s Web2.0 founded
(Facebook&Youtube)[*ajax]
* 2010s 網頁應用程式(Web Application)(高互動性)
***前端框架出現
----
前端框架ㄉ種類
* Angular(2010)
* React(2013)
* Vue(2014)
可以看[更多](https://medium.com/@publiclou123/vue-react-angular%E6%AF%94%E8%BC%83-bceb38c1b458)
----
### ajax小知識：
ajax（Asynchronous JavaScript and XML）
<!--非同步的JavaScript&XML-->的縮寫，讓網頁可以透過js而非browser來發送請求
[不用refresh]
<!--簡單來說，以前的網頁在發送請求(表單)的時候，伺服器接受請求後會送回一個“網頁”回來，但這也浪費許多頻寬(前後HTML的內容大致相同)與時間(在server上處理完才回應)；當ajax技術出現後，客戶端需要什麼再向伺服器請求即可(不需要發送整個表單)，而伺服器只需回傳客戶端需要的資料就行了-->
---
## 讓我們簡單回顧一下前端
----
前端三巨頭
---
讓我們進到今天的主題
## What's Vue?
----
Vue是一個以視圖層為基礎發展的 JavaScript
**漸進式框架**。
----
### 漸進式框架:
----
#### 聲明式渲染
以簡潔的模板語法將資料渲染進DOM
看看[範例](https://codepen.io/kzjnqteu/pen/qBaWYKq)ㄅ
----
簡單來說
在範例中的{{message}}跟v-model就是最好體現聲明式渲染的例子
＊{{}}我們稱為「鬍子語法」
----
#### 組件系統
* 自定義元素
* 可重複使用的code
可以使用Vue.componment定義組件
但是較複雜的project會使用*.vue定義(單文件)組件
<!--以上兩個為核心-->
----
### Vue Componment 架構介紹
----
#### 全域/區域註冊
全域註冊<!--不管怎樣都會load-->
```htmlembedded=
<div id=”app”>
<component-layout></component-layout>
</div>
<script>
Vue.component("component-layout", {
template: `<div>{{text}}</div>`,
data(){
return{
text:'我是全域註冊'
}
}
});let vm = new Vue({
el: "#app"
});
<script>
```
----
區域(局部)註冊<!--選項物件，可以components引入vue實例-->
```htmlembedded=
<div id=”app”>
<component-layout></component-layout>
</div>
<script>
let vm = new Vue({
el: "#app",
components:{
'component-layout' :{
template: `<div>{{text}}</div>`,
data(){
return {
text:'我是區域註冊'
}
}
}
}
});
<script>
```
----
```javascript=
Vue.component('my-component', {
template: `<div>Hello Vue!</div>`,
data () {},
props: {},
computed: {},
methods: {},
});
const vm = new Vue({ }).$mount('#app');
```
<!--
template:模板（引入HTML字串模板）
computed:計算屬性
methods:HTML的功能、互動「非同步事件」
因為Vue.js每個元件的實體狀態、模板等作用範圍必須是獨立的，因此無法以子元件「直接」去修改父元件
那麼，既然不能直接修改，那麼上下層元件之間，若需要從外部引進資料時，就需要透過props引用外部的狀態-->
----
----
.vue
```htmlembedded=
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js App" />
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
export default {
name: "Home",
components: {
HelloWorld,
},
};
</script>
```
----
#### 客戶端路由_vue-router
* 定義路由
* router-link
----
#### 大規模狀態管理
Vuex
可集中管理各元件的資料，一般用於大專案
*使用單一狀態樹(管理所有組件狀態)
----
action, multation, state??
----
* state 是存放資料的地方。
* action 處理非同步事件&取得遠端資料
[**不負責處理資料內容的改變]
* getter 在畫面渲染前，先對資料進行運算及過濾等。
* mutation 用於改變資料的內容。<!--在 Vue 元件中我們習慣在 methods 中去改變資料，現在用了 Vuex 則是在 mutation 進行處理。-->
----
#### 構建系統
* Vue CLI Webpack
(Vue.js Command-Line Interface)
<!--是提供開發者在短短的幾分鐘時間內，即可快速建置一個立即可用的 Vue.js (含 2.x/3.x) 示範專案-->
----
講了這麼多 重點基本上就是這些
```
Vue是一個框架，透過這個框架，可以輕易做出一個webpage
並且根據需要，可以增加需要的功能來加以呈現
```
---
## Vue 基本語法(2.0)
----
Create a html file =>
```shell=
mkdir test
cd test
touch test.html
code .
```
----
```htmlmixed=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div class="input">
<input v-model='message' placeholder="輸入訊息">
</div>
<p>{{message}}</p>
</div>
</body>
</html>
<script>
var app = new Vue({
el:'#app',
data(){
return{
message:''
}
}
});
</script>
```
----
當我們在browser打上
```javascript=
console.log(app.message)
```
----
那各位試試看打入這ㄍ看會發生什麼事
```javascript=
app.message="xoxo"
```
----
單/雙向綁定
* 單向綁定
當使用者更新畫面的info時，data並不會自動更新
* 雙向綁定
當使用者更新畫面的info時，data會自動更新(v-model)
---
### Special Attributes of Vue
以**v-**為前綴的特殊語法
----
#### v-bind
控制object的屬性
```htmlembedded=
<div id="app">
<button v-bind:disabled="isBtnDisabled" v-on:click="clickEvent">click me!</button>
</div>
```
JS
```javascript=
var app = new Vue({
el:'#app',
data(){
return{
isBtnDisabled: false,
}
},
methods: {
clickEvent:function(){
alert("Hello~");
}
},
});
```
tips:"v-bind:" = ":"
----
#### v-model
常用於表單及元素來做雙向數據綁定
<!--除了初始綁定、顯示資料外，最主要是可“監聽”事件-->
```htmlembedded=
<div id="app">
<input v-model='message' placeholder="輸入訊息">
<p>{{message}}</p>
</div>
```
JS
```javascript=
var app = new Vue({
el:'#app',
data(){
return{
message:''
}
}
});
```
----
#### v-for
用於渲染元素or模板內容
```htmlembedded=
<div id="app">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
```
JS
```javascript=
var app = new Vue({
el: '#app',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
```
----
#### v-on
用於監聽DOM事件，並在事件發生時執行js指令
```htmlembedded=
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
```
JS
```javascript=
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
```
----
#### v-if
用以顯示或隱藏模板中的元素
可與"v-else","v-else-if"結合使用
```htmlembedded=
<div id="app">
<span v-if="seen">Now you can see me</span>
<span v-else="seen">You can see me when seen=false^^.</span>
</div>
```
JS
```javascript=
var app = new Vue({
el: '#app',
data: {
seen: true
}
})
```
<!--試著把true=>false-->
----
#### v-show
效果大致與v-if相同
但判斷條件較簡單=>true就顯示，false就不顯示
```htmlembedded=
<div id="app">
<div v-show="isShow">Now you can see me</div>
</div>
```
JS
```javascript=
var app = new Vue({
el: '#app',
data: {
isShow: true
}
})
```
----
v-if vs v-show
* For use -- "else"
* For HTML rendering --
v-if 有“條件”的渲染
v-show 無條件渲染
* <-template-> 必須使用v-if決定是否出現
(v-show X)
---
Let's go to next chapater...
### Vue CLI environment create
----
Check Vue version
```shell=
vue -V
or
vue --version (二選一)
```
如果沒有的話...[點這裡](https://hackmd.io/@JimmyHsieh-0129/B15fu7pIY#/16/6)
----
首先當然是建立project啦~~~
```shell=
vue create "專案名稱"
```
<!--中間的過程略，但可稍微解釋細節-->
----
在建完專案後，各位應該會看到這個畫面
```shell=
🎉 Successfully created project review.
👉 Get started with the following commands:
$ cd review
$ yarn serve
```
<!--serve這個指令就是讓開發者可以以靜態node.js伺服器直接在本機預覽project-->
----
```shell=
code .
```
---
OK~ The class is ended.
## BUT...
----
## Let's challege!!!
----
### 何謂「鬍子語法」?
----
### 簡述Vue CLI 的用途?
---
#### Final~
### Q&A Time
---
### Vue_Basic
## END~~~
{"metaMigratedAt":"2023-06-16T15:03:44.653Z","metaMigratedFrom":"YAML","title":"Vue?!🤨","breaks":true,"slideOptions":"{\"transition\":\"slide\"}","contributors":"[{\"id\":\"ef7cd3d8-8ec1-488c-9360-7b088c53af88\",\"add\":10188,\"del\":2906}]"}