vue餓了嗎實戰總結

1、v-el ，v-ref 最後都轉化為了 ref ref="xxx"

a、ref在官網上的解釋簡單來說就是用來繫結某個dom元素，或者來說用來繫結某個元件，然後在$refs裡面呼叫,

b、如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子元件上，引用就指向元件例項

c、$refs作為子元件索引，但是是非響應式，所以儘量少用

eg:<div class='parent'ref='showhello'>hello</div> js中 this.$refs.showhello.innerText() ----showhello

2、vue裡面的類名等都可以寫成方法等只要最後返回的東西是需要的東西就可以

3、父元件向子元件傳遞引數在子元件中通過props接收在父元件中通過：seller 通過api獲取並且在data中定義

<router-view :seller="seller">content</router-view>子元件：

props:{ //這裡router 路由的時候將這個傳過來了所以可以直接使用

4、子元件向父元件傳遞引數 通過$emit 一般是定義一個show或者是click事件然後通過$emit傳遞

eg:子級：

togglecontent(event){
  if(!event._constructed){
    return;//設定他的原生事件不觸發
}
  this.onlycontent = !this.onlycontent;
  this.$emit("toggleContent",this.onlycontent);
}

父級：

a、先匯入元件

import rating from '../rating/rating.vue';

b、然後註冊

components:{
  rating
}

c、在頁面引用這個元件

<rating :selectedType="selectedType"  v-on:ratingtypeSelect="ratingtypeselect" v-on:toggleContent="togglecontent"  :onlyContent="onlyContent" :destype="destype" :rating="food.ratings"></rating>

通過@toggleContent='togglecontent'或者v-on:toggleContent='togglecontent'

d、通過togglecontent(){}這個方法將子級定義出來的togglecontent值賦值給父級

togglecontent(onlyContent){
  this.onlyContent = onlyContent;
  this.$nextTick(() =>{
    this.scroll.refresh();
  })
},

5、vue2中的路由定義層：<router-link to="/goods">商品</router-link> 這裡用to指向路徑表現層：<keep-alive>

<keep-alive><router-view :seller="seller">content</router-view></keep-alive>

6、<keep-alive>如果把切換出去的元件保留在記憶體中，可以保留它的狀態或避免重新渲染。為此可以新增一個keep-alive指令

7、動態設定class 裡面可以接收多個json物件也可以接收陣列但是最後還是會將陣列轉化成json物件的形式

<div class='top' :class="{'active':show}"></div>

data:{showdiv:false}定義show(){ this.showdiv=true;} :class="{}"裡面也可以寫成三元判斷或者是簡單的if條件判斷新增一些在特定條件下才顯示的style樣式

<div v-bind:class="[isActive ? activeClass : '', errorClass]">

8、屬性繫結 v-bind:class="{}" 簡寫 :class="{}" 繫結事件 監聽事件：v-on:click='show' 簡寫 @click='show'

9、v-if 和v-show的區別v-if 條件判斷,不滿足條件的話則不會出現在dom中 v-show 是否顯示,不管滿不滿足條件均會在dom中,若不滿足條件,則會設定成隱藏 display:none v-show是通過display來控制的

10、

Vue.nextTick( [callback, context] )

• 引數：

  • {Function} [callback]
  • {Object} [context]

this.$nextTick(() =>{
  if(!this.imscroll){
    this.imscroll = new BScroll(this.$refs.images,{
      scrollX:true,
      eventPassthrough:'vertical',
      click:true
});
  }
});

對dom操作最好是在這裡面進行