VUE第一次学习笔记
-------------------------------------------------
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>
浙公网安备 33010602011771号
