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

This article mainly introduces the example analysis of the internal instructions of Vue 2.0. it has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

1.Vue.js introduction

At present, there are three mainstream front-end frameworks: Angular, React and Vue. React some time ago, due to the license storm, the heat of Vue rubbed up. In addition, Vue-friendly API documents are a major feature. Vue.js is a very lightweight tool, not so much a MVVM framework as a js library. Vue.js has the characteristics of responsive programming and componentization. Responsive programming, that is, keeping the state and view synchronized, the state can also be said to be data, while the concept of componentization is the same as React, that is, "everything is a component, and the idea of componentization is convenient for modular development, which is a major trend in the front-end field.

two。 Internal instruction

2-1.v-if v-else v-show: the first two are generally used together, and the effect of v-show is similar to that of v-if.

Examples are as follows:

If

Else

Show

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

In the DOM structure, whether the contents of the three p tags are displayed on the page depends on the Boolean attribute of the flag. When flag is true, both if and show will display, and else will not exist in the DOM structure. The difference between v-if and v-show is that v-if determines whether to load according to the value of the condition, which can reduce the pressure on the server, but the disadvantage is that when the value of the condition is changed, the page will be loaded again; v-show will load regardless of whether the value of the condition is true or not (if the condition is true, the display property is set to its default property, otherwise, it is set to none)

2-2.v-for cyclic instruction

Examples are as follows:

{{b}} var vm= new Vue ({el: "# app", data: {b: ['axiaozhongjiaoyuanzhongyuanjiejiejiejie 2]}})

The page will show five li. The effect of interpolation is that li will display the elements corresponding to the array b one to one. V-for is a bit like a for in loop.

2-3 v-text v-html text (html string) instruction

Var vm= new Vue ({el: "# app", data: {msgText: "China", msgHtml: "China"})

You can think of text () and html () of jquery. Up to now, you will find that the previous interpolation operation, that is, {{}}, will affect the performance to some extent.

2-4 v-on bind event listeners

Examples are as follows:

Button var vm= new Vue ({el: "# app", methods: {Hi:function () {alert ("Hello World!")})

Similarly, the analogy on () method of jquery is used to bind events. In the example, v-on:click can be abbreviated to @ click. Click can be replaced with other mouse actions, such as mouseout, mouseover, and so on.

2-5 v-bind instruction

Examples are as follows:

{{message}} var vm = new Vue ({el: "# app", data: {message: "Front end engineer"})

The effect is that the a tag is shown in red and its src attribute is vm.message. The v-bind directive is mainly used to set the attributes of the html tag, and its abbreviated form is:

2-6 v-model data bidirectional binding instruction

Examples are as follows:

{{message}}

Var vm = new Vue ({el: "# app", data: {message: "Front end engineer"}})

When the value entered by input changes, the content of the p tag changes and is consistent with the former.

2-7 v-pre instruction

Examples are as follows:

{{message}}

{{message}}

Var vm = new Vue ({el: "# app", data: {message: "Front end engineer"}})

The first p tag outputs the "front engineer", while the second p tag skips vue compilation and outputs the original value, that is, {{message}}.

2-8 v-cloak instruction

The function of the v-cloak instruction is to execute when the DOM tree has been built to render the page, and it needs to be used with css

2-9 v-once instruction

The v-once command works only when the DOM tree is rendered for the first time.

Thank you for reading this article carefully. I hope the article "sample Analysis of Internal instructions in Vue 2.0" 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.