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

This article introduces you how to integrate Vue.js, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Vue is a framework that focuses on front-end UI. Its main capabilities are:

Declarative binding. Including data binding, event binding

Component-based programming. Allows developers to divide the entire application into several components and divide and conquer them

This article will explain declarative binding and talk about the introduction of Vue, data binding, event binding, Vue instances, and instructions. In particular, I also use the same case to explain the component technology that Vue is most proud of. The case is a tiny application called counter, which looks like this:

There is a label that shows the number 0, and when you click the button "+", the number will be incremented by 1 each time. The code is as follows. You can save the code directly to the html file and open it in a browser. If it is IE, it must be IE8 or above:

{{count}} + var app = new Vue ({data () {return {count: 0}}, methods: {inc () {this.count++}) app.$mount ('# app')

You can actually operate and see the interaction between buttons and numbers. And then let's see how Vue does it.

First, the Vue.js library must be introduced. We use, like the introduction of any ancient js library or framework, to introduce Vue.js. For convenience, instead of downloading vue.js, we used a copy of vue.js available online. This copy is provided by http://unpkg.com/. The next code is divided into HTML tags and js code placed inside.

Then we take a look at HTML. It just has a div tag with nesting button and span tags, which looks just like a normal HTML. Except for the {{count}}, and @ Click attributes. A symbol shaped like {{key}} is a special symbol that means:

Look for an item value named 'key' from the object returned by the data function in the Vue instance where the tag is located, and use this value to fill in the position occupied by {{key}}.

In this case, data and methods are included in the Vue instance. Thus {{count}} finally locates the returned object, {count: 0}, resulting in a value of 0, which is populated with 0 on the contents of the tag. This is the filling process of {{count}}.

The meaning of @ click is:

Attach the onclick event of button to the specified method in the methods object of the corresponding Vue instance. This is the inc () method.

The Vue instance associates the data and methods in the JavaScript with the corresponding tag blocks in the HTML by calling the $mount method. Of course, instead of using the $mount method, you can use:

New Vue ({

El:'#app'

...

Associate to the div#app with the value # app of the el member. The two are identical. But I prefer $mount because it thinks:

Content of Vue instance itself

Its connection to HTML

It's two different things. It would be better to look at it separately.

The really amazing thing is that this is Vue's responsive programming feature. We see that only the number this.count is changed in the inc () method, and the content on the UI will change? We thought the process would be: "We first modify the this.count, and then use this modified value to update through DOM API." However, data binding such as {{count}} means not only that the value of this.count is displayed, but also that when the this.count is modified, the content will be updated. This is responsive programming, and the specific magic is done within Vue. Developers only need to tell Vue in the form of {{}} that "this piece of my content should display some data in the Vue instance, and when the Vue instance data is updated, the display here should be updated."

Another thing the Vue instance does is host the data object returned by data (). The original method of a data object is:

This.$data.count

Because of the hosting of Vue instances, you can use the

This.count

Access the count that reaches the data object. Such a simple design is really adorable.

Look at @ click, which is actually an abbreviation for v-on:click, that is, it should have been written as:

+

Here we need to introduce a very common concept called "instruction". Directives are special HTML tag attributes with a v-prefix. The responsibility of the directive is to apply certain behaviors to the DOM accordingly when the value of its expression changes.

An instruction can accept a parameter that is indicated by ":" after the instruction.

The instruction can accept a modifier, so "." Specified special suffix

Instruction can accept a property value and is expected to be a single JavaScript expression

Let's review the example in the introduction: v-on is an instruction that accepts an argument of click and an attribute value of inc. The semantics we have mentioned above is to bind the onclick event to the inc method.

The concept of directives is very important, and it is also a way to extend and reuse code. In addition to the v-on we see, there are many instructions that can be used, such as v-for to loop copy the current tag, and so on. Similar to {{count}}, you can actually use the v-text directive instead:

I will continue to mention more instructions in subsequent articles.

In the new version of vue, components are seen as a better way to reuse code and separate concerns. Next, we use the same case to illustrate the components. We can see the HTML code:

{{count}} +

Tags and actually work together to complete a complete function, and they are cohesive; so the basic concept of components, if you can use a custom tag, it would be a better practice to wrap both of them into one component. From this point of view, you should get the following code when you are done:

In fact, it is not difficult to develop, just need to create a component, move the methods and data that are originally in the Vue instance into this component, and move the two tags in HTML to the template of the component. The following code can be saved directly as a html file and run using a browser:

Var counter = {'template':' {{count}} +', data () {return {count: 0}}, methods: {inc () {this.count++} var app = new Vue ({components: {counter: counter}}) app.$mount ('# app')

This time, we saw something new:

The new property template of Vue. Its value is used to load the html template code. In this case, you place two tags that would otherwise be in the main HTML. Note that a div tag is included in addition to them. Because the Vue2.0 version requires that the html as a template must be single-rooted.

The new property components of Vue, which is used to register a local component. It is here that the component counter is registered so that it can be used directly within the html tag to reference the component counter.

Although this case is too small, we don't see much benefit. But the introduction of such components brings together highly relevant html elements and corresponding data and code, which is in line with the principles of software engineering and is therefore a behavior that should be encouraged.

The new component can be separated into another script file, thus achieving not only the logical separation of the code from the main html, but also the physical separation.

In addition, using template to html in the code is still annoying:

You have to be careful to use single quotation marks on the outside and double quotation marks on the inside.

The mixed look of js and html is not good

At this point, the alternatives you can use:

Render function. Virtually all template strings are compiled internally into render functions

Single file component technology

Or JSX supported by vue.

Of course, the latter two methods require the cooperation of translators and packaging tools. Like Babel and webpack.

On how to integrate Vue.js to share here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can 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.