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

This article will explain in detail what is the basic learning knowledge of Vue. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

First, the basic introduction of Vue. What is Vue.js?

Vue.js is currently the most popular front-end framework, and React is the most popular front-end framework (React can also develop mobile phone App in addition to developing websites. Vue syntax can also be used for mobile phone App development, with the help of Weex).

Vue.js is one of the front-end mainstream frameworks, together with Angular.js, React.js, and become the front-end three mainstream frameworks!

Vue.js is a framework for building a user interface, focusing only on the view layer. It is not only easy to use, but also easy to integrate with third-party libraries or existing projects. (Vue has supporting third-party class libraries, which can be integrated to develop large-scale projects.)

The main work of the front end? Mainly responsible for the V layer in MVC; the main job is to deal with the interface to create the front-end page effect

two。 Why learn popular frameworks?

Enterprises in order to improve development efficiency: in enterprises, time is efficiency, efficiency is money

In enterprises, the use of frameworks can improve the efficiency of development.

The development process of improving development efficiency: native JS-> class libraries such as Jquery-> front-end template engine-> Angular.js / Vue.js (which can help us reduce unnecessary DOM operations; improve rendering efficiency; the concept of bi-directional data binding [through the instructions provided by the framework, we front-end programmers only need to care about the business logic of the data, not how DOM is rendered])

In Vue, a core concept is to let users stop manipulating DOM elements, liberating users' hands and giving programmers more time to focus on business logic.

The difference between MVC in 3.Node and MVVM in front end

MVC is a back-end hierarchical development concept

MVVM is the concept of front-end view layer, which mainly focuses on the separation of view layer, that is to say, MVVM divides the front-end view layer into three parts: Model, View, and VM ViewModel.

Why do you need MVVM when you have MVC?

MVVM is the hierarchical development idea of the front-end view layer, which mainly divides each page into MMagazine V and VM, in which VM is the core of MVVM: because VM connects M and V.

The idea of using MVVM in the front-end page is mainly for us to develop MVVM to provide two-way binding of data, which is provided by VM

II. Basic use of Vue

The    code tool is Visual Studio Code, which can be downloaded and installed by partners.

1. The first case

The    code is as follows:

Document

{{msg}}

/ / 2. Create an instance of Vue / / when we import the package, there is an extra Vue constructor in the browser's memory / / Note: the vm object we new out is the VM scheduler var vm = new Vue in our MVVM ({el:'# app', / / indicates that the current Vue instance of our new To control which area of the page / / the data here is the M in MVVM, the data: {/ / data attribute specially used to save the data of each page stores the data to be used in el msg: 'welcome to learn the instructions provided by Vue' / / through the instructions provided by Vue, it is very convenient to render the data to the page Programmers no longer manipulate DOM elements manually [frameworks such as Vue at the front end, we are not encouraged to manually manipulate DOM elements]}})

Pay attention to the comments in the code!

Visit the page

two。 Common instructions describe {{}} interpolation expression v-cloak to solve the problem of flickering of interpolation expression v-text and interpolation also use variables in vue, but there is no flicker problem by default, but the original content is overwritten. Interpolation will not v-html the content of HTML. The attribute binding mechanism provided by v-bindVue, abbreviated as': 'event binding mechanism provided by v-onVue. The abbreviation is:'@ '2.1 interpolation expression

   in the HTML page, we need to get the data in Vue, which can be obtained by interpolation expression, as follows

{{msg}}

Var vm = new Vue ({el:'# app', data: {msg: 'welcome to learn Vue'}})

Note: the interpolation expression has the problem of flickering.

We start as a site, Ctrl+shift+p: search for the following in the input

Access address: http://localhost/xxx.html

It will get better when the load is finished! This is the problem of interpolation flicker.

2.2 v-cloak

The    v-cloak instruction can solve the problem of interpolation flicker above, as follows: in fact, when the interpolation is not loaded, the content is hidden through the style attribute.

Document [v-cloak] {display: none;} + {{msg}}-

Var vm = new Vue ({el:'# app', data: {msg: 'hello',}}) 2.3 v-text

   is similar to interpolation, and you can also get information from vue objects. V-text does not flicker by default, but it will overwrite the original content, but the interpolation expression will only replace its own placeholder and will not empty the contents of the whole element, as shown below.

Document

-{{msg}} =

*******

Var vm = new Vue ({el: "# app", data: {msg: "hello vue"}})

2.4 v-html

   defaults that the information we get from the Vue object will only be displayed as a normal string if it contains a HTML tag. If we want to display the semantics of the tag, we need to use the v-html directive as follows

Document

-{{msg}} =

*******

Var vm = new Vue ({el: "# app", data: {msg: "hello vue"}})

2.5 v-bind

   v-bind is an instruction for binding attributes in Vue, which can be abbreviated as ":". The content in the attribute is actually a js expression, which can be handled similarly, as shown in the code.

Document

Var vm = new Vue ({el: "# app", data: {title: "title123"}})

2.6 v-on

V-on: event binding mechanism is provided in    Vue, which is used as follows:

Document

Var vm = new Vue ({el: "# app", data: {msg: "hello vue"}, methods: {show:function () {alert ('hello')})

This is the end of this article on "what are the basic knowledge of Vue?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

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.