uniapp和vue的區別詳解
目錄
- 1.簡單的頁面示例
- 2.uni-app支援元件和小程式原生元件混用
- 3.常用標籤,常用元件包括view、text、swiper、scroll-view等。
- 4.生命週期
- 4.1應用生命週期,這app.vue裡面
- 4.2頁面生命週期,可以做每個頁面中寫。
- 4.3元件生命週期,相當於vue的生命週期。
- 5.使用外掛
- 總結
專案目錄:
┌─uniCloud 雲空間目錄,阿里云為uniCloud-aliyun,騰訊云為uniCloud-tcb
│─components 符合vue元件規範的uni-app元件目錄
│ └─comp-a.vue 可複用的a元件
├─hybrid App端存放本地html檔案的目錄
├─platforms 存www.cppcns.com放各平臺專用頁面的目錄
├─pages 業務頁面檔案存放的目錄
│ ├─index
│ │ └─index.vue index頁面
│ └─list
│ └─list.vue list頁面
├─static 存放應用引用的本地靜態資源(如圖片、視訊等)的目錄,注意:靜態資源只能存放於此
├─uni_modules 存放uni_module規範的外掛。
├─wxcomponents 存放小程式元件的目錄
├─main. Vue初始化入口檔案
├─App.vue 應用配置,用來配置App全域性樣式以及監聽 應用生命週期
├─manifest.json 配置應用名稱、appid、logo、版本等打包資訊└─pages.json 配置頁面路由、導航條、選項卡等頁面類資訊
1.簡單的頁面示例
<template> <view class="hello">{{hello}}view>template><script>export default { dawww.cppcns.comta()http://www.cppcns.com {return {hello: 'hello, 我是神的尾巴' } } }script><style>.hello {color: red;}style>
2.uni-app支援vue元件和小程式原生元件混用
具體的使用方式見uni-app 小程式元件支援:https://uniapp.dcloud.io/frame?id=小程式元件支援。
3.常用標籤,常用元件包括view、text、swiper、scroll-view等。
支援在 template 模板中巢狀 和
和 並不是一個元件,它們僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬性。
<template> <view> <template v-if="test"> <view>test 為 true 時顯示</view> </template> <template v-else> <view>test 為 false 時顯示</view> </template> </view> </template>
4.生命週期
4.1應用生命週期,這app.vue裡面
4.2頁面生命週期,可以做每個頁面中寫。
uni-app 支援如下頁面生命週期函式:
onLoad: function() {
console.log(‘visitor onLoad');
},
onShow: function() {
console.log(‘visitor onShow');
},
mounted: function() {
console.log(‘visitor mounted');
},
4.3元件生命週期,相當於vue的生命週期。
5.使用外掛
uni-app 外掛市場,去找一些適合我們業務場景的外掛。
例如下拉重新整理外掛、原生APP一鍵登入外掛等。
總結
本篇文章就到這裡了,希望能夠給你帶來幫助,也希望您能夠多多關注我們的更多內容!