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

This article mainly introduces the differences between vuejs and bulma, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

Difference: vuejs is a progressive JavaScript framework for building a user interface, and its goal is to achieve responsive data binding and composable view components through the simplest possible API, while Bulma is a modern Flexbox-based CSS framework for a variety of simple or replicated responsive content layouts.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

What is vuejs?

Vue.js (pronunciation / vju:/, sounds like view) is a progressive framework for building a user interface. Unlike other heavyweight frameworks, Vue uses a bottom-up incremental development design.

Vue's core library only focuses on the view layer and is very easy to learn and integrate with other libraries or existing projects. Vue is fully capable of driving complex single-page applications developed using single-file components and libraries supported by the Vue ecosystem.

Vue.js also provides MVVM data binding and a composable component system with a simple and flexible API that aims to achieve responsive data binding and composable view components through the simplest possible API.

We can also say that Vue.js is a responsive system (Reactivity System). The data model layer (Model) is just a normal JavaScript object, as shown in the following figure. {} represents a JavaScript object. Modify it to update the corresponding HTML fragments (DOM), also known as "view". This makes state management very simple and intuitive, and enables two-way binding of data, so we also call it a responsive system.

The main features of Vue.js

Vue.js is an excellent front-end interface development JavaScript library, it is very popular, because there are many outstanding features, of which the main features are as follows.

1) lightweight framework

Vue.js can automatically track dependent template expressions and evaluation attributes, provide MVVM data binding and a composable component system, with a simple and flexible API, making it easier for readers to understand and get started faster.

2) Bidirectional data binding

Declarative rendering is not only the main embodiment of two-way data binding, but also the core of Vue.js, which allows data declarative rendering to be integrated into DOM using concise template syntax.

3) instruction

Vue.js interacts with the page mainly through built-in instructions, which apply certain behaviors to the DOM accordingly when the value of its expression changes.

4) componentization

Component (Component) is one of the most powerful features of Vue.js. Components can extend HTML elements to encapsulate reusable code.

In Vue, parent-child components communicate through props, one-way from parent to child. The child component communicates with the parent component and notifies the parent component to change the data by triggering an event. This forms a basic mode of father-son communication.

When the components in the development have a very close relationship with HTML, JavaScript and so on, the components can be customized according to the actual needs, which makes the development more convenient and greatly reduces the amount of code writing.

The component also supports hot overloading (hotreload). When we make changes, the page will not be refreshed, but the component itself will be reloaded immediately without affecting the current state of the entire application. CSS also supports hot overloading.

5) client routing

Vue-router is the official routing plug-in of Vue.js, which is deeply integrated with Vue.js and is used to build single-page applications. Vue single page application is based on routing and components. Routing is used to set the access path and map the path to components. Traditional pages switch and jump through hyperlinks.

6) State management

State management is actually an one-way data flow. State drives the rendering of View, while users operate on View to generate Action, which changes State, thus making View re-render to form a separate component.

What is bulma?

Bulma is a modern CSS framework based on Flexbox, the original intention of the design is mobility first (Mobile First), modular design, can be easily used to achieve a variety of simple or copied responsive content layout, browser support: browser support: Chrome, Edge, Firefox, Internet Explorer (10 +), Opera and Safari.

Bulma has the following features:

Lightweight modern CSS framework, using Flexbox

Support responsive layout, grid, etc.

Pure CSS, no Javascript code

Customizable, modular

Advantages:

Provide responsive designs for computers, tablets, and mobile phones

Pure CSS framework, easy to integrate with JavaScript framework, such as VueJS, ReactJS, etc.

The code is elegant and concise

Running effect

Example of a column. As long as you add columns, they automatically resize themselves.

Magic tiles (Magic tiles)

Individual elements of the Metro UI CSS grid

Thank you for reading this article carefully. I hope the article "what's the difference between vuejs and bulma" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

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.