vue.js獲取dom元素高度的方法

<div ref="test"></div>

let testHeight = this.$refs.test.offsetHeight

vue.js中行內樣式style、class三元運算式

//style三元運算式
<div :style="{'color': (isActive? '#000':'#fff')}"></div>


//class三元運算式
<div:class="[isActive ? 'test1' : 'test2']"></div>

vue-router中params和query的區別

1.引入方式不同

query要用path來引入

this.$router.push({
    path: 'test',
    query: {
        type: 2,
        detail: '哈哈'
    }
})

params要用name來引入

this.$router.push({
    name: 'test',
    params: {
        type: 2,
        detail: '哈哈'
    }
})

2.url不同

query在url中顯示引數，類似的get請求

http://localhost:8080/detail?type=0&detail=哈哈

params在url中不顯示引數，類似的post請求

http://localhost:8080/detail

$router和$route的區別

this.$route為當前router跳轉物件里面可以獲取name、path、query、params等

this.$router為VueRouter實體，導航到不同URL，可使用this.$router.push()、this.$router.replace()、this.$router.go()

列印下this.$route和this.$router

vue中this.$set的用法

向回應式物件中添加一個屬性，并確保這個新屬性同樣是回應式的，且觸發視圖更新

https://www.jianshu.com/p/6f28f5abee08

簡單理解Vue中的nextTick

在資料變化后要執行的某個操作，而這個操作需要使用隨資料改變而改變的DOM結構的時候，這個操作都應該放進Vue.nextTick()的回呼函式中

https://www.jianshu.com/p/a7550c0e164f

帶有 slot attribute 的具名插槽（廢棄了的語法）

https://cn.vuejs.org/v2/guide/components-slots.html#%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

帶有 slot-scope attribute 的作用域插槽（廢棄了的語法）

https://cn.vuejs.org/v2/guide/components-slots.html#%E5%B8%A6%E6%9C%89-slot-scope-attribute-%E7%9A%84%E4%BD%9C%E7%94%A8%E5%9F%9F%E6%8F%92%E6%A7%BD

dialg關閉彈出層后，部分機型把自動把頁面scrollTop設定為0

解決方案，按鈕不要使用a標簽，直接用div

$forceUpdate() 強制重新渲染

迫使 Vue 實體重新渲染，注意它僅僅影響實體本身和插入插槽內容的子組件，而不是所有子組件，

v-for里面資料層次太多，修改過資料變了，頁面沒有重新渲染，需手動強制重繪，解決方法：運用 this.$forceUpdate()強制重繪

https://cn.vuejs.org/v2/api/#vm-forceUpdate

計算屬性的 setter

計算屬性默認只有 getter，不過在需要時你也可以提供一個 setter

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

https://cn.vuejs.org/v2/api/#vm-forceUpdate

事件修飾符.capture 改變標簽冒泡順序

https://www.cnblogs.com/xiaozhang666/p/10430059.html

Polyfill

Polyfill 是一塊代碼（通常是 Web 上的 JavaScript），用來為舊瀏覽器提供它沒有原生支持的較新的功能，

比如說 polyfill 可以讓 IE7 使用 Silverlight 插件來模擬 HTML Canvas 元素的功能，或模擬 CSS 實作 rem 單位的支持，或 text-shadow，或其他任何你想要的功能，

https://developer.mozilla.org/zh-CN/docs/Glossary/Polyfill

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/160805.html

標籤：JavaScript

上一篇：前端怎么傳一個map給JAVA

下一篇：JS---client系列

【原】vue開發筆記