The first impression of Vue.js

I. BACKGROUND

MVVM mode, a lot of people are talking about using, OK, I'm behind, my current project wood is useful to the MVVM mode frame, Vuejs,reactjs,angularjs,nonono, to go over Ng, Project wood useful to. I really dare not call myself a front-end developer. Take advantage of this unemployment period, Vuejs study up yo.

Second, Introduction

1. What is Vue.js?

Vue.js is a very hot JavaScript MVVM library, which is built on the idea of data-driven and component-based. The Angular.js,vue.js provides a cleaner, easier-to-understand API that allows us to get started quickly and use Vue.js.

Chinese document Address: https://cn.vuejs.org

2. What is the hot-flying MVVM?

MVVM (Model-view-viewmodel), based on the commonly used MVC (Model-view-controller) pattern, adds a layer of ViewModel, the core, which is capable of data-driven, and is often said to be a precondition for two-way binding: Not only are the changes to the view reflected in the Model,model changes can also be reflectedin the view, the premise that the two implementation is ViewModel the two links together. Notice that the changes in the view and model affect each other, that is, two-way binding.

Give me a chestnut:

The code is as follows

<!--This is the view -<DivID= "App">{{message}}</Div><Scripttype= "Text/javascript"src=".. /assets/js/vue.js "></Script><Scripttype= "Text/javascript">    //this is model .    varModel={message:'Hello vue.js'    }; //This is the view instance, which links between the view and the model    NewVue ({el:'#app',    //The instance is mounted on the label of the #appData:model//data from Model object    })</Script>

The relationship between the view model is shown in a subtle graphic, and the image is from the web.

Third, begin to familiar with Vue.js grammar

Female driver to drive, find a place to hide well, I can at any time the throttle when the brake silver, hehe, write a few small demo.

1. Vuejs allows the use of a template-based system that renders data into the DOM.

<div class= "App" >

{{message}} Output:hello vue.js

</div>

Js:

var app = new Vue ({

El: ' #app ',

Data: {

Message: ' Hello vue.js '

}

});

When you open the browser, the Vue has already bound the data to the DOM, and the console modifies app.message = ' Hello ' to see the data changes in the Div.

The network looking for the graph, according to the above code should be app.message = ' hello ', test will understand.

How to use:

Generate a Vue instance, hang it under a tag, and you can use Vuejs. nice~

2. Conditions and circulation

Very interesting, these instructions are v-start, like angular, with ng-beginning. A characteristic bar.

v-if=

V-for=

3. V-on: Monitoring Events

Raise a chestnut and flip Hello vue.js!

<DivID= "App-5">    <P>{{Message}}</P>    <ButtonV-on:click=reversemessage>Reversemessage</Button></Div><Scripttype= "Text/javascript"src=".. /assets/js/vue.js "></Script><Scripttype= "Text/javascript">    varAPP5= NewVue ({el:'#app-5', data: {message:'Hello vue.js'}, methods: {reversemessage:function() {                 This. Message=  This. Message.split ("'). Reverse (). Join ("'); }        }    });</Script>

4, V-model Two-way binding chestnut:

<DivID= "App-6">    <P>{{Message}}</P>    <inputV-model= "message"/></Div><Scripttype= "Text/javascript"src=".. /assets/js/vue.js "></Script><Scripttype= "Text/javascript">    varAPP6= NewVue ({el:'#app-6', data: {message:"'        }    });</Script>

Notice, V-model, this command is only used <input> , <select><textarea>这些表单元素上，所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据。

First impression to end here, continue to study tomorrow, understand the wrong place please treatise, thank you!

The first impression of Vue.js