# watch 用法

（1）、普通的watch

<div>
     {{common}}
      <button @click="common='123456'">change</button>
</div>

data () {
     return {
          common: 'hello world'
     }
},
watch: {
     common (newVal, oldVal) {
         console.log(`newVal--->${newVal}`)
      }
 },

運行：

（2）、對象的屬性watch （需要借助 computed 計算屬性）

<div>
    {{common.name}}
   <button @click="common.name='KobeByrant'">change</button>
 </div>

computed: {
     name () {
        return this.common.name
     }
},
watch: {
     name (newVal, oldVal) {
         console.log(`newVal--->${newVal}`)
      }
},

# 移動端 1px：

HTML部分：加一個 “border-1px” 類

<div class="container border-1px"></div>

CSS部分：兩部分，一部分是通過偽類給定1px 的寬度，另一部分是在不同DPI下縮小一定的倍數

.border-1px{
    position: relative;
    &:after{
        position: absolute;
        bottom: 0;
        left: 0;
        display: block;
        width: 100%;        
        content: '';
        border-top: 1px solid $color;
    }
}

@media (-webkit-min-device-pixel-ratio: 1.5) {
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.7);
            -moz-transform: scaleY(0.7);
            transform: scaleY(0.7);
        }
    }
}

@media (-webkit-min-device-pixel-ratio: 1.0) {
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.5);
            -moz-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

# Element.getBoundingClientRect()

Element.getBoundingClientRect() 方法返回元素的大小及其相對于視口的位置

返回值是一個 DOMRect 對象，該對象包含了一組用于描述邊框的只讀屬性，left、right、top 和 bottom，單位為像素。除了width 和 height 以外的屬性都是相對于視口的左上角

當滾動位置發生改變時，top 和 left 屬性值會立即隨之發生變化，因為它們的值是相對于視口的，不是絕對的。

<div class="bounding bounding-hook"></div>

let rect = document.getElementsByClassName('bounding-hook')[0].getBoundingClientRect()

console.log(rect)

控制臺打印結果：

# ref 屬性：

屬性值是一個 String，這里要注意一點，屬性值必須是一個單詞或者駝峰命名法（這點可以自行試驗），如果模板中用短橫杠命名法，js中用駝峰的話會報錯；如果二者都用短橫杠，也會報錯

如果用在普通的DOM元素上，引用指向的就是DOM元素；如果用在子組件上，引用就指向組件實例

（1）、用在普通的DOM元素上

<template>
  <div>
    <p ref="profile"> hello world!</p>
    <button @click="hello">button</button>
    <h1>{{str}}</h1>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data () {
      return {
        str: ''
      }
    },
    methods: {
      hello () {
        this.str = this.$refs.profile.innerHTML
      }
    }
  }

</script>

運行效果：

可以看到，點擊按鈕時，通過 " this.$refs.profile" 獲取到的是整個 DOM元素 (<p data-v-04987154> hello world!</p>)

（2）、用在子組件上

父組件：

<template>
  <div>
    <child ref="childWrapper"></child>
    <button @click="get">父組件按鈕</button>
    <h1>{{str}}</h1>
  </div>
</template>

<script type="text/ecmascript-6">
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        str: ''
      }
    },
    methods: {
      get () {
        this.$refs.childWrapper.addNum()
        this.str = this.$refs.childWrapper.str
      }
    }
  }

</script>

子組件：

<template>
  <div class="child-wrapper">
      <button @click="addNum()">子組件按鈕</button>
      <div v-show="isShow"></div>
  </div>
</template>

<script>
export default {
    data () {
        return {
            isShow: false,
            str: '我是子組件的數據，你能拿到我嗎？'
        }
    },
    methods: {
        addNum () {
            this.isShow = !this.isShow
        }
    }
}
</script>

運行效果：

可以看到，child組件可以通過點擊按鈕實現紅色DIV的顯示與隱藏，父組件一樣可以通過 " this.$ref.childWrapper" 拿到子組件，并調用獲取子組件的數據和方法，對子組件加以控制

關于 ref 注冊時間的重要說明：因為 ref 本身是作為渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$refs 也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。

上面的兩個例子，都是通過點擊事件來實現示例效果，如果我們直接在數據更新的時候通過 ref來訪問的話是找不到的，報錯未定義，如下圖：

為了解決這個問題，我們可以借助$nextTick方法延遲調用，在下次DOM更新之后執行

<script type="text/ecmascript-6">
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        str: ''
      }
    },
    created () {
      // this.get2()
      this.$nextTick(() => {
        this.get2()  // 我是子組件的數據，你能拿到我嗎？
      })
    },
    methods: {
      get2 () {
        console.log(this.$refs.childWrapper.str)
      }
    }
  }

</script>

# 為動畫DOM元素添加 transform: translate3d(0,0,0) 開啟GPC硬件加速模式，從而讓瀏覽器在渲染動畫時，從CPU轉向GPU。具體有兩篇較好的文章可查閱

http://blog.bingo929.com/transform-translate3d-translatez-transition-gpu-hardware-acceleration.html

