Shulou(Shulou.com)06/03 Report--

This article will explain in detail what are the differences between uniapp and vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Project catalog:

┌─ uniCloud cloud space directory. Ali Cloud is uniCloud-aliyun and Tencent Cloud is uniCloud-tcb.

│─ components uni-app component directory that conforms to the vue component specification

│ └─ comp-a.vue reusable a component

Directory where local html files are stored on the ├─ hybrid App side

The directory where ├─ platforms stores the pages dedicated to each platform

Directory where ├─ pages business page files are stored

│ ├─ index

│ │ └─ index.vue index page

│ └─ list

│ └─ list.vue list page

├─ static stores the directory of local static resources (such as pictures, videos, etc.) referenced by the application. Note: static resources can only be stored here.

├─ uni_modules holds plug-ins for the uni_module specification.

├─ wxcomponents directory where Mini Program components are stored

├─ main.js Vue initialization entry file

├─ App.vue application configuration to configure App global styles and monitor the application lifecycle

Packaging information such as ├─ manifest.json configuration application name, appid, logo, version, etc.

└─ pages.json configure page class information such as page routing, navigation bars, tabs, etc.

1. Simple page example

{{hello}} view > template > export default {data () {return {hello: 'hello, I am the tail of God'} script > .hello {color: red;} style >

2.uni-app supports mixing of vue components and Mini Program native components.

For more information on how to use it, please see uni-app Mini Program component support: https://uniapp.dcloud.io/frame?id= Mini Program component support.

3. Commonly used tags, common components include view, text, swiper, scroll-view and so on.

Support for nesting in template templates and

And are not a component, they are just a wrapper element, do not do any rendering in the page, only accept control attributes.

When test is true, 4. 0 is displayed when test is false. Life cycle

4.1App lifecycle, in this app.vue

4.2 page life cycle, which 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, which is equivalent to the life cycle of vue.

5. Use plug-ins

Uni-app plugin market, to find some plug-ins that are suitable for our business scenario.

For example, drop-down refresh plug-in, native APP one-click login plug-in and so on.

This is the end of the article on "what are the differences between uniapp and vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.