VUE第一次学习笔记

时间:2021-07-20 08:16:12



-------------------------------------------------

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>