1. vue-cli ：快速创建vue工程的开发工具指令集
- 安装vue-cli :npm install -g @vue/cli
- 安装完成后，查看版本： vue -V
- 基于vue-cli快速创建vue工程项目：vue create 【项目名称】
2. 自定义组件设置原生点击事件
@click.native ，如下图：
@click.png
3. 这是padding marging属性是，注意加上：box-sizing: border-box;
4. flex总结
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
5. divB 要覆盖到divA上
给divAdivB的用父div包裹，并设置父div为大小和divA一样，然后设置 divB postion:absloute，z-index比divA大，居中即可，如下图：
image.png
6. 动态绑定class
# 第一种 ，直接写，多个用逗号隔开
:class="{ 'active': isActive, 'sort': isSort }"
# 第二种，写成对象，放到data里
:class="classValue"
data() {
return {
classValue: { active: true, sort:false }
}
}
# 第三种，写成兑现个，放到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中== 和 ===
- == 用于比较、判断两者相等，比较时可自动换数据类型。
- === 用于（严格）比较、判断两者（严格）相等，不会进行自动转换，要求进行比较的操作数必须类型一致，不一致时返回flase。
9. Vue 不能检测数组的变化
- 数组的值更改用该方法：Vue.set(数组, indexOfItem, newValue)
-或者 this.$set(数组, indexOfItem, newValue)
10.vue路由传值丢失问题
使用query方式，如果是要转成string格式，否则是undefine
11. ref的使用，for循环
12. vue部署到服务器
nginx配置(接口，图片跨域解决，复杂跨域)
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;
}
// 解决接口复杂跨域
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;
}
}
