Learn vue.js from scratch, learn notes

first, Why Learn Vue.js

Methods only has pure data logic, rather than handling DOM event Details.
Vue.js combines the virtues of angular.js and react, and rejects their shortcomings.
Official Website: http://cn.vuejs.org/
Brochure: http://cn.vuejs.org/v2/api/

second, What is Vue.js

Vue is an "MVVM frame (library)", similar to angular, and relatively easy to get started with compared to angular compact
Vue is a progressive framework for building user interface points, and unlike other heavyweight frameworks, Vue is designed with bottom-up incremental development
Vue's Core Library is "focused on the view layer" and "very easy to learn", very easy to integrate with other libraries or existing projects, and Vue is fully capable of driving complex single-page applications that are developed using Single-file components and Vue ecosystem-supported libraries
Vue's goal is to implement "data binding for response" and "combined view components" with the simplest possible API

three, the difference of MVC/MVP/MVVM

Complex software must have a clear and reasonable architecture, otherwise it will not be able to develop and maintain
MVC, mvp, and MVVM No are the patterns that appear to solve "interface rendering" and "logical code separation"
Popular Speaking: It is convenient for most people to develop and maintain the code separation pattern that appears
Extracurricular Development: http://www.cnblogs.com/lori/p/3501764.html

Iv. MVC

View: user Interface
Controller: business logic
Model: Data Processing

five, MVP

The MVP is evolved from the classic pattern mvc, where the basic ideas are interlinked: Controller/presenter is responsible for the processing of logic, model provides data, and view is responsible for the Display. As a new model, there is a significant difference between MVP and mvc: in mvp, view does not use model directly, communication between them is through presenter (controller in mvc), all interactions occur within presenter, In mvc, view reads data from the direct model rather than through the Controller.

Vi. MVVM

MVVM is conceptually a pattern that truly separates pages from data logic, and in the way it is developed, it is a model that really separates the foreground code developer (JS+HTML) from the backend code developer (ASP,ASP.NET,PHP,JSP)
Two-way binding: view changes are automatically reflected in viewmodel, and vice versa

Vii. Vue vs. other Frames

1, Vue-angular

1), Vue in the design of the first reference to a lot of angular ideas
2), Vue is more simple than angular
3), vue equivalent angular to become a lot smaller, run faster than angular
4), vue, and angular bindings can all be used with {{}}
5), vue instruction with V-xxx,angular with NG-XXX
6), in the data object in vue, angular data binding on $scope
7), Vue has a modular concept, angular

2, Vue-react
They all have:

1), react and Vue are all virtual dom
2), react, and Vue provide both responsive (reactive) and modular (componsable) view components
3), react and Vue are focused on keeping the core library in place, with the accompanying Routing and Libraries responsible for handling global state management
4), react Use the JSX render page, Vue uses a simple template
5), Vue runs faster than react

Viii. Initial Vuejs

1), Download the production version of Vuejs: http://cn.vuejs.org/v2/guide/installation.html2), Instantiate a Vue objectvarVM =NewVue ({//Options})3), Div#box in the page4), Modify configuration optionsvarVW =NewVue ({el:"#box",//Select Elementdata:{//Defining DataMsg: "this is vue", Name:"vue"}})5), cyclic data: incoming array, object, using v-for to iterate through the data list:[1,2,4]<li v- for= "item in list" >{{item}}</li>list1:[{name:"zhang san", Age:30},{name:"john doe", Age:30},{name:"harry", Age:30}]<li v- for= "item in list1" >{{item.name}}/{{item.age}}</li>6), method Events All methods are configured in the Methods option methods:{//the Placement method, Access data in the database, you can use the This access directly, execution through v-on to access, you can also use shorthand form @click to execute the methodGetName:function() {alert ( this. Name)},run:function() {alert ("this is the run method");}}<div v-on:click= "getName ()" > Execute getName method </div><br/><div @click = "run ()" > Execute Run Method </div >7), Two-way data binding<input type= "text" v-model= "name"/>{{name}}8), using jquery to implement Todolista) to introduce Bootstrapb) binding events add data using the Append Delete event using remove9), using VUE implementation Todolista) to introduce bootstrap.css, edit interface B) instantiate vue.jsdata:{info:""//the value of the input boxlist:[]//Data list, Circular data using v-for, because the need to involve the deletion function, so need to traverse the time to pass the index value into the (item,key) in list},methods:{adddata:function(){//can pass value this. List.push ( this. Info) Console.log ( this. Info)},deletedata:function(key) { this. List.splice (key,1)}}<tr v- for= "(item,key) in list" ><td>{{item}}</td><td><button type= "button" class= "btn btn-danger" @ click= "deleteData (key)" > Delete </button></td></tr>

ninth, pm

1) Text Binding
V-TEXT directive
<span v-text= "name" ></span> equivalent to Ng-bind in Angularjs
Add to Data: test: "<strong> will you parse </strong>",
If you use {{test}}, it will show all the code directly and will not parse
If you use <span v-text= "test" ></span> It will show all the code directly and will not parse
We can use v-html to parse the code
<span v-html= "test" ></span>
2) Binding Properties
Add an ID in Data: "this is an id"
<div v-bind:id= "id" > Add Property </div>
You need to be careful not to add {{}} with attributes like ng-src in angular
Shorthand form
<div:id= "id" > Add Property </div>

Url: "https://www.baidu.com/img/bd_logo1.png"

