# 官方
[官方](https://vuejs.org/guide/introduction.html#api-styles)
[vue cli](https://cli.vuejs.org/guide/)
# [全家筒 005](https://www.youtube.com/watch?v=nt6U7fa3jqY&list=PLmOn9nNkQxJEARHuEpVayY6ppiNlkvrnb&index=4&ab_channel=%E5%B0%9A%E7%A1%85%E8%B0%B7IT%E5%9F%B9%E8%AE%AD%E5%AD%A6%E6%A0%A1)
命令式 jquery
聲明式 vue
read-dom
虛擬dom
es6模塊化
包管理器
原型,原型鏈
數組常用方法
axios promise
003
awesomevue
官方指南看完後要去看
vue模板
vue實例基本上只會有一個
vue的el如果指的是class
而且有兩個class以上只會有一個被掛載 但沒事不要掛class請掛id
反過來講如果兩個vue去掛同一個id會報錯但沒事不要耍白癡
可以用 js eval
表達式 有return的值
代碼 if else
```
{{1+1}} =>2
{{Data.now()}}
{{a}}引用data的a
```
constructor=> new xxx
這是js創造instance的方法她把class稱為constructor
開發版本 會有比較詳細的訊息再console.log裡面
vue.js
產品版本是
vue.min.js
插值語法 vs 指令語法
插值語法 標籤體
指令語法 標籤屬性
不用指令語法就是純粹字串
```
{{aaa}}
v-bind:href="xxx"
這ˋ個xxx是 js 表達式
```
js引用dict可以如果python引用method一樣
不用寫成
```
ins['method']
ins.method
```
v-bind單向綁定=>data改前板
v-model雙向綁定=> 前板跟data互改
但是v-model只支援表單類型元素(可以輸入的元素)
他其實綁定是attr value值
v-model可以簡寫
v-model:value=>v-model就好
bind的話是 v-bind:value=>:value
可以用vue開發工具在前版改data
008
上圖是vue的instance
$ 符號開頭是給使用者用的方法/變數
vscode有用戶代碼片段可以自訂義
snippets
user config snippet
009 尚硅谷Vue技术 el与data的两种写法
```
new vue el =
v.$mount()
```
函數式的this會指到vue實例
對象式會指到global
vue instance兩個都可以(看你有沒有用this)
但是 compionent只能用函數式
```
對象式
data :{}
函數式
data : function(){
# data(){
# 兩個寫法都是一樣
return {}
}
箭頭含式會沒有自己的this
(param1, param2, ...rest) => { statements }
data:()=>{
# this 是global
return
}
```
不能用箭頭含式為大原則除非你不用this
mvvm
model,view,viewmodel
所以create vue instance都用vm = Vue()來接
vue ins會做一個特殊處理把data的內容放到vue的ins上
所以才可以直接用 ```{{aaa}}```取到
反過來講vue ins本來的東西也可以取道像是 ````{{$option}}``之類的
可以去print vue ins 去了解它有啥東西
011 Object defineProperty 數據代理
用 Object defineProperty去添加 object的話顏色會不一樣
可以設定能不能被改能不能被列舉能不能被刪除
還可以設定getter/setter
```
xxx = {a:1}
Object.defineProperty(xxx,'age',{value:18})
Object.keys(xxx)
for let key in xxx{
console.log(xxx[key])
}
```
看起來vue就是透過getter/setter去實現數據交換
這個是他底層的實作方式
vm._data就是data
```{{_data.name}}```也可以
數據代理就是setter/getter
vm.name=>setter=>data..name
js function居然允許不給值
print會變成undefined而已...
甚至允許丟給他額外的值 methods預設會丟event
但你可以不用任何變數去接收
event.target應該是dom可以用event.target.innerText去改值
method裡面不能用箭頭函數定義
會導致this會指到全域
nethod裡面不會有數據代理getter/setter只有data有
但是你把method放data也可以用
只是沒有意義
可以不給值預設是丟$event但是如果給值的話要自己丟..
好白癡
https://www.youtube.com/watch?v=u5hsbvN1fUM&list=PLmOn9nNkQxJEARHuEpVayY6ppiNlkvrnb&index=15&ab_channel=%E5%B0%9A%E7%A1%85%E8%B0%B7IT%E5%9F%B9%E8%AE%AD%E5%AD%A6%E6%A0%A1
15 事件修飾符
```@click.prevent```
捕獲階段 外往內
冒泡階段 內往外
先捕獲在冒泡
click.capture可以強制在捕獲階段處理
click.passive
有點類似thread方式去執行你綁定的動作(滾動卷軸不會等待)
可以接著用 click.stop.prevent
16 鍵盤事件
@keyup
e.keycode!=13
下面兩個寫法都可以綁定
@keyup.enter
@keydown.13
連續使用的技巧
@keyup.ctrl.y
e.key,e.keycode可以看名稱跟編號
多個單字寫法比較特殊
e.CapsLock
這個我忘了反正就是隱藏設定
e.caps-lock
不是所有鍵盤事件都可以綁定(像調音量)
tab鍵有點特殊要用@keydown.tab
還有ctrl,alt,shift,meta 系統修飾鍵
他有個命名規則
HTML的attribute不區分大小寫
組件可以用駝峰法和短橫線
dom必須用短橫線
可以自訂義但我打死都不會用
18 計算屬性 computed
綁定事件@click = "show" ,"show()"
都可以
但是寫在裡面如果是method要加大誇胡
vue的特性是只要data裡面數據發生變動
他就會重新render page
所以你用method去寫在大誇湖裡call會重複地計算許多許多次
你敲個1234就會執行四次
在vue裡面 property相當於是data裡面記載的東西
有意思的是computed裡面會認為是property
開發者工具才可以看的出來差異
緩存機制
這邊很有意思computed的屬性值如果有存在
就不會連續的去做計算
只會執行一次
而且更有趣的是他會去看你依賴的數據
其他你不依賴的數據在data做改變computed也不會變更
有個細節如果你在全域設定一個let a = 5
然後去變更a的話他不認為a是他依賴的數據
通常只會寫getter
20 計算屬性簡寫
如果你只要getter可以直接寫
```
computed:
#some_val:function()
some_val(){
return xxx
}
```
22 監視屬性
vm對象的$watch() or watch配置
我覺得很多是可以動態配置
因為在template只能用聲明式
不能用if,else
三元表達式
但是你可以用 a? b:c
開發者工具會有bug(不知道改了沒有)
如果前版沒刷新有可能數據不會更新 實際上有更新
method只有簡單判斷式
是可以直接調用的而且在attr裡面是可以用命令式的語法
但是太複雜或是要引用其他變數不能用
即使你用window
windows是全域
你可以用弔詭寫法在data加上window
不知道為什麼他dict可以直接給物件window然後還呼叫的到
alert是個方便的function可以好好用
```
watch:{
xxx_in_data:{
// xxx變動的時候會調用
// newValue,oldValue 可以不加 白吃的js
immedeiate:false,//預設false 初始化時調用handler
handler(newValue,oldValue){
}
}
}
```
watch看起來可以對特定狀態轉換或差值進行動作
watch可以監控data同時 computed的值也可以監控
所以computed其實就跟python property variable感覺差不多
不過不知道dict等有深度的是怎麼做的
動態增加的話用
vm.$watch('xxx_in_data',{})
23 深度監視
javascript不用寫'key'去query dict是簡寫
你想要深度監視某個變數要用
"number.a":{
如果要監控全部變數
numbers:{deep=true
24監視簡寫
如果不用immedeiate和deep
watch{
ishot(newValue,oldValue){ //ishot是監控的變數
}
}
vm.$watch('ishot',function(){} )
25 對比watch/computed
c = this.a+this.b這種情況用computed比較好
而且用watch的情況你必須要給 c default值不然沒辦法存
在js沒辦法延遲給予return val
所以用watch可以異步用setTimeout去給予數值
但是computed沒有辦法他只能同步等待在回傳數值
因為watch是用命令式
c =this.a+this.b
但是computed是用聲明式
return this.a+this.b
大原則 正常用computed需要異步用watch
這裡有個地方要注意
setTimeout是程式裡面的模組
**必須**用箭頭含式不然他default會指向windows
computed能完成的功能 watch都能完成
watch能完成的功能 computed不一定能完成
vue管理函數=>普通函數
不被vue管理的函數=>箭頭函數(定時器,ajax,Promise的回調)
簡單講你要確保this指到的是vm或組件實例
26 class style 綁定
bind class => :class="a"相當於是data的a
class="b" :class ="a"最後會整合在一起
如果你寫 class = b class = a會造成只使用class b
要避免用dom操作元素 正確做法是綁定變數後
在透過this對data操作
如果你要綁定多個class可以用
物件或是陣列/數組
b = ['classa','classb'] 去綁定
也可以用
b = classa:false,classb:true去綁定
v-for v-if 會受到key影響
在vue的架構裡面會頃向利用已經存在的物件
arr.shift=> python.pop
arr.push=> python.append
數組/陣列=>list
物件=>dict
27 樣式綁定
style格式如果不符合會在瀏覽器直接看不到但也不報錯
也可以用兩種綁定方式
物件綁定/對象
:style= fontSize: fsize+'px' 這樣去綁定
陣列綁定/數組
我覺得沒意義他是用下面格式做的
list(dict)
# [hexo](https://ithelp.ithome.com.tw/articles/10208376)
部屬部落格的套件
# [部落格第三方服務](https://ithelp.ithome.com.tw/articles/10208619)
# [github project](https://ithelp.ithome.com.tw/articles/10205988)
# [各種插件](https://ithelp.ithome.com.tw/articles/10204029)
# [code pen](https://ithelp.ithome.com.tw/articles/10203414)
# [百寶箱](https://ithelp.ithome.com.tw/users/20111449/ironman/1767)
# [bootstrap vue](https://ithelp.ithome.com.tw/articles/10306181)
# 泡泡
# npm
npm 的縮寫是「Node Package Manager」
# node.js
node js 跟python 一樣有自己的shell可以執行
python是-c node是 -e
node -e "console.log('hi')"
shell底下離開是.exit
檔案執行也是node xxx.js
# [vue cli](https://cli.vuejs.org/)
[簡單介紹](https://ithelp.ithome.com.tw/articles/10280361)
打開Home.vue檔案會看到引入資料會使用@的方式，＠的意思就是從src目錄來尋找
## build pkg
正確方式應該把dist資料夾放到vscode以Live Server的方式啟動
## [vue.config.js](https://ithelp.ithome.com.tw/articles/10281023)
> vue ui
# [typescript](https://www.zhihu.com/question/334938460)
# [Webpack](https://ithelp.ithome.com.tw/articles/10280361)
Webpack是個整合工具可以運行各種環境，例如：Sass(CSS預處理器)、BABEL(JavaScript編譯器)、ESlint(程式碼檢視工具)，開發過程中產生的Sass檔案、JavaScript檔案、Vue檔案，再由Webpack產生出能運行的HTML、CSS、Js檔案。
# [var let const](https://ithelp.ithome.com.tw/articles/10270095)
# [Hoisting , undefined,not defined]()
undefined不等於not defined
undefined``是已經宣告變數了，JavaScript給的預設值。
not defined是創建環境時，沒有宣告加入記憶體，JavaScript找不到這個值。
# [css-loader](https://css-loader.raphaelfabeni.com/)
# 基本設定
typescript暫時不要用
# [cheat sheet](https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf)
# [vscode 套件](https://www.youtube.com/watch?v=oGGBvS6MrmE&ab_channel=MakeAppswithDanny)
# [動態同步 Fetch vs Axios](gushiciku.cn/pl/pjgD/zh-tw)
都是js的資料庫坦白說都可以
# [CDN vs SFC](https://stackoverflow.com/questions/46214132/how-can-i-combine-vue-js-with-flask)
簡單講就是單獨使用可以但是
如果你要用SFC管理和搭配NPM套件做成WEB package
目前沒有看到python有這個做法
所以要這樣做就只能前後端分離
# code pen
## [範本](https://codepen.io/fly50789/pen/LYjjWYq)
尚且不知道vue pen跟project功能
# ref
[範例](https://vuejsexamples.com/)
[官網](https://v3.cn.vuejs.org/guide/introduction.html)
[chrome extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=en)
安裝完後要去設定"Allow access to file URLs"不然會偵測不到
[cheat sheet](https://www.vuemastery.com/pdf/Vue-Essentials-Cheat-Sheet.pdf)
# 幫幫忙
## [實作小範例入門 Vue & Vuex 2.0 ](https://ithelp.ithome.com.tw/users/20103326/ironman/1114)
## [少年學Vue，如隙中窺月](https://ithelp.ithome.com.tw/users/20127466/ironman/3087)
## [ 重構倒數30天，你的網站不Vue白不Vue](https://ithelp.ithome.com.tw/users/20125854/ironman/4112?page=1)
### [所有範例](https://codepen.io/collection/dbkPGQ)
### 基本架構
可以用css seletor去綁定物件
不知道可不可以綁複數物件
因為他可以綁class
```
var app = new Vue({
el:'#app',
data:{
text:'Hello World'
}
})
<div id="app">
</div>
也可以用class=>class="app" =>el:".app"
```
### MVVM
View
代表顯示在畫面的樣子，像是按鈕、文字輸入欄位等等
Model
主要取用資料的部分
ViewModel
將資料和畫面綁定的連結器
### [資料和畫面綁定常用的方式](https://codepen.io/fly50789/pen/xxLPpBQ)
* v-text
只有文字你就算寫<href>這種標籤也無效果應該是自動跳脫
* v-html
會直接改變內建的內容你可以用標籤給值
* v-model
常用在輸入欄位或表單值的綁定，像是上面的 input 輸入欄位就綁定資料 message，當 input 值改變則 message 值也會跟著改變，
### [物件和陣列](https://codepen.io/fly50789/pen/BadmJbz)
自己看
### [v-for v-if](https://codepen.io/fly50789/pen/NWvwyxg)
跟python相反先item在index
```
<li v-for="(item,index) in test">{{index}}.{{item.name}} 得分:{{item.score}}</li>
```
### [欄位資料綁定](https://codepen.io/fly50789/pen/oNepNQG)
* Text
* Checkbox (多選)
* Radio (單選)
* Select 下拉式選單 (單選)
### [動態屬性指令(v-bind)](https://codepen.io/pen?template=LYjjWYq)
看不懂規則
可能{{}}這種寫法有限定它的範圍?
```
不能這樣引用
<img src="{{url}}" alt="">
<img v-bind:src="url" alt="">
```
感覺v-bind是綁定property
要用v-bind:prperty_name = property_value
```
<p v-bind:class="{'red':isRed,'bold':isBold}">
```
### [操作頁面行為(v-on)](https://codepen.io/fly50789/pen/KKvZpwv?editors=1111)
v-on:click="reverse"
v-on是綁定動作如上方click動作綁定reverse這個function
這個function必須
很愚蠢 js的string本身沒有reverse只有list有
所以只能split('').reverse().join('')
這邊可以看到vue物件的主要成分其實很像class
我覺得很像是property的綁定方式
* el:綁定物件最重要沒綁就沒能力了
* data:內部資料 類似class/instance var
* methods:綁定的方法 類似class_method
```
var app = new Vue({
el:'.app',
data:{
text:'1234'
},
methods: {
reverse:function (){
this.text=this.text.split('').reverse().join('');
},
}
});
```
### [修飾符與簡寫](https://codepen.io/fly50789/pen/abyqqqR?editors=1111)
可以看到事件怎麼處理的
像是event可以加上click.prevent就可以避免
原本click的動作觸發
或是在原本function增加e的變數去設定e.preventDefault()
[v-bind,v-on縮寫](http://blog.wingzero.tw/2018/08/vuejs-v-bind-v-on.html)
* v-bind: :
* v-on: @
### [資料綁定 v-once](https://codepen.io/fly50789/pen/PoKQejx)
用once資料不會隨著vue的data變動只會被渲染一次
在{{}}類似python f-string可以進行一些運算
### [動態切換 ClassName]()
幫幫忙
https://ithelp.ithome.com.tw/articles/10244666
## [勇者鬥Vue龍](https://ithelp.ithome.com.tw/users/20107789/ironman/1710)
## [30天手把手的vue.js教學](https://ithelp.ithome.com.tw/users/20129072/ironman/3052)
# 初始 template(含jquery)
# 筆記
[document.ready的寫法](https://matthung0807.blogspot.com/2017/11/jquery-document-ready.html)
因為不等物件load完的話
vue先執行會找不到物件需要ready
```
jquery用法
$( document ).ready(function() {
// 在這撰寫javascript程式碼
});
效果同$( document ).ready()。
$(function() {
// 在這撰寫javascript程式碼
});
純Javascript的寫法。（注意，window.onload和$( document ).ready()的觸發順序仍有差異。）
window.onload = function() {
// 在這撰寫javascript程式碼
};
```
# 問題
1. 可以綁複數物件嗎?
可以但會怪怪的
不知道要怎麼避免app變數的重複根掛載特性
2. v-bind不懂{{}}呼叫可用範圍
```
Fail
<img src="{{url}}" alt="">
Pass
<img v-bind:src="url" alt="">
```
3. vue的data呼叫範圍是根據綁定物件的child和自身可以呼叫到嗎?還是有甚麼限制?
```
<div id = 'app' ,{{a}}>
{{b}}
</div>
```
# [008天](https://book.vue.tw/CH1/1-1-introduction.html)
```
npm run serve
```
package-lock.json：簡單來說就是鎖定安裝模塊的版本號
生命週期與 Hooks function
SFC
vuex
Vue Event $emit / $on
DRY 原則
Do not repeat yourself
var 作用域是 function scope，let 作用域是 block
# 各種設定微調
# eslintrc.js
vscode的jslint會跳紅字
```
parserOptions: {
parser: "@babel/eslint-parser",
requireConfigFile: false,
},
```
# 開發工具
## [vuedevtools](https://ithelp.ithome.com.tw/articles/10186713)
# nuxt
https://www.youtube.com/watch?v=GBdO5myZNsQ&ab_channel=NetNinja
https://nuxt.com/docs/getting-started/introduction
# fakestoreapi
https://fakestoreapi.com/
Sign in with Wallet
Connect another wallet