【原】vue開發筆記

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

 

vue router push后document. referrer是空的

不可用document. referrer找個上一個路由地址