What is the technical principle of Vue to develop applets

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!

First, get to know Vue first

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?

1. What exactly is Vue.js?

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 .

2. What is a single-page application

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.

3. What is the view layer?

Now we abstract a web application, then the DOM in HTML is actually a view, and a web page is created through the DOM The combination and nesting form the most basic view structure, and then through CSS modification, makeup on the basic view structure makes them look more beautiful. Finally, when it comes to the interaction part, you need to use JavaScript to accept the user's interaction request, and respond to the user's interaction operation through the event mechanism, and inVarious data modifications are performed in the event processing function, such as modifying the innerHTML or innerText part in a certain DOM. We divide the DOM in HTML into a level independently from other parts, and this level is called the view layer.

4. Responsive data binding

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.

5. Component-based development

For a single-page application, the page interaction and structure are very complicated, and there are many modules that need to be written on one page , and often the amount of code and workload of a module is very large, if it is still developed according to the original method, it will be exhausting. Moreover, it is very troublesome to modify in case of future product demand changes. I am afraid that after one of the divs is moved, other divs will follow an avalanche, and the entire page will be messed up, or some inner DOM events will be modified due to the event bubbling mechanism of JavaScript. After processing the function, various inexplicable and weird bugs appeared.

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.

Second, the relationship between Vue and applets

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

• p>

Third, how to make small programs more valuable

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.