前端,HBuilder第六天

最新推荐文章于 2023-07-10 15:37:20 发布

吾辈楷模曹孟德

最新推荐文章于 2023-07-10 15:37:20 发布

阅读量880

点赞数

文章标签：前端 elementui vue.js

本文链接：https://blog.csdn.net/Jcskson/article/details/122726794

版权

1.josn代码

{"id":"001","name":"jack"}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<div id="app">
		<button v-on:click="test1()">方式一绑定</button>
		<button @click="test2()">方式二绑定</button>
	</div>
	<body>
		<script type="text/javascript" src="../vueday01/vue.js"></script>
		<script>
			new Vue({
				"el":"#app",
				"methods":{
					//方式一绑定
					test1(){
						console.log(1111);
					},
					//方式二绑定
					test2:function(){
						document.write("孝死个人");
					}
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="ele in names">{{ele}}</li>
			</ul>
		</div>
		<script type="text/javascript" src="../vueday01/vue.js"></script>
		<script>
			new Vue({
				"el":"#app",
				"data":{
					"names":["敏敏","绵绵","芊芊","狗剩子"],
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="ele in users">{{ele.id}}{{ele.name}}</li>
			</ul>
		</div>
		<script type="text/javascript" src="../vueday01/vue.js"></script>
		<script>
			new Vue({
				"el":"#app",
				"data":{
					"users":[
						{"id":1,"name":"jack"},
						{"id":2,"name":"rose"},
						{"id":3,"name":"ship"}
					]
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			{{count}}
			<form>
				商品的库存:<input type="text" name="count" v-model="count"/>
			</form>
		</div>
		<script src="../vueday01/vue.js" type="text/javascript"></script>
		<script>
			new Vue({
				"el":"#app",
				"data":{
					"count":1,
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品个数的加减</title>
	</head>
	<body>
		<div id="sa">
			<button @click="mul()">+</button>
			<input type="text" name="count" v-model="count"/>
			<button @click="sub()">-</button>
		</div>
		<script type="text/javascript" src="../vueday01/vue.js"></script>
		<script>
			new Vue({
				"el":"#sa",
				"data":{
					"count":1,
				},
				"methods":{
					mul(){
						this.count++;
					},
					sub(){
						if(this.count>1){
							this.count--;
						}
					}
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="sdf"></div>
		<script type="text/javascript" src="../vueday01/vue.js"></script>
		<script>
			new Vue({
				el:"#sdf",
				data:{
					"ma":"嘚儿~驾!!!",
				},
				//第一个生命周期函数
				beforeCreate:function(){
					console.group("---beforeCreate正在运行---");
					console.log(this.$el);//vue对象能否显示
					console.log(this.ma);
				},
				//第二个生命周期函数
				created:function(){
					console.group("---Create正在运行---");
					console.log("Vue对象:"+this.$el);//vue对象能否显示
					console.log("data:"+this.$data);
					console.log("ma:"+this.ma);
				},
				//第三个生命周期
				beforeMount:function(){
					console.group("---beforeMount正在运行---");
					console.log("Vue对象:"+this.$el);//vue对象已经创建,可以显示
					console.log("data:"+this.$data);
					console.log("ma:"+this.ma);
				},
				//第四个生命周期
				mounted() {
					console.group("---Mounted正在运行---");
					console.log("Vue对象:"+this.$el);//挂载完毕,显示vue对象
					console.log("data:"+this.$data);
					console.log("ma:"+this.ma);
				},
				//第五个生命周期函数
				beforeUpdate() {
					
				},
				//第六个生命周期函数
				updated() {
					
				},
				//第七个生命周期函数
				beforeDestroy() {
					
				},
				//第八个生命周期函数
				destroyed() {
					
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<button v-on:click="test1()">发送get的异步请求</button>
			<button @click="test2()">发送pos的异步请求</button>
		</div>
		<script src="../vueday01/vue.js"></script>
		<script src="axios-0.18.0.js"></script>
		<script>
			new Vue({
				"el":"#app",
				"data":{
					"msg":"hello",
				},
				"methods":{
					test1(){
						var url = "1.json";
						axios.get(url).then(function(resp){
							var user = resp.data;
							console.log(user.id+","+user.name);
						}).catch();
					},
					test2(){
						var  url = "http://localhost:8080/tom/1"
						axios.post(url).then(function(resp){
							var user = resp.data;
							console.log(user.id+","+user.name);
						}).catch(
						function(){
							window.alert("代码有问题了!!!");
						});
					}
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<el-button></el-button>
			<el-button></el-button>
			<el-button></el-button>
		</div>
		<script src="vue.js" type="text/javascript"></script>
		<script>
			var tem = Vue.extend({
				"template":"<button style='border-radius:10px;'>自定义按钮</button>",
			});
			Vue.component("el-button",tem);
			new Vue({
				el:"#app",
			})
		</script>
		
	</body>
</html>