Shulou(Shulou.com)05/31 Report--

This article mainly introduces "what are the basic concepts of Vue". In daily operation, I believe many people have doubts about the basic concepts of Vue. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful for you to answer the doubts about "what are the basic concepts of Vue?" Next, please follow the editor to study!

1. What is Vue.js?

Vue (pronunciation / vju sounds /, similar to view) is a progressive framework for building a user interface, focusing only on the view layer. On Vue's website, we can see that the word progressive framework is bolded by the author. According to the author's design, Vue contains what is necessary for a modern front-end framework, but you don't need to use everything in the first place. These are optional.

For the interpretation of Vue, recommend an article in the brief book, article address: one sentence to understand the core content of Vue

2. What is the difference between using Vue.js and the traditional front-end development model?

In traditional front-end development, in order to accomplish a task, we need to use JS/Jquery to get the DOM element of the element, and then manipulate the acquired DOM element. When we use Vue for front-end development, all the operations of DOM are handled by Vue, so we only need to focus on the implementation of the business code.

3. How to use Vue.js?

3.1. use script tags to reference Vue.js (here, you can use tags to introduce js files after downloading the js file on Vue's official website, or in the form of cdn)

one

Use Vue-cli to build a single-page application (you need to install the node.js environment on your computer before you can use it)

one

two

three

four

five

six

seven

eight

nine

ten

/ / 1. Install Vue-Cli globally

Npm install-g vue-cli

/ / 2. Go to the create project directory

/ / 3. Create a Vue single-page application using webpack templates, and complete the project creation according to the prompts after Enter.

Vue init webpack projectname

/ / 4. Enter the project directory

/ / 5. Download the package referenced by the project

Npm install

/ / 6. Run the project

Npm run dev

PS: version 2.x of vue-cli is used here. In the latest version of vue-cli 3.x, the package name has changed. You need to uninstall the original package and reinstall vue-cli. At the same time, you can also configure the project in the form of a page.

one

two

three

four

five

six

seven

eight

/ / 1. Uninstall the original vue-cli version

Npm uninstall vue-cli-g

/ / 2. Install the new version of vue-cli

Npm install-g @ vue/cli

/ / 3. Create a project

Vue create projectname

/ / 3. Use the page to create

Vue ui

4. MVC and MVVM

MVC (Model-View-Controller): is a mode of expression (UI / Presentation Pattern), which divides the design of the UI part of the software into three main units, namely Model, View and Controller.

The core of the MVC is the controller, which handles all requests sent by the browser and decides what to respond to the browser.

Model: a model, a component for storing data

View: views, components for content presentation based on Model data

Controller: controller that accepts and processes user instructions and returns content

MVVM (Model-View-ViewModel): the core of MVVM is ViewModel, which provides two-way data binding for Model and ViewModel, connecting View and Model through ViewModel to ensure the consistency of views with data, and this process is done automatically by the framework without manual intervention.

At this point, the study of "what are the basic concepts of Vue" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.