国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue和微信小程序的區別、比較

mcterry / 1405人閱讀

摘要:相比之下,小程序的鉤子函數要簡單得多。一生命周期先貼兩張圖生命周期小程序生命周期相比之下,小程序的鉤子函數要簡單得多。的鉤子函數在跳轉新頁面時,鉤子函數都會觸發,但是小程序的鉤子函數,頁面不同的跳轉方式,觸發的鉤子并不一樣。

前言

寫了vue項目和小程序,發現二者有許多相同之處,在此想總結一下二者的共同點和區別。相比之下,小程序的鉤子函數要簡單得多。

寫了vue項目和小程序,發現二者有許多相同之處,在此想總結一下二者的共同點和區別。

一、生命周期

先貼兩張圖:

vue生命周期

小程序生命周期

相比之下,小程序的鉤子函數要簡單得多。

vue的鉤子函數在跳轉新頁面時,鉤子函數都會觸發,但是小程序的鉤子函數,頁面不同的跳轉方式,觸發的鉤子并不一樣。

onLoad: 頁面加載

一個頁面只會調用一次,可以在 onLoad 中獲取打開當前頁面所調用的 query 參數。

onShow: 頁面顯示

每次打開頁面都會調用一次。

onReady: 頁面初次渲染完成

一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互。

對界面的設置如wx.setNavigationBarTitle請在onReady之后設置。詳見生命周期

onHide: 頁面隱藏

當navigateTo或底部tab切換時調用。

onUnload: 頁面卸載

當redirectTo或navigateBack的時候調用。

數據請求

在頁面加載請求數據時,兩者鉤子的使用有些類似,vue一般會在created或者mounted中請求數據,而在小程序,會在onLoad或者onShow中請求數據。

二、數據綁定

VUE:vue動態綁定一個變量的值為元素的某個屬性的時候,會在變量前面加上冒號:,例:

1.  ?

小程序:綁定某個變量的值為元素屬性時,會用兩個大括號括起來,如果不加括號,為被認為是字符串。例:

1.  ?

三、列表渲染

直接貼代碼,兩者還是有些相似

vue:

1.  ??
2.  ??
3.  {{?item.message?}}??
4.  ??
5.  ??

7.  var?example1?=?new?Vue({??
8.  el:?"#example-1",??
9.  data:?{??
10.  items:?[??
11.  {?message:?"Foo"?},??
12.  {?message:?"Bar"?}??
13.  ]?
14.  }??
15.  })??

小程序:

1.  Page({??
2.  data:?{??
3.  items:?[??
4.  {?message:?"Foo"?},??
5.  {?message:?"Bar"?}??
6.  ]??
7.  }??
8.  })??

10.  {{item}}??

四、顯示與隱藏元素

vue中,使用v-if 和v-show控制元素的顯示和隱藏

小程序中,使用wx-if和hidden控制元素的顯示和隱藏

五、事件處理

vue:使用v-on:event綁定事件,或者使用@event綁定事件,例如:

1.  Add?1??
2.  Add1??//阻止事件冒泡?

小程序中,全用bindtap(bind+event),或者catchtap(catch+event)綁定事件,例如:

1.  明天不上班??
2.  明天不上班??//阻止事件冒泡??

六、數據雙向綁定

1.設置值

在vue中,只需要再表單元素上加上v-model,然后再綁定data中對應的一個值,當表單元素內容發生變化時,data中對應的值也會相應改變,這是vue非常nice的一點。

1.  ??
2.  ??
3.  
?? 5. new?Vue({?? 6. el:?"#app",?? 7. data:?{?? 8. reason:""?? 9. }?? 10. })??

但是在小程序中,卻沒有這個功能。那怎么辦呢?

當表單內容發生變化時,會觸發表單元素上綁定的方法,然后在該方法中,通過this.setData({key:value})來將表單上的值賦值給data中的對應值。

下面是代碼,可以感受一下:

1.  ??
2.  Page({??
3.  data:{??
4.  reason:""??
5.  },??
6.  bindReason(e)?{??
7.  this.setData({??
8.  reason:?e.detail.value??
9.  })??
10.  }??
11.  })?

當頁面表單元素很多的時候,更改值就是一件體力活了。和小程序一比較,vue的v-model簡直爽的不要不要的。

2.取值

vue中,通過this.reason取值

小程序中,通過this.data.reason取值

七、綁定事件傳參

在vue中,綁定事件傳參挺簡單,只需要在觸發事件的方法中,把需要傳遞的數據作為形參傳入就可以了,例如:

1.  ??
2.  new?Vue({??
3.  el:?"#app",??
4.  methods:{??
5.  say(arg){??
6.  consloe.log(arg)??
7.  }??
8.  }??
9.  })??

在小程序中,不能直接在綁定事件的方法中傳入參數,需要將參數作為屬性值,綁定到元素上的data-屬性上,然后在方法中,通過e.currentTarget.dataset.*的方式獲取,從而完成參數的傳遞,很麻煩有沒有...

1.  ??
2.  Page({??
3.  data:{??
4.  reason:""??
5.  },??
6.  toApprove(e)?{??
7.  let?id?=?e.currentTarget.dataset.id;??
8.  }??
9.  })??

八、父子組件通信

1.子組件的使用

在vue中,需要:

編寫子組件

在需要使用的父組件中通過import引入

在vue的components中注冊

在模板中使用?

1.  //子組件?bar.vue??
2.  ??
7.  ??

