vue开发中踩过的坑

watch

它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。

<script type="text/ecmascript-6">
export default {
    props: [],
    data: function () {
      return {
      list: [
        {
          name: '1',
          sort: 1
        },
        {
          name: '2',
          sort: 2
        }
      ],
      list3: ['1', '3']
             }
     }，
 watch:{
      list:{
        handler:function(val,oldval){
          console.log(val)
          console.log(oldval)
        },
        deep:true//对象内部的属性监听，也叫深度监听
      },
      list3: function(val,oldval){
          console.log(val)
          console.log(oldval)
      }
    }
}
</script>

克隆

克隆分深度克隆和浅克隆
1.浅克隆
浅克隆之所以被称为浅克隆，是因为对象只会被克隆最外部的一层,至于更深层的对象,则依然是通过引用指向同一块堆内存.

// 浅克隆函数
function shallowClone(obj1) {
  let obj2= {};
  for ( let i in obj1) {
    obj2[i] = obj1[i];
  }
  return obj2;
}
// 被克隆对象
const oldObj = {
  name: 'jason',
  clothes: [ 'a', 'b', 'c' ],
  cup: { thermos: { l: 500 } }
};
const newObj = shallowClone(oldObj);
console.log(newObj.cup.thermos, oldObj.cup.thermos); // { thermos: 500 } { thermos: 500 }
console.log(newObj.cup.thermos === oldObj.cup.thermos); // true

这里当 newObj.c.h里的值改变的时候，oldObj.c.h里的值也会被改变，因为他们的内存指针的位置相同
2.深度克隆
可以用JSON.parse(JSON.stringify(obj))的方式对对象进行深度克隆
也已上面的列子为例

const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.cup.thermos, oldObj.cup.thermos); // { thermos: 500 } { thermos: 500 }
console.log(newObj.cup.thermos === oldObj.cup.thermos); // false
newObj.cup.thermos = 200;
console.log(newObj.cup.thermos, oldObj.cup.thermos); // { thermos: 200 } { thermos: 500 }

点击空白处，隐藏DIV

<button @click="togglePanel">点击</buttton> 
<div v-show="visible" ref="main">弹出层</div>

export default {
    data () {
        return {
            visible: false
        }
    },
    methods: {
        togglePanel () {
            this.visible ? this.hide() : this.show()
        },
        show () {
            this.visible = true
            document.addEventListener('click', this.hidePanel, false)
        },
    
        hide () {
            this.visible = false
            document.removeEventListener('click', this.hidePanel, false)
        },
    
        hidePanel (e) {
            if (!this.$refs.main.contains(e.target)) {
                this.hide()
            }
        }
    },
    beforeDestroy () {
        this.hide()
    }
}

vue axios全攻略

转载：https://www.cnblogs.com/libin-1/p/6607945.html

vue 模拟锚点

在vue中用a标签实现锚点定位时，如果路由模式使用的是hash模式的话，如果有相应的路由的话会进行路由跳转。可以通过自定义方法来实现锚点定位。

<a href="javascript:void(0)" @click="goAnchor('#anchor')"> 我是锚点</a>
<div id="anchor">

methods: {
    goAnchor(selector) {
        var anchor = this.$el.querySelector(selector)
        document.body.scrollTop = anchor.offsetTop; // chrome
        document.documentElement.scrollTop = anchor.offsetTop; // firefox
        window.pageYOffset = total; //safari
    }
}

querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。 querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。

vue与后台模板引擎“双花括号”冲突时的解决办法

 <div id="app"> ${message } </div>

// Vue.config.delimiters = ['${', '}$'];

        var app= new Vue({
         delimiters: ['${', '}'],
        el:'#app',
        data:{
          message: 'Hello Vue!'
    }
  });