Vue学习笔记.txt

less中获取元素的方法：
    .xxxxx{

    }           //根据类名获取元素
    xxxxx{

    }           //根据标签名获取元素
    #xxxx{

    }           //根据id获取元素
    
获取其他文件的数据
1、vuex:
    引入mapMutations来获取方法
    并且添加相关引用、定义
2、子组件继承父组件：
    自查
    
子组件/父组件互相调用方法：
  子组件调用父组件：
    1、子组件方法中声明：
      childMethod() {
        this.$parent.fatherMethod();
      }
    2、利用JSON的emit：
      父组件声明：
        <child @fatherMethod="fatherMethod"></child>
      子组件调用：
        childMethod() {
          this.$emit('fatherMethod');
        }
    3、父组件直接传入：
        <child :fatherMethod="fatherMethod"></child>
      子组件调用：
        childMethod() {
          if (this.fatherMethod) {
            this.fatherMethod();
          }
        }
  父组件调用子组件：
    1、通过ref：
      <Child ref="child1"/>
      method：
        this.$refs.child1.childMethod();

字体居中对齐：
    水平居中：
        text-align: center;
    垂直居中：
        padding
        vertical-align: middle;
        align-items: center;//!!!!!!!!

深度复制:
  简单复制属于引用，指向的内存地址相同，一个改变都会改变
  深度复制有两种方法：
    1、deepCopy()，编写深度复制的方法
    2、通过JSON改变，首先通过stringify方法转为字符串，再通过parse方法转为obj对象

调用后台：
  通过Ajax框架调用后台接口
  Tips：
    1、post、delete、patch、get：增删改查
    2、
  updateMouseSettings(param){
    const mouseSettingsCab = JSON.stringify(param);
    const that = this;
    this.axios.patch(constant.updateUserPreferences , {mouseSettingsCab}).then(function (response) {
      if(response.data.success === 1){
        that.$Message.success(that.$t("app.saveSuccess"));
      }else{
        that.$Message.error(that.$t("app.saveFailed"));
      }
    })
  },

v-for/v-if:
  2.x:
    v-for > v-if: 每次v-for均会执行v-if
  3.x:
    v-for < v-if：v-if不能取到v-for的参数

通过<div>/<button>实现radioGroup的功能：
  <div class="defaultClass" :class="flag ? 'selectedDiv' : ''" @click="selectDiv(this)"></div>

  data:{
    return{
      selectedDiv: '';
    }
  },
  method:{
    selectDiv(target){
      this.selectedDiv = target;
    },
  }

  .selectedDiv{
    background-color: red;
  }
  Tips： 见下条

CSS优先级：
  1、内联>最近的祖先>其他祖先
  2、内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
  3、样式被应用的位置越在下面则优先级越高
  4、属性后插有 !important 的属性拥有最高优先级

出现无法刷新组件的情况：
  向组件绑定一个肯定会改变的key eg：:key="'test' + index + array.length"

新手引导组件：
  introjs组件：
    安装：
      npm install intro.js
      npm install vue-introjs
      在main.js中引用：
        import VueIntro from 'vue-introjs';
        Vue.use(VueIntro);
        import 'intro.js/introjs.css';
    使用：
      HTML：
        可以通过HTML绑定，API：
          data-intro：contain text
          data-title：
          data-step：
          data-tooltipClass：
          data-highlightClass：
          data-position：top, left, right, bottom, bottom-left-aligned (same as bottom), bottom-middle-aligned, bottom-right-aligned or auto
          data-scrollTo：element or tooltip
          data-disable-interaction：true不可交互

事件监听：
  1、vuex的editmap中声明eventManager的trigger方法：
    //testPostEvent
    postGuideEvent (state, type) {
      sceneData.editor.eventManager.trigger('postGuideEvent', type);
    },
  2、触发事件的文件中引入、触发方法：
    import EventManager from '../../editor/core/manager/event_manager.js';
    methods:{
      click(){
        EventManager.trigger('postGuideEvent','baseMap');
      },
    }
  3、在监听事件的页面的created中声明监听方法：
    const that = this;
    EventManager.on('postGuideEvent', function (e, property) {
      switch (property) {
        case 'baseMap':{
          that.introJS.nextStep();
          break;
        }
        case 'test':{
          break;
        }
      }
    })

网页地址相关：
  https://www.cnblogs.com/dreambin/p/11059655.html
    
监听事件出错：
  更改开始监听的位置，可能在created的时候还没有正确引入jQuerry

ajax请求:
  其中patch之类的query参数需要使用FormData数据格式：
    const param = new FormData;
    param.append('dataName', dataValue);
    param.get('dataName');
  get的query参数需要使用嵌套对象来存储数据：
    const param = {
      params: {}, // params名称不能改变
    };
    param.params['dataName'] = dataValue;
    
git撤销本地commit：
  git reset --hard <commit_id>
  回退到某个commit

涉及到操作数组序列的，比如增删数据项等操作，不要正序操作，包括forEach，需要逆序操作