学习 vue 的总结

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 不能检测数组的变化

原文：https://cn.vuejs.org/v2/guide/reactivity.html#%E6%A3%80%E6%B5%8B%E5%8F%98%E5%8C%96%E7%9A%84%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9

• 数组的值更改用该方法：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;
          }
}