http://www.w3cplus.com/animation/animation-performance.html

.cart-decrease{
        display: inline-block;
        padding: 6px;
        opacity: 1;
        transform: translate3d(0,0,0); // 開啟GPU硬件加速，解決Chrome動畫卡頓
        .inner{
            display: inline-block;
            line-height: 24px;
            font-size: 24px;
            color: rgb(0, 160, 220);
            transition: all 0.4s linear;
            transform: rotate(0);
        }
        &.move-enter-active, &.move-leave-active{
            transition: all 0.4s linear
        }
        &.move-enter, &.move-leave-to{
            opacity: 0;
            transform: translate3d(24px, 0, 0);
            .inner{
                transform: rotate(180deg);
            }
        }
    
    }

# navtive 修飾符

瀏覽器默認會把 <router-link>渲染成 a 標簽，如果需要為 router-link 添加事件，不能像一般 html 元素那樣直接寫 " @click="someMethod"，必須加 .navtive 修飾符

Demo 1：按一般的寫法添加事件

 <router-link to="/rank" @click="test">aaa</router-link>

test () {
      alert(1)
}

Demo2：用.native 修飾符來添加事件

<router-link to="/rank" @click.native="test">aaa</router-link>

同樣，給組件綁定原生事件也必須用 .native 修飾符

<select v-model="optSelected">
          <option value="aa">AA</option>
            <option value="bb">BB</option>
</select>
<component :is="optSelected" @click="test"></component>

不加的情況下，沒法彈出1，并且控制臺會有警告消息

現在加上修飾符

<select v-model="optSelected">
          <option value="aa">AA</option>
            <option value="bb">BB</option>
</select>
 <component :is="optSelected" @click.native="test"></component>

# slot 插槽

（1）、單個插槽

組件的可復用性在開發中帶來非常大的方便，但某些特殊情況下依舊不太靈活，比如自定義一個模態框彈出各種消息，“添加成功！”，“刪除成功！”之類，實現的時候往往需要通過props屬性來傳遞一些提示消息或者傳遞bool值來顯示自定義模態框組件中的某些消息。

通過 slot 就可以很好的解決這個問題，顧名思義，slot就是一個插槽（可以理解成一個占位符），在子組件中添加slot占據一塊位置，這塊位置放什么內容暫時不用考慮。被調用時，其父組件可根據實際情況把自己的內容傳入到slot插槽占好的位置中。

子組件：

<div class="child">
      <slot></slot>
 </div>

父組件：

<div class="log-out content">
    <my-component>
         <ul>
             <li v-for="item in 10">{{item}}</li>
          </ul>
    </my-component>
 </div>

渲染結果：

上圖可看到，在本來為空的子組件中插入了一個ul列表

官網提到了兩個問題：

一、除非子組件模板包含至少一個<slot>插口，否則父組件的內容將會被丟棄

也就是說，如果子組件沒有 slot 插槽，那么上例中的ul列表就不會在DOM中顯示出來

子組件：

<div class="child">
      <!-- <slot></slot> -->
 </div>

什么都渲染不出來，父組件的內容被丟棄了

二、最初在<slot>標簽中的任何內容都被視為備用內容。備用內容在子組件的作用域內編譯，并且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容

也就是說，slot 插槽中的內容只有在父組件沒有內容的情況下才會顯示，針對上例，改下my-component組件slot插槽中的內容

子組件：

<div class="child">
      <slot>如果父組件中什么內容都沒有就顯示這段文字</slot>
</div>

渲染結果，父組件有一個列表循環，所以不會顯示slot插槽中的備用內容

現在稍作修改，移除父組件中的內容

父組件：

<div class="log-out content" v-show="otherFlag">
     <my-component>
         <!-- <ul>
             <li v-for="item in 10">{{item}}</li>
          </ul> -->
      </my-component>
 </div>

渲染結果：

（2）、具名插槽

一、子組件通過給 solt 插槽添加 name 屬性來配置如何分發內容

二、子組件的多個 slot 插槽有多個不同的名字

三、父組件中與子組件對應的slot插槽對應的元素 需要添加 slot 屬性

四、渲染出的DOM順序以子組件中slot出現的順序為準

五、父組件中沒有 slot 屬性的元素會被插入到子組件中沒有name 屬性的slot插槽中

子組件：

<div class="child">
      <div class="header">
          <slot name="header"></slot>
      </div>
      <div class="body">
          <slot></slot>
      </div>
      <div class="footer">
        <slot name="footer"></slot>
      </div>
 </div>

父組件：

<div class="log-out content" v-show="otherFlag">
     <my-component>
           <div>我還在頂部嗎？</div>
            <ul slot="footer">
               <li>單個插槽</li>
               <li>具名插槽</li>
            </ul>
            <span>我的插槽在哪里呢？</span>
            <h1 slot="header">頭部信息</h1>
        </my-component>
 </div>

渲染結果：

總結

以上是生活随笔為你收集整理的vue-eleme 学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。