watch

它用于觀察Vue實例上的數(shù)據(jù)變動。對應一個對象，鍵是觀察表達式，值是對應回調。值也可以是方法名，或者是對象，包含選項。

<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//對象內部的屬性監(jiān)聽，也叫深度監(jiān)聽
      },
      list3: function(val,oldval){
          console.log(val)
          console.log(oldval)
      }
    }
}
</script>

克隆

克隆分深度克隆和淺克隆
1.淺克隆
淺克隆之所以被稱為淺克隆，是因為對象只會被克隆最外部的一層,至于更深層的對象,則依然是通過引用指向同一塊堆內存.

// 淺克隆函數(shù)
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標簽實現(xiàn)錨點定位時，如果路由模式使用的是hash模式的話，如果有相應的路由的話會進行路由跳轉?？梢酝ㄟ^自定義方法來實現(xiàn)錨點定位。

<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!'
    }
  });