1. vue-cli ：快速創(chuàng)建vue工程的開發(fā)工具指令集
- 安裝vue-cli :npm install -g @vue/cli
- 安裝完成后，查看版本： vue -V
- 基于vue-cli快速創(chuàng)建vue工程項目：vue create 【項目名稱】
2. 自定義組件設(shè)置原生點擊事件
@click.native ，如下圖：
@click.png
3. 這是padding marging屬性是，注意加上：box-sizing: border-box;
4. flex總結(jié)
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
5. divB 要覆蓋到divA上
給divAdivB的用父div包裹，并設(shè)置父div為大小和divA一樣，然后設(shè)置 divB postion:absloute，z-index比divA大，居中即可，如下圖：
image.png
6. 動態(tài)綁定class
# 第一種 ，直接寫，多個用逗號隔開
:class="{ 'active': isActive, 'sort': isSort }"
# 第二種，寫成對象，放到data里
:class="classValue"
data() {
return {
classValue: { active: true, sort:false }
}
}
# 第三種，寫成兌現(xiàn)個，放到computed里
:class="classValue"
data() {
return {
isActive: true,
isSort: false
}
},
computed: {
classValue: function () {
return {
active: this.isActive,
sort:this.isSort
}
}
}
7. 子組件向父組件傳值
this.$emit('child2Parent', value)
8. vue.js中== 和 ===
- == 用于比較、判斷兩者相等，比較時可自動換數(shù)據(jù)類型。
- === 用于（嚴格）比較、判斷兩者（嚴格）相等，不會進行自動轉(zhuǎn)換，要求進行比較的操作數(shù)必須類型一致，不一致時返回flase。
9. Vue 不能檢測數(shù)組的變化
- 數(shù)組的值更改用該方法：Vue.set(數(shù)組, indexOfItem, newValue)
-或者 this.$set(數(shù)組, indexOfItem, newValue)
10.vue路由傳值丟失問題
使用query方式，如果是要轉(zhuǎn)成string格式，否則是undefine
11. ref的使用，for循環(huán)
12. vue部署到服務(wù)器
nginx配置(接口，圖片跨域解決，復(fù)雜跨域)
server {
listen 5888;
server_name pc_admin;
location / {
root /Users/zilong/Desktop/dist;
index index.html index.htm;
try_files $uri $uri/ @router;
index idex.html;
}
location @router {
rewrite ^.*$ /index.html last;
}
// 解決接口復(fù)雜跨域
location /boss {
proxy_pass http://127.0.0.1:8081;
add_header Access-Control-Allow-Origin $http_origin;
add_header Access-Control-Allow-Methods *;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
add_header Access-Control-Max-Age 60000;
add_header Access-Control-Allow-Credentials true;
if ($request_method = OPTIONS){
return 200;
}
}
// 解決圖片訪問跨域
location /img {
rewrite ^/img/(.*) http://127.0.0.1/$1 permanent;
}
}
