Vue.js First Knowledge

Vuejs

Vue.js is a set of progressive frameworks for building user interfaces. Unlike other heavyweight frameworks,vue uses a design that is developed from bottom-up increments.

The Vue Core Library focuses only on the view layer and is easily integrated with other libraries or existing projects.

Vue is fully capable of driving Library development and complex single-page applications with single-file components and Vue ecosystem support.

The goal of Vue.js is to implement the data binding and the combined view component of the response through the simplest possible API.

Introduction of Vue.js

<script src= "Https://unpkg.com/vue/dist/vue.js" ></script>

Declarative rendering:

<div id= "App" >

{{Message}}

</div>

var app = new Vue ({

El: ' #app ',

Data: {

Message: ' Hello vue! '

}

})

binding Dom element Properties:

<div id= "App-2" >

<span v-bind:title= "message" >//the directive simply means: will this element node's title property and the vue instance's The message property is bound together

Hover your mouse over me for a few seconds to see my dynamically bound title!

</span>

</div>

Open the console input app2.message to display The value of message in data

console input app2.message= ' one and three ' to change the original value of meassage to the current one Three

var app2 = new Vue ({

El: ' #app-2 ',

Data: {

Message: ' You loaded the page on ' + New Date ()

}

})

The V-bind property is an instruction. The directive has a prefix V, which represents a Special Property provided by the Vue.js. They Apply special reactive behavior to the rendered DOM.

Conditions and loops:

controls the display of an element: evaluates to true by V-if or false true to display false Console can modify app3.seen=true/false

Demo

<div id= "App-3" >

<p v-if= "Seen" >now you see me</p>

</div>

var app3 = new Vue ({

El: ' #app-3 ',

Data: {

Seen:true

}

})

This example demonstrates that we can not only bind Dom text to data, or you can bind the Dom structure to the data. Also,vue.js provides a powerful transition effect system that automatically applies transitions when you insert / Delete elements in vue .

the V-FOR directive can bind data to an array to render a list:

<div id= "App-4" >

<ol>

<li v-for= "Todo in Todos" >

{{Todo.text}}

</li>

</ol>

</div>

var app4 = new Vue ({

El: ' #app-4 ',

Data: {

Todos: [

{text: ' Learn JavaScript '},

{text: ' Learn Vue '},

{text: ' Build something Awesome '}

]

}

})

in the console, enter app4.todos.push ({text: ' New item '}). You'll find a new column of content in the list.

Handling User output:

Easy to interact with users and applications,

use the v-on directive to bind a listener event to invoke the method defined in our Vue instance demo:v-on:click= ' method name '

Demo

<div id= "App-5" >

<p>{{message}}</p>

<button v-on:click= "Reversemessage" >reverse message</button>

</div>

var app5 = new Vue ({

El: ' #app-5 ',

Data: {

Message: ' Hello vue.js! '

},

Methods: {

Reversemessage:function () {

This.message = This.message.split ("). Reverse (). Join (')

Message content split reverse order and converted to string

}

SSSSS}

})

in the Revresemessage method, we update the state of the application without contact with Don , and all the Dom is Vue to handle, write the code only need to focus on the basic logic

V-model directive: Two-way data binding in form input and application states becomes very lightweight.

Demo

<div id= ' app-6 ' >

<p>{{message}}</p>

<input type= ' text ' v-model= ' message ' >

</div>

var app6 = new Vue ({

El: "#app-6",

data:{

Message: "Hello vue!"

}

})

Building with Components (application):

The component system is Another important concept for vue.js because it provides an abstraction that allows us to build large applications with independent reusable widgets. If we consider this, the interface of almost any type of application can be abstracted as a component tree:

at Vue , a component is essentially a vue instance that has predefined options:

The data is passed from the parent scope to the child scope, and the prop field is accepted .

The Todo is uploaded to each repeating component through the v-bind instruction .

The above example divides the application into two smaller units, and the sub-element props interface provides a good decoupling from the parent element.

we can now further refine more complex templates and logic for our TODO components, without affecting the parent application.

In a large-scale application, in order to make the development process controllable, it is necessary to divide the whole application into one component. (the component is described later), here is an example of what the application template using the component looks like:

can notice The Vue.js component is very similar to a custom element ---- It is Part of the WEB component specification. In fact , vue.js 's component syntax refers to this specification.

Vue.js First Knowledge