Detailed explanation of the difference between uniapp and vue

Project Directory:

┌─uniCloud cloud space directory, Alibaba Cloud is uniCloud-aliyun, Tencent Cloud is uniCloud-tcb
│─components The uni-app component directory that complies with the vue component specification│ └─comp-a.vue The reusable a component ├─The directory where the hybrid App stores local HTML files ├─platforms The directory where the dedicated pages of each platform are stored ├─pages The directory where the business page files are stored│ ├─index
│ │ └─index.vue index page│ └─list
│ └─list.vue list page ├─static The directory for storing local static resources (such as pictures, videos, etc.) referenced by the application. Note: static resources can only be stored here ├─uni_modules Stores uni_module standard plug-ins.
├─wxcomponents is the directory for storing applet components ├─main.js Vue initialization entry file ├─App.vue application configuration, used to configure the global style of the App and monitor the application life cycle ├─manifest.json configures the application name, appid, logo, version and other packaging information └─pages.json configures page routing, navigation bar, tabs and other page class information

1. Simple page example

<template> <view class="hello">{{hello}}view>template><script>export default { data() {return {hello: 'hello， 我是神的尾巴' } } }script><style>.hello {color: red;}style>

2.uni-app supports mixed use of vue components and mini-program native components

For specific usage, see uni-app Mini-Program Component Support: https://uniapp.dcloud.io/frame?id=Mini-Program Component Support.

3. Common tags and components include view, text, swiper, scroll-view, etc.

Supports nesting and

and are not a component, they are just a wrapper element that does not render anything on the page and only accepts control properties.

<template>
    <view>
        <template v-if="test">
            <view>Displayed when test is true</view>
        </template>
        <template v-else>
            <view>Displayed when test is false</view>
        </template>
    </view>
</template>

4. Life Cycle

4.1 Application life cycle, in app.vue

4.2 Page life cycle, can be written in each page.

uni-app supports the following page lifecycle functions:

onLoad: function() {
console.log('visitor onLoad');
},
onShow: function() {
console.log('visitor onShow');
},
mounted: function() {
console.log('visitor mounted');
},

4.3 Component life cycle, equivalent to the life cycle of Vue.

5. Use plugins

uni-app plug-in market, to find some plug-ins suitable for our business scenarios.

For example, the pull-down refresh plug-in, the native APP one-click login plug-in, etc.

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!