3) Event
Review the morning study of ToDoList
Event object, Note that the $event is passed into the method
<button data-id= "1638" data-user= "wxx" @click = "requestData ($event)" > Event Object </button>
Requestdata:function (event) {
Console.log (event)
}
Data in a dataset in Srcelement
4) expression

data:{number:200}{{number+200}}data:{ok:true}{{ok:"yes": "no"}}data:{msg: "reverse output of the field"}{{msg.split (""). reverse (). join ("")}}

5), calculated Attribute--input Hint---autocomplete (form properties)

computed:{c:function() {returnthis. A + 6;},reversemsg:  function() {returnthis. message.split (""). reverse (). join ("");}}
c={{c}}
<br/>
msg={{reversemsg}}

Note that when the message changes, it recalculates and changes the view, writing a button to execute the change message for "changed message"

Case
Data in
Search: "",
searchlist:["appale", "pear", "banner", "orange"],
cumputed

<input type= "text" v-model= "search"/>
<p v-for= "item in searchlist" >{{item}}</p>

Adding calculated properties

Listsearch:function() {var arr = []; var  this ; this. Searchlist.foreach (function(val) {if(val.indexof (that.search)!=-1 ) {arr.push (val);}}) return arr;}

Change the loop condition to
<p v-for= "item in listsearch" >{{item}}</p>

6) Monitor Data Change watch
Vm. $watch (vm) vm.msg get the data bound on the Vue
/* Note that when the Monitor text box changes, The data is directly bound to the value */

<input type= "text" v-model= ' msg ' >data:{msg:' I am a data '}vm. $watch (' msg ',function (newvalue,oldvalue) {console.log (newvalue+ '-------' +OldValue);})

The second type of notation

data:{msg:' I am a data '},watch:{msg:function(newvalue,oldvalue) {console.log (newvalue + '-------' +oldValue);}}

7) comparison of computed properties and methods
Case: flipping a string----multiple calls
A computed property is only re-evaluated if its dependent dependencies Change. This means that as long as the message does not change, multiple accesses to the Reversedmessage computed property will immediately return the previous calculation without having to execute the function again.
Summary: calculated attributes are more efficient than methods
8) calculated attributes and watch comparison
Vue.js provides a method $watch that is used to observe data changes on the Vue instance. $watch is tempting when some data needs to change according to other data-especially if you're from AngularJS. however, It is usually better to use a computed property instead of a Command-$watch callback. Consider the following example:

<input type= "text" v-model= "firstName" ><input type= "text" v-model= "lastName" >{{fullname}}watch: { FirstName:function(val) {this. fullname=val+.lastName;}, LastName:function(val) {this. fullname=. firstname+val;}}

9) COMPUTE Attribute Implementation

computed: {fullName:function () {return  this. FirstName + "+ this. lastName}}10) class Syntax. static{width:200px;height:200px;}. Class-a{width:200px;height:200px;background:orange;}. Class-b{background:blue;}<div class= "static": class= "{' class-a ': isA, ' class-b ': isB}" >v-bind-class111</div><br><div:class= "classobject" >classObject</div>//can be passed to v-bind:class an object to dynamically switch class. Note that the V-bind:class directive can coexist with normal class Attributes. varVM =NewVue ({el:' #demo ',//Div. classData: {isA:true, IsB:false, Classobject: {active:true,' Class-a ':true}}})11) style Syntax//V-bind:style's object syntax is very intuitive-looking very much like CSS, it's actually a JavaScript object. CSS property names can be named with Hump (camelcase) or Short-cross (kebab-case)<div v-bind:style= "{color:activecolor, fontsize:fontsize + ' px '}" >style object Syntax </div>Data: {activecolor:' Red ', FontSize:30}

) style array

<div v-bind:style= "[styleobjecta, styleobjectb]" >style array Syntax </div>' red '30px '}} v-If---dom Operation v.-Elsev-show-- Show hidden 
If= "ok" > This is a h1if= "math.random () >0.5" > Greater than 0. 5</div><div v-Else> less than 0. 5</div>data: {ok:true}

14, the use of the cycle
Multilayer Loops
You can use in also to use the
15. Filter

Vue.filter (' reversemsg ',function(value) {returnValue.split ("). Reverse (). join (');}); Vue.filter (' Todou ',function(value,n1,n2) {console.log (value+ '---' +n1+ '--' +n2);if(n1>N2) {return123;}Else{return456;}}) Data:{msg:' I'm A code-moving brick worker ', Num:' 123 '}{{msg}}{{msg|reversemsg}} {{num}} {{num| Todou (12,14)}}16), Ajax Request axios:http://blog.csdn.net/liaoxiaojuan233/article/details/54176798Fetch:https://segmentfault.com/a/1190000003810652//1. Fetching data using FETCH or Axios<script src= "https://unpkg.com/axios/dist/axios.min.js" ></script>axios.get (url). Then (function(response) {console.log (response.data.result); _that.list=response.data.result;}).Catch(function(error) {console.log (error);});//2. Https://github.com/pagekit/vue-resource<script src= "https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js" ></script>//The second parameter can not be set if the returned data is callback this. $HTTP. Jsonp (api,{jsonp:' CB '//if the interface is not callback, for cb, modify this parameter, for example https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php}). then (function(data) {console.log (data.body); that.list=data.body.s;},function(){})

Learn vue.js from scratch, learn notes