-------------------------------------------------
VUE 2.0 (MVVM 模式)
MVC C是控制器
jquery 为驱动DOM 而生
M model 模型 当前视图中的可用数据
V view 视图 渲染 UI HTML
VM 视图模型
-------------------------------------------------
1.引用
2.创建应用
表达式
{{}}
属性 方法 放在 data 里面
方法放在:methods
------------------------------------------
指令 /扩展了标签
都是 V-
------------------------------------------
双向数据绑定
v-model //用于表单 表单的value (双向绑定)
v-for //数据 对象 遍历 循环
------------------------------------------
事件
<button v-on:click="action">点我</button>
<!--点击事件-->
<button v-on:mouseover="action2">移入</button>
<!--鼠标移入 事件-->
<button v-on:mouseout="action3">移出</button>
<!--鼠标移入 事件-->
简写
v-on:click="action"
@:click="action"
v-show/v-if //显示和隐藏 多用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"> <!--双向绑定--> <ul> <li v-for="item in arr">{{item}}</li> <!--for 遍历 数组--> </ul> <ul> <li v-for="(v,i) in arr">{{v}}====={{i}}</li> <!--for 遍历 数组--> </ul> <ul> <li v-for="(v,k) in obj">{{v}}====={{k}}</li> <!--for 遍历 对象--> </ul> <ul> <li v-for="(v,i) in obj2">{{v.name}}====={{i}}</li> <!--for 遍历 数组对象--> </ul> <button v-on:click="action">点我</button> <!--点击事件--> <button v-on:mouseover="action2" >移入</button> <!--鼠标移入 事件--> <button v-on:mouseout="action3">移出</button> <!--鼠标移入 事件--> <button v-on:mouseover="action2" v-on:mouseout="action3">结合移入移出</button> <!--鼠标移入移出 结合事件--> <button v-on:dblclick="action4">双击</button> <!--鼠标 双击 事件--> <p v-show="flag">1241058165@qq.com</p> <button v-on:dblclick="action5">显示邮箱</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>
------------------------------------------
作业
购物清单
输入框 添加
列表
总数
清单总数:6
未采购数:4
清单名称 已经采购(选择框) 状态 (后面两个是双向绑定的)
少主的QQ群 √ true
---------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue 购物清单 作业</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,//未采购数 shaoplist:[ {id:1,shopname:"少主的图书",flag:true}, {id:2,shopname:"少主的面包",flag:true}, {id:3,shopname:"少主的手机",flag:false} ] }, mounted:function(){ //模板编译之后 已经挂载 此时才会渲染页面。 生命周期里面的 this.changelist(); //初始化 }, 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.shaoplist.splice(index,1);//数组删除 索引 长度 } } } }) } </script> </head> <body> <div id="shop" class="container mt-5"> <h1 class="text-center">{{name}}的购物清单</h1> <h2>清单总数<strong>{{shaoplist.length}}</strong></h2> <h3>未采购数<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>名称</th> <th>已采购</th> <th>状态</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>