-------------------------------------------------
VUE 2.0 (MVVM mode)
MVC C is the controller
jquery is born to drive the DOM
M model the data available in the current view of the model
V view view renders UI HTML
VM view model
-------------------------------------------------
1. Quote
2. Create an app
expression
{{}}
Attribute methods are placed in data
The method is placed in: methods
------------------------------------------
directive/extended tag
all V-
------------------------------------------
two-way data binding
v-model //value for form form (two-way binding)
v-for //Data object traversal loop
------------------------------------------
event
<button v-on:click="action">Click me</button>
<!--click event-->
<button v-on:mouseover="action2">move in</button>
<!--mouseover event-->
<button v-on:mouseout="action3">move out</button>
<!--mouse-in event-->
shorthand
v-on:click="action"
@:click="action"
v-show/v-if //Show and hide multi-use v-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
window.onload = function(){
var app = new Vue ({
el:"#d11",
data:{
msg:"1241058165",
name:"shaozhu",
age:22,
flag:false,
arr:["00","11","22","33","44"],
obj:{id:10,name:"shaozhu","age":22},
obj2:[{id:11,name:"shaozhu1"},{id:12,name:"shaozhu2"},{id:13,name:"shaozhu3"}]
},
methods:{
action:function(){
console.log("1");
this.msg = "5201314";
},
action2:function(){
this.msg = "666";
console.log("2");
},
action3:function(){
this.msg = "333";
console.log("3");
},
action4:function(){
this.msg = "66666666666";
console.log("4");
},
action5:function(){
this.flag = true;
}
}
})
}
</script>
</head>
<body>
<div id="d11">
<p>{{msg}}</p>
<input type="text" v-model="msg">
<!--Two-way binding-->
<ul>
<li v-for="item in arr">{{item}}</li>
<!--for traverse the array -->
</ul>
<ul>
<li v-for="(v,i) in arr">{{v}}====={{i}}</li>
<!--for traverse the array -->
</ul>
<ul>
<li v-for="(v,k) in obj">{{v}}====={{k}}</li>
<!--for iterates over objects -->
</ul>
<ul>
<li v-for="(v,i) in obj2">{{v.name}}====={{i}}</li>
<!--for traverse the array object -->
</ul>
<button v-on:click="action">点我</button>
<!--Click event-->
<button v-on:mouseover="action2" >移入</button>
<!--Mouse-in event-->
<button v-on:mouseout="action3">移出</button>
<!--Mouse-in event-->
<button v-on:mouseover="action2" v-on:mouseout="action3">结合移入移出</button>
<!--Mouse in and out combined event-->
<button v-on:dblclick="action4">双击</button>
<!--Mouse double click event-->
<p v-show="flag">[email protected]</p>
<button v-on:dblclick="action5">Show mailbox</button>
<ul v-if="age==20">
<li>1241058165</li>
<li>1241058165</li>
<li>1241058165</li>
<li>1241058165</li>
<li>1241058165</li>
<li>1241058165</li>
</ul>
<ul v-else>
<li>5201314</li>
<li>5201314</li>
<li>5201314</li>
<li>5201314</li>
<li>5201314</li>
<li>5201314</li>
</ul>
<!--v-if and v-else-->
</div>
</body>
</html>
------------------------------------------
Operation
shopping list
add input box
list
total
Total number of lists: 6
Unpurchased: 4
The list name has been purchased (select box) status (the latter two are two-way bound)
Young Master's QQ group √ true
---------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue shopping list job</title>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css">
<script stpe="text/javascript" src="lib/jquery/dist/jquery.js"></script>
<script stpe="text/javascript" src="lib/bootstrap/dist/js/bootstrap.js"></script>
<script stpe="text/javascript" src="vue/dist/vue.js"></script>
<script>
window.onload = function(){
var app = new Vue ({
el:"#shop",
data:{
msg:"1241058165",
name:"少主",
isgjz:"",
cai:0,//Number of unpurchased
shoplist:[
{id:1,shopname:"Young Master's Book",flag:true},
{id:2,shopname:"Young Master's Bread",flag:true},
{id:3,shopname:"Young Master's mobile phone",flag:false}
]
},
mounted:function(){ //The page will only be rendered after the template has been mounted after compilation. in the life cycle
this.changelist(); //initialization
},
methods:{
addshop:function(isgjz){
if(isgjz==""){return}
console.log(this.shaoplist.length);
this.shaoplist.push({id:(this.shaoplist.length)+1,shopname:isgjz,flag:true});
this.changelist();
},
changelist:function(){
var _this = this;
_this.cai = 0;
this.shaoplist.forEach(function(element,index){
if(!element.flag){
_this.cai++;
}
})
},
del:function(index){
if(this.shaoplist[index].flag){
this.shaplist.splice(index,1);//Array delete index length
}
}
}
})
}
</script>
</head>
<body>
<div id="shop" class="container mt-5">
<h1 class="text-center">{{name}}'s shopping list</h1>
<h2>Total list<strong>{{shaplist.length}}</strong></h2>
<h3>Unpurchased <strong>{{cai}}</strong></h3>
<div>
<div class="input-group">
<input type="text" class="form-control" v-model="isgjz">
<span class="input-group-addon">
<a href="javascript:;" class="btn btn-info" v-on:click="addshop(isgjz)">添加</a>
</span>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Purchased</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr v-for="(v,i) in shaoplist">
<th scope="row">{{v.id}}</th>
<td>{{v.shopname}}</td>
<td><label><input type="checkbox" v-model="v.flag" v-on:change="changelist"></label></td>
<td>{{v.flag}}</td>
<td><button v-on:click="del(i)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>