Vue学习笔记版本02

wqww_1

已于 2022-02-27 14:48:54 修改

阅读量277

点赞数

分类专栏： vue 文章标签： vue

于 2022-02-27 14:45:16 首次发布

本文链接：https://blog.csdn.net/wqww_1/article/details/123164135

版权

vue 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

vue第一个入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			<span>{{msg}}</span>
			<h1>
				<h2>
					{{msg}}
				</h2>
			</h1>
			<h4>{{count + 1}}</h4>
			<h4>{{count + 2}}</h4>
			
			<h4>{{content.toUpperCase()}}</h4>
			<h4>{{content.length}}</h4>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:"小陈",
				count:0,
				content:"hello vuw"
			}
		});
	</script>
</html>

vue的data属性定义对象、数组相关数据

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			
			<h1>{{user}}</h1>
			
			<h1>{{user.name}}</h1>
			
			<h1>{{schools[0]}}</h1>
			
			<h1>{{users[2].age}}</h1>
			
		</div>
		
	</body>
</html>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:"hello vue",
			count:0,
			user:{id:21,name:"张三",age: 23,salary: 23000},
			schools:['河南校区','北京小区','南京小区'],
			users:[
				{id:21,name:"张三",age: 23,salary: 23000},
				{id:22,name:"张三",age: 24,salary: 23000},
				{id:23,name:"张三",age: 25,salary: 23000}
			]
		}
	})
</script>

