A small example of Vue +bootstrap writing

Recently, Vue is very hot, not very busy recently, I learned the next.

Vue and angular are very much like MVVM. The truth is all figured out, that's the difference in grammar.

I think Vue and angular differ:

1.vue lighter and more convenient for mobile development

2.vue more simple.

The difference between the angular and Vue directives is roughly ng-xxx and v-xxx.

Vue uses the new Vue to create an instance, and then binds the data to the attribute, and adds the method to the attribute methods.

The loop traversal of Vue is v-for= "", the event is v-on:clicl = "";

directly on the code.

<!    DOCTYPE html>tr{Vertical-Align:inherit; }    </style> <script src= "jquery.js" ></script> <script src= "Bootstrap.js" ></script> &lt Script src= "Node_modules/vue/dist/vue.js" ></script> <script>window.onload=function(){            varVM =NewVue ({el:'. Container ', data:{mydata:[], username:‘‘, Age:‘‘}, methods:{add:function(){                         This. Mydata.push ({name: This. Username, Age: This. Age});  This. Username= "";  This. age= ""; }, Reset:function(){                         This. Username= "";  This. age= ""; }, Del:function(index) { This. Mydata.splice (index,1)}, Delall:function(){                         This. mydata=[]; }                }            })        }    </script> for= "username" > Username:</label> <input placeholder= "Enter user name" type= "text"v-model= "username"ID= "username" class= "Form-control" > </div> <div class= "Form-group" > < Label for= "Age" > Age:</label> <input placeholder= "input Ages" type= "text"v-model= "Age"ID= "Age" class= "Form-control" > </div> <div class= "Form-group" > <input Type= "button" class= "btn Btn-info" v-on:click= "Add ()" value= "Add" > <input type= "button" class= "Btn BT N-info "v-on:click=" Reset () "value=" Reset > </div> </form>  for= "(Item,index) in MyData" > <td class= "text-center" >{{index+1}}</td> &LT;TD cl                ass= "Text-center" >{{item.name}}</td> <td class= "Text-center" >{{item.age}}</td> &LT;TD class= "Text-center" > <button class= "btn Btn-danger btn-sm"v-on:click= "del (Index)"Data-toggle= "Dialog" data-target= "#layer" > Delete </button> </td> </                    tr> <tr v-show= "mydata.length!=0" > <td colspan= "4" class= "Text-right" >            <button v-on:click= "Delall ()" class= "btn btn-danger btn-sm" > Delete all </button> </td> </tr> <tr v-show= "mydata.length==0" > <td colspan= "4" class= "Text-cente    R "> <p> no data </p> </td> </tr> </table> </div></body>
The execution effect is as follows
A small example of Vue +bootstrap writing