Serial directory address

  • I. Overview of basic knowledge
    • Chapter 1 – Some Basic Concepts posted at 2018-10-31

preface

Vue, React and Angular are the three drivers of the front-end world. As a traditional backend programmer, the front-end is no longer the cut-out diagram we think of.

Storage address: Chapter01-Rookie Concept

Dry goods collection

1. What is vue.js?

Vue (pronounced vju/curliest, similar to View) is a set of progressive frameworks for building user interfaces that focus only on the view layer. As you can see on the Vue website, the author uses the word “progressive framework” in bold. By the author’s design, Vue contains everything that is necessary for a modern front-end framework, but you don’t have to start with everything, it’s optional.

For the explanation of Vue, recommend a simple book of an article, article address: a sentence to understand the core content of Vue

2. What is the difference between vue.js and traditional front-end development mode?

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

3. How to use vue.js?

3.1. Reference Vue. Js with script tag (you can download the JS file on Vue’s official website and import it with tag, or import it in the form of CDN)

<script  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
Copy the code

3.2. Use vuE-CLI to build a single page application (node.js environment must be installed on the computer before it can be used)

Vue -cli NPM install -g Vue -cli //2. Enter and complete project creation as prompted. Vue init webpack projectname //4 go to the project directory //5 Download the package NPM install //6 run project NPM run devCopy the code

In the latest vuE-CLI 3.x version, the package name has been 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.

NPM uninstall vue-cli -g //2. Install vue-cli NPM install -g@vue /cli //3. Create project vue create projectname // Create vue UI with pageCopy the code

4. MVC and MVVM

4.1 MVC (Model-View-Controller) : IT is a 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 an MVC is the controller, which handles all the requests the browser sends in and decides what to send back to the browser.

Model: A component used to store data

View: A component that displays content based on Model data

Controller: A Controller that receives and processes user instructions and returns content

4.2 MVVM (model-view-viewModel) : The core of MVVM is the ViewModel, which provides two-way data binding between Model and ViewModel. The ViewModel connects the View and Model through the ViewModel to ensure the consistency of the View and data. This process is done automatically by the framework without manual intervention.

Ugaya40
One’s own work
CC BY – SA 3.0
link

conclusion

This article mainly studied some concepts involved in VUE. In the later study, knowledge will be gradually added to this article. At the beginning of the article, the storage address will be provided to summarize the knowledge points involved into a Markdown document, I hope you can pay more attention to it.

Of the pit

Personal Profile: Born in 1996, born in a fourth-tier city in Anhui province, graduated from Top 10 million universities. .NET programmer, gunslinger, cat. It will begin in December 2016. NET programmer career, Microsoft. NET technology stalwart, aspired to be the cloud cat kid programming for Google the best. NET programmer. Personal blog: yuiter.com blog garden blog: www.cnblogs.com/danvic712