No.2 step-by-Step Learning Vuejs Example Demo

Simple Application
The core of Vue.js is a system that allows the use of concise template syntax to declaratively render data into the DOM:

<id= "app">  {{message}}</Div > var app = new Vue ({  el: ' #app ',  data: {    message: ' Hello vue! '  }})

Examples with Directives change in the console input app.message="11" data

<DivID= "Demo2"><spanV-bind:title= "message">hover for a few seconds and you'll see the message</span></Div><Script>varDemo2= NewVue ({el:"#demo2", Data:{message:"page loaded in"+NewDate (). toLocaleString ()})</Script>

Here we meet something new. The attributes you see v-bind are called directives. Directives are prefixed v- to indicate that they are special properties provided by Vue. As you might have guessed, they apply special responsive behavior to the rendered DOM. In short, the purpose of this directive is to "keep the attributes of this element node consistent with the title properties of the Vue instance message ."

Once again, open the browser's JavaScript console input app2.message = ‘新消息‘ and you'll see that the HTML that's bound to the title property has been updated.

Conditions and loops

<id= "app-3">  <v-if  = "Seen"> Now you see me. </p></Div > var app3 = new Vue ({  el: ' #app-3 ',  data: {    seen:true  }})

Binding an array to render the project

You can use the V-FOR directive to bind the data of an array to render a list of items:

In the console, enter demo4.todos.push({text:‘new demasd‘}) , and you will find a new item added to the list.

Handling input from users

<DivID= "Demo5"><P>{{Message}}</P><ButtonV-on:click= "Reversemessage">Reversal message</Button></Div><Script>varDemo5= NewVue ({el:"#demo5", data: {message:"Hello vue.js"},methods: {reversemessage:function(){ This. Message= This. Message.split ("'). Reverse (). Join ("')}}})</Script>

# #和表单的双向绑定注意在 Reversemessage method, we update the state of the app, but without touching dom--all DOM operations are handled by Vue, and the code you write doesn't need to focus on the underlying logic.

Vue also provides the V-model directive, which makes it easy to implement two-way binding between form input and application state.

<id= "app-6">  <p>{message} }</p>  <v-model= "message"  ></div>var app6 = new Vue ({  el: ' #app-6 ',  data: {    message: ' Hello vue! '  }}

Component Building Applications

• Component Injection Testing
• In Vue, a component is essentially a Vue instance with pre-defined options, and registering the component in Vue is simple
  To define a new component named Todo-item

• Definition of a component

• Vue.component (' Todo-item ', {  //  Todo-item components now accept a  //  "prop", Similar to a custom attribute  //  This property is named Todo.   props: [' Todo '],  ' <li>{{todo.text}}</li> '})

Vue instance

All Vue components are Vue instances and accept the same option object (except for some root instance specific options).

Template syntax

Vue.js uses HTML-based template syntax, which allows developers to declaratively bind the DOM to data from the underlying Vue instance. All Vue.js templates are legitimate HTML, so they can be parsed by a browser and HTML parser that follows the specification.
At the bottom of the implementation, Vue compiles the template into a virtual DOM rendering function. In conjunction with the response system, Vue intelligently calculates the minimum cost of re-rendering the component and applies it to DOM operations when the application state changes.
If you are familiar with virtual DOM and prefer the original power of JavaScript, you can also use the optional JSX syntax without a template to write the render function directly.

Interpolated values

• Text
  The most common form of data binding is the text interpolation using the "mustache" syntax (double braces):
  <span>Message: </span>
• v-onceTag value can no longer be changed

Instructions

The function of an instruction is to respond to the effect of a change in the value of an expression in the DOM
All labels with a V-start are

Abbreviation

The V-prefix is used as a visual cue to identify the specific features of Vue in a template. The V-prefix is helpful when you use Vue.js to add dynamic behavior to an existing tag, however, for some frequently used instructions, it is cumbersome to use. Also, the V-prefix becomes less important when building a single-page application (Spa-single page application) that manages all the templates by Vue.js. Therefore, Vue.js provides a specific shorthand for the two most commonly used directives, v-bind and v-on:

V-bind abbreviation <a v-bind:href= "url" >...</a><a:href= "url" >...</a>v-onabbreviation <a v-on:click= "DoSomething" >...</a><a @click = "DoSomething" >...</a>

No.2 step-by-Step Learning Vuejs Example Demo