This article mainly introduces the technical principles of Vue’s development of small programs. In daily operations, I believe that many people have doubts about the technical principles of Vue’s development of small programs. This is a simple and easy-to-use operation method, and I hope it will help you to answer your doubts about the technical principles of Vue development of small programs! Next, please follow the editor to learn together!
Vue.js (pronounced /vjuː/, similar to view) is a set A progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue is designed to be developed incrementally from the bottom up. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. On the other hand, Vue is perfectly capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.
The goal of Vue.js is to implement reactive data binding and composed view components with the simplest API possible.
The above is the explanation given by Vue's official website. It is still very abstract and obscure for most users to read. After reading it, you may still not understand what this framework is used for. What is it? Progressive framework? What is bottom-up incremental development? What is the view layer? What are Single File Components? What is a complex single page application? What is the response data binding and combined view components in the second paragraph?
Presumably everyone uses APP or webpage to browse news on the Internet. Vue.js is a webpage application used to build similar webpages with many form items and content that needs to be modified according to user operations .
Single-page application generally refers to a page is an application, of course it can also be a sub-application, such as a A page can be regarded as a sub-application. There are usually a lot of interactive processing in single-page applications, and the content of the page needs to change dynamically according to the user's operation.
The responsiveness here is not the responsive layout in @media media query, but It means that vue.js will automatically respond to changes in certain data on the page. As for how to respond, you can first paste the following code into a file with an extension of html, open it with a browser, enter some text in the text box, and observe the page changes.
In object-oriented programming, we can use object-oriented thinking to package various modules into classes or split a large business module into more and smaller classes. In process-oriented programming, we can also split some large functions into many functions, and then assign them to different people for development.
In front-end applications, can we also encapsulate modules like programming? This introduces the idea of component development.
Vue.js splits various modules in a single-page application into individual components through components. We only need to write various component tags in the parent application first. (occupancy), and write the parameters to be passed into the component in the component tag (just like passing parameters to the function, this parameter is called the property of the component), and then write the implementation of various components separately (filling the pit) , and the entire application is done.
First of all, Vue and applet development are not directly related.
However, under the influence of Vue and the many developers of Vue, many organizations develop small programs for the second time and develop small programs in a form similar to Vue syntax (finally convert them into native small programs through their own tools. program syntax), such as Meituan’s mpVue (Vue.js in mini program).The advantage is that it reduces the cost for Vue developers to learn applet development, and optimizes the shortcomings of many applets. For example, applets cannot use Npm, CSS preprocessors, and native callback syntax.
For example, mpVue is a front-end framework for developing small programs using Vue.js. The framework is based on the core of Vue.js. In the applet environment, it introduces a whole set of Vue.js development experience for applet development. Using Mpvue to develop applets, you will gain some additional capabilities based on the applet technology system:
Complete component development capabilities:
Improve code Reusability
Complete Vue.js development experience
Convenient Vuex data management solution: easy to build complex applications< /p>
Fast webpack build mechanism: custom build strategy, hotReload during development
Supports the use of npm external dependencies using Vue.js The command line tool vue-cli
Quickly initialize the project
The ability to convert and compile H5 code into a small program object code
After understanding how to develop small programs based on Vue, that is also You can learn how to make better use of the value of small programs. It has to be mentioned that the Hybrid model is gradually becoming popular, and the architectural model of Native + small programs has become a trend. It solves the problem of inflexible iterations and code accumulation caused by traditional apps. , multi-platform maintenance and other issues, and at the same time have an experience far beyond H5.
What I want to recommend here is FinClip, a relatively mature small program container technology in the market. By integrating SDK, you can quickly make your APP have the ability to run small programs.
In addition, the separation of FinClip's view layer and logic layer also brings many benefits:
1. It facilitates data sharing and interaction between multiple applet pages. Having the same context in the life cycle of applets can provide developers with a native application development background with a familiar coding experience;
2. The separation and parallel implementation of Service and View can prevent JS execution impact Or slow down page rendering, which helps to improve rendering performance;
3. Because JS is executed in the Service layer, the DOM operated in JS will not affect the View layer, so the applet cannot manipulate the DOM structure, which also makes the performance of the applet better than the traditional H5.
One more point is worth recommending, Compatible with WeChat Mini Program Development Specification.
That is to say, the WeChat applet originally developed through Vue can also be put in your own APP without changing the code. At the same time, a background management page is provided, which can manage self-owned and externally developed mini programs and analyze the collected mini program data.
Copyright Description：No reproduction without permission。
Knowledge sharing community for developers。
Let more developers benefit from it。
Help developers share knowledge through the Internet。