Vue.js download method and basic concept

Vue.js Introduction Description and download

Vue.js use the document has been written very complete and detailed, through the following address can be viewed: https://cn.vuejs.org/v2/guide/

Vue.js If you use it as a library, you can download it from the following address: https://cn.vuejs.org/v2/guide/installation.html

Vue.js Basic Concepts

After we download the vue.js, we need to introduce vue.js through the script tag on the page, development can use the development version vue.js, the product will be replaced by Vue.min.js.

Script type= "Text/javascript" src= "Js/vue.min.js" ></script

Vue Code instance (create)

<! DOCTYPE html>

Data and methods

When a Vue instance is created, it adds all the attributes found in its data object to Vue's responsive system. When the values of these properties change, the view will produce a "response", that is, the match is updated to the new value. You can also define the method in the Vue instance to change the data in the data object in the instance by means of the method, and the data in the view changes.

Vue Instance Code (method)

Window.onload = function () {

var vm = new Vue({    el:‘#app‘,    data:{message:‘hello world!‘},    methods:{        fnChangeMsg:function(){            this.message = ‘hello Vue.js!‘;        }    }});

} 

Div id= "App"

<p>{{ message }}</p><button @click="fnChangeMsg">改变数据和视图</button>

/div

Vus.js template Syntax

Template syntax refers to how data is placed in HTML

The most common form of data binding is the use of text interpolation with the "mustache" syntax (double braces), for example:

{{msg}}

You can also write an expression in the inserted value:

{{number + 1}}

{OK?} ' YES ': ' NO '}}

{{Message.split ('). Reverse (). Join (')}}

<a v-bind:href= "url" > link text

Instructions

Directive (directives) is a special attribute with a "V" prefix. The value of the Directive property is expected to be a single JavaScript expression, and the responsibility of the instruction is to use the associated effect of the expression when the value of the expressions changes, in response to the DOM. Common directives are v-bind, V-if, v-on.

<--inserts/removes p elements according to the boolean value of OK--

<p v-if= "OK" > whether to show this paragraph

<--The Click event of the Monitor button to execute the Fnchangemsg method--

<button v-on:click= "fnchangemsg" > button

My little boby, have not understood, welcome the comment below!!!

Vue.js download method and basic concept