03 v-text,v-html,事件绑定，数据遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style type="text/css">
			h4{
				color: #0000FF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--{{msg}}-->
			<h1>{{msg}}</h1>
			<!--
				v-text
				v-html
			-->
			<h4>v-text or v-html</h4>
			<h1 v-text="msg"></h1>
			<h1 v-html="msg"></h1>
			<h1 v-text="content"></h1>
			<h1 v-html="content"></h1>
			
			<!--
				v-on:事件
					v-on:click  	点击事件
					v-on:mouseover   
					v-on:mousemove
					....
				等价于
				@click @mouseover @mousemove
			-->
			<h4>v-on</h4>
			<button v-on:click="test">年龄加1按钮</button>
			<button @click="test">年龄加1按钮</button>
			<!-- <div v-on:mouseover="test1">占山</div> -->
			<button @click="changeAge(10)">年龄增加10</button>
			<h1>年龄：{{count}}</h1>
			<!--
				v-if
				v-show
			-->
			<h4>v-if or v-show</h4>
			<h1 v-if="isShow">{{msg}}</h1>
			<h2 v-show="isShow">{{msg}}</h1>
			<button @click="hideH1">用来隐藏h1标签</button>
			<br>
			<!--
				v-bind
			-->
			<h4>v-bind</h4>
			<img v-bind:src="src" v-bind:width="width" v-bind:height="height" @mouseover="changeIUIn()" @mouseout="changeIUOut"/>
			<img :src="src" :width="width" :height="height" @mouseover="changeIUIn()" @mouseout="changeIUOut"/>
			<button @click="changeIUIn">修改IU</button>
			<!--
				v-for
			-->
			<h4>v-for</h4>
			<h4>便利对象</h4>
			<span v-for="value,key,index in user">【=={{index}}=={{key}}=={{value}}】</span>
			<h4>便利数组</h4>
			<ul>
				<li v-for="(item,index) in schools">{{index}} ===>> {{item}}</li>
			</ul>
			<h4>便利数组里面的对象</h4>
			<table border="1" width="100%">
				<tr>
					<th>id</th>
					<th>name</th>
					<th>age</th>
					<th>salary</th>
					<th>操作</th>
				</tr>
				<tr v-for="user,index in users">
					<td>{{user.id}}</td>
					<td v-text="user.name"></td>
					<td v-html="user.age"></td>
					<td>{{user.salary}}</td>
					<td><a href="">删除</a></td>
				</tr>
			</table>
			<!--
				v-model
			-->
			<h4>v-model</h4>
			<input v-model="msg" />
			<br>
			<h3>表单提交</h3>
			<form>
				用户名：<input type="text" v-model="user.username"/><br>
				密码： <input type="password" v-model="user.password"/><br>
				邮箱：<input type="text" v-model="user.email"/><br>
				QQ：<input type="text" v-model="user.qq"/><br>
				验证码：<input type="text" v-model="user.code"/><br>
				<input type="button" @click="reg" value="注册"/>
			</form>
		</div>
	</body>
</html>
<script>
	var app = new Vue({
		el:"#app",
		data:{
			msg:"Hello vue",
			content:"<a href='https://www.baidu.com'>百度</a>",
			count:0,
			//查看是否出现
			isShow:true,
			src:"image/iu10%20(1).jpg",
			width:100,
			hei:100,
			// user:{id:21,name:"张三",age: 23,salary: 23000},
			schools:['河南校区','北京小区','南京小区'],
			users:[
				{id:21,name:"张三",age: 23,salary: 23000},
				{id:22,name:"张三",age: 24,salary: 23000},
				{id:23,name:"张三",age: 25,salary: 23000}
			],
			//注册信息
			user:{},
			// username:"",
			// password:"",
			// email:"",
			// qq:"",
			// code:""
		},
		methods:{
			//注册
			reg(){
				console.log(this.user.username);
				console.log(this.user.password)
			},
			changeIUOut(){
				this.src="image/iu10%20(1).jpg"
			},
			changeIUIn(){
				this.src="image/iu6.jpg"
			},
			hideH1(){
				this.isShow = !this.isShow;
			},
			test:function(){
				this.count = this.count + 1;
			},
			test1:function(){
				alert("vue中的test");
			},
			changeAge(num){
				this.count += num;
			}
		}
	})
</script>

购物车案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<h1>{{msg}}</h1>
			编号：<input type="text" v-model="item.no"/> 
			名称：<input type="text" v-model="item.name"/> 
			价格：<input type="text" v-model="item.price"/> 
			数量：<input type="text" v-model="item.count"/> 
			<input @click="addCart" type="button" value="添加到购物车"/>
			<table border="1">
				<tr>
					<th>编号</th>
					<th>名称</th>
					<th>价格</th>
					<th>购买数量</th>
					<th>小计</th>
				</tr>
				<tr v-for="(items,index) in items" :key="items.id">
					<td>{{items.id}}</td>
					<td>{{items.name}}</td>
					<td>{{items.price}}</td>
					<td>
						<input @click="incrementCount(index)" type="button" value="+" />
						{{items.count}}
						<input @click="decrementCount(index)" type="button" value="-" />
					</td>
					<td>{{(items.count * items.price).toFixed(2)}}</td>
				</tr>
			</table>
			<h3>总价格：{{ totalPrice() }}</h3>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				msg:"购物车案例",
				item:{},
				items:[
					{id:1,name:"iphone8",price:19.9,count:1},
					{id:2,name:"小米11",price:200,count:1}
				],
			},
			methods:{
				addCart(){
					//添加购物车
					if(!this.item.no){alert("请输入编号");return false;}
					if(!this.item.name){alert("请输入名称");return false;}
					if(!this.item.price){alert("请输入价格");return false;}
					if(!this.item.count){alert("请输入数量");return false;}
					this.items.push(this.item);
					this.item = {}
				},
				incrementCount(idx){
					this.items[idx].count++;
				},
				decrementCount(idx){
					if(!(this.items[idx].count>1)){
						alert("购买的商品不可以小于1件");
						return false;
					}
					this.items[idx].count--;
				},
				totalPrice(){
					var totalPrice = 0;
					for(var i=0; i < this.items.length;i++){
						totalPrice += this.items[i].count * this.items[i].price;
					}
					return totalPrice.toFixed(2);
				}
			}
		});
	</script>
</html>

实现备忘录

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<div id="app">
			请输入内容：<input type="text" v-model="content"/><button @click="saveContent">添加到备忘录</button>
			<ul v-if="lists.length != 0">
				<li v-for="(content,index) in lists" :key="index">{{index+1}}.{{content}} <a href="javascript:;" @click="deleteContent(index)">删除</a></li>
			</ul>
			<ul v-if="lists.length == 0">
				<li><span style="color: red;">当前备忘录中没有任何数据！！！</span></li>
			</ul>
			
			<a v-show="lists.length != 0" href="javascript:;" @click="lists=[]">清空备忘录</a>
			<h3>当前备忘录共：{{lists.length}} 条</h3>
		</div>
	</body>
	<script src="js/vue.js"></script>
	<script>
		new Vue({
			el:"#app",
			data:{
				lists:["今天晚上吃好吃的,吃大便","今天晚上带游戏","今天晚上学习"],
				content:"",
			},
			methods:{
				saveContent(){
					if(!this.content){
						return false;
					}
					this.lists.push(this.content);
					this.content="";
				},
				deleteContent(index){
					this.lists.splice(index,1)
				},
			}
		});
	</script>
</html>