25.  //?父組件?foo.vue??
26.  ??

32.  ??

在小程序中,需要:

? 1.編寫子組件

? 2. 在子組件的json文件中,將該文件聲明為組件

1.  {??
2.  "component":?true??
3.  }??

? 3.在需要引入的父組件的json文件中,在usingComponents填寫引入組件的組件名以及路徑

1.  "usingComponents":?{??
2.  "tab-bar":?"../../components/tabBar/tabBar"??
3.  }??

? ?4.在父組件中,直接引入即可

1.  ?

? ? ? 具體代碼:

1.  //?子組件??
2.  ??
3.  ??
4.  ??
5.  ??
6.  首頁??
7.  ??
8.  ??
9.  ??
10.  設置??
11.  ??
12.  ??

2.父子組件間通信

在vue中

父組件向子組件傳遞數據,只需要在子組件通過v-bind傳入一個值,在子組件中,通過props接收,即可完成數據的傳遞,示例:

1.  //?父組件?foo.vue??
2.  ??
7.  ??

18.  //?子組件bar.vue??
19.  ??
24.  ??

子組件和父組件通信可以通過this.$emit將方法和數據傳遞給父組件。

在小程序中

父組件向子組件通信和vue類似,但是小程序沒有通過v-bind,而是直接將值賦值給一個變量,如下:

1.  ?

此處, “index”就是要向子組件傳遞的值

在子組件properties中,接收傳遞的值

1.  properties:?{??
2.  //?彈窗標題??
3.  currentpage:?{????????????//?屬性名??
4.  type:?String,?????//?類型(必填),目前接受的類型包括:String,?Number,?Boolean,?Object,?Array,?null(表示任意類型)??
5.  value:?"index"?????//?屬性初始值(可選),如果未指定則會根據類型選擇一個?
6.  }?
7.  }??

子組件向父組件通信和vue也很類似,代碼如下:

1.  //子組件中??
2.  methods:?{?????
3.  //?傳遞給父組件??
4.  cancelBut:?function?(e)?{??
5.  var?that?=?this;??
6.  var?myEventDetail?=?{?pickerShow:?false,?type:?"cancel"?}?//?detail對象,提供給事件監聽函數??
7.  this.triggerEvent("myevent",?myEventDetail)?//myevent自定義名稱事件,父組件中使用??
8.  },?
9.  }??
10.  //父組件中??
11.  ???
12.  //?獲取子組件信息??
13.  toggleToast(e){??
14.  console.log(e.detail)??
15.  }??

如果父組件想要調用子組件的方法

vue會給子組件添加一個ref屬性,通過this.$refs.ref的值便可以獲取到該子組件,然后便可以調用子組件中的任意方法,例如:

1.  //子組件??
2.  ??
3.  //父組件??
4.  this.$ref.bar.子組件的方法??

小程序是給子組件添加id或者class,然后通過this.selectComponent找到子組件,然后再調用子組件的方法,示例:

1.  //子組件??
2.  ??
3.  //?父組件??
4.  this.selectComponent("#id").syaHello()??

小程序和vue在這點上太相似了,有木有。。。

九、廢話

還有好多地方沒寫,之后再慢慢加上、精簡。感覺自己寫的有點冗余,大佬勿噴!!!

原來地址: https://segmentfault.com/a/11...

更多參考

終于,我還是碼造一個了中國地圖

SVG前戲—讓你的View多姿多彩

分享幾個Android很強勢的的開源框架

金9銀10的面試黃金季節,分享幾個重要的面試題

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/52823.html

相關文章

  • vue和微信小程序區別比較

    摘要:相比之下,小程序的鉤子函數要簡單得多。一生命周期先貼兩張圖生命周期小程序生命周期相比之下,小程序的鉤子函數要簡單得多。的鉤子函數在跳轉新頁面時,鉤子函數都會觸發,但是小程序的鉤子函數,頁面不同的跳轉方式,觸發的鉤子并不一樣。 前言 寫了vue項目和小程序,發現二者有許多相同之處,在此想總結一下二者的共同點和區別。相比之下,小程序的鉤子函數要簡單得多。 寫了vue項目和小程序,發現二者有...

    yck 評論0 收藏0
  • Java 初學者做第一個微信小程序總結--關于Java基礎

    摘要:官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署,在微信開發工具中直接上傳代碼就行。 為什么 學習 Java 三年,目前已經工作了2年,因為自學,基礎差,所以打算年末總結一下常見的基礎知識和面試點; 也可以通過獨立做一個項目整合自己工作期間學習的知識,加深印象。 但是想著回家或是平時手機用的多,做一款APP和小程序很方便查看。 項目展示 本...

    mudiyouyou 評論0 收藏0
  • 開源中國專訪:Chameleon原理首發,其它跨多端統一框架都是假

    摘要:中國互聯網絡信息中心發布的中國互聯網絡發展狀況統計報告顯示,截至年月,我國網民規模達億人,微信月活億支付寶月活億百度月活億另一方面,中國手機占智能手機整體的比例超過,月活約億。在年末正式發布了面向未來的跨端的。 開源中國專訪:Chameleon原理首發,其它跨多端統一框架都是假的? 原創: 嘉賓-張楠 開源中國 以往我們說某一功能跨多端,往往是指在諸如 PC、移動等不同類型的設備之...

    GraphQuery 評論0 收藏0

發表評論

0條評論

mcterry

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<