学习Vue第一天

最新推荐文章于 2024-08-07 20:34:45 发布

还未入门

最新推荐文章于 2024-08-07 20:34:45 发布

阅读量145

点赞数 1

分类专栏：入门文章标签：初识Vue

本文链接：https://blog.csdn.net/qq_41358290/article/details/97235415

版权

入门专栏收录该内容

7 篇文章 0 订阅

订阅专栏

第一天学习Vue

引入Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

声明周期：

vue对象创建到销毁

一： 创建的过程       四个函数   
        beforeCreate()    创建之前执行的方法     无法访问   data元素    无法访问 methods 方法    
        created()         创建的过程中的方法  可以访问 data元素    可以访问 methods方法        
        beforeMount()      页面加载完毕   ，可以访问 data元素 ，可以访问 methods方法   可以访问dom元素 ，但是 dom元素都是没有被 vue渲染的dom元素
        mounted ()     页面加载完毕  ，可以访问 data元素 ，可以访问 methods方法 ，页面dom元素都可以访问 ，并且  页面dom元素的值渲染完毕
二：运行的过程        两个函数   
         beforeUpdate()     页面的数据更新 ，   在 data数据更的时候  ，页面dom元素数据  更新之前     执行该方法  
         update()          页面数据更新            在 data数据更新完毕 后  页面dom元素数据 重新渲染后   执行该方法     
三： 销毁的时候        两个函数 
         beforeDestroy()     :  data数据   和  methods的函数 都可以正常调用 
         destroyed()         : data数据  methods中的函数 都无法调用了

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		
		<!--
        	
        	声明周期    ：
        	   vue对象 创建  到 销毁   
        	       创建的过程    四个函数   
        	             beforeCreate()    创建之前执行的方法     无法访问   data元素    无法访问 methods 方法    
                         created()         创建的过程中的方法  可以访问 data元素    可以访问 methods方法        
                         beforeMount()      页面加载完毕   ，可以访问 data元素 ，可以访问 methods方法   ，可以访问dom元素 ，但是 dom元素都是没有被 vue渲染的dom元素
                         mounted ()     页面加载完毕  ，可以访问 data元素 ，可以访问 methods方法 ，页面dom元素都可以访问 ，并且  页面dom元素的值渲染完毕
        	      运行的过程        两个函数   
        	          beforeUpdate()     页面的数据更新 ，   在 data数据更的时候  ，页面dom元素数据  更新之前     执行该方法  
        	           update()          页面数据更新            在 data数据更新完毕 后  页面dom元素数据 重新渲染后   执行该方法   
        	      销毁的时候       两个函数 
        	        beforeDestroy()     :  data数据   和  methods的函数 都可以正常调用 
        	        destroyed()         : data数据  methods中的函数 都无法调用了
        -->
		
		
	</head>
	<body>
		  <div id="acc">
		  	<h1 id="d1">{{msg}}</h1>
		  	<input type="button" @click=""  value="按钮" />
		  </div>
		 <script>
		 	new Vue({
		 		el:"#acc",
		 		data:{
		 			msg:"天气不错"
		 		},
		 		methods:{
		 			abc:function(){
		 				console.log("明天的天气更好");
		 			},
		 			changeMsg:function(){
		 				this.msg="阳光明媚";
		 			}
		 			
		 		},
		 		/*
		 		beforeCreate:function(){
		 			console.log("beforeCreate");
		 			//console.log(this.msg);
		 			//this.abc();
		 		    var a=document.getElementById("d1");
		 			console.log(a.innerHTML);
		 		},
		 		created:function(){
		 			console.log("created方法");
		 			console.log(this.msg);
		 			this.abc();
		 			var a=document.getElementById("d1");
		 			console.log(a.innerHTML);
		 		},
		 		beforeMount:function(){
		 			console.log("beforeMount");
		 			console.log(this.msg);
		 			this.abc();
		 			var a=document.getElementById("d1");
		 			console.log(a.innerHTML);
		 		},
		 		mounted:function(){
		 			console.log("mounted");
		 			console.log(this.msg);
		 			this.abc();
		 			var a=document.getElementById("d1");
		 			console.log(a.innerHTML);
		 		},
		 		
		 		beforeUpdate:function(){
		 		   console.log("beforeUpdate方法执行");	
		 		   console.log("data数据 "+this.msg);
		 		   console.log("页面数据"+document.getElementById("d1").innerHTML);
		 		},
		 		updated:function(){
		 		   console.log("Update方法执行");	
		 		   console.log("data数据 "+this.msg);
		 		   console.log("页面数据"+document.getElementById("d1").innerHTML);
		 		},
		 		beforeDestroy:function(){
		 		
		 		},
		 		destroyed:function(){
		 
		 		}
		 		*/
		 		
		 		
		 	});

自定义指令
Vue.directive 可以自定义指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<!--
        	  自定义指令
        	  Vue.directive  可以自定义指令 
        -->
	</head>
	<body>
		  <div id="abc">
		  	<h1 v-fujun="'orange'">{{msg}}</h1>
		  </div>	
		  <div id="aaa">
		  	<div>{{msg}}</div> 	
		  </div>
		<script>
			Vue.directive("fujun",{
				//   每当指定绑定的时候 执行的内容 
				// el  表示  绑定的元素
				//  binding   指令给定的 值   
				bind(el,binding){
					console.log(binding);
					console.log(binding.value);
					console.log(binding.name);
					console.log(binding.expression);
					el.style.color=binding.value;
					//el.style.backgroundColor="yellow";
				},
				// 每当 指定  插入到  dom元素的时候  执行的 内容 	
				inserted(el){
				},
				// 每当指令更新的时候 ，执行的内容   
				updated(el){
				}
			});
			new Vue({
				el:"#abc",
				data:{
					msg:"今天星期三",
					green:"green"
				}
			});
			
			new Vue({
				el:"#aaa",
				data:{
					msg:"明天星期四"
				}
				
			});
			
			
		</script>
		
		
	</body>
</html>

今日成品

计算器

<!DOCTYPE html>
<html>
	<head>
		<!-- 第三组缑启初 -->
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
		/* 	#todo {
				background-color: #000000;
			}

			.doface {
				align-content: center;
				text-align: center;
				color: #FF0000;
				top: auto;
			}

			#tianjiakuang {
				top: auto;

				height: 40px;
				width: 200px;
			}

			#tianjiaanniu {
				height: 40px;
				width: 80px;
			} */
		</style>
	</head>
	<body>
		<div id="qichujisuanqi">
			<input type="text" v-model="diyi" />
			<select v-model="fuhao">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model="dier" />
			<input type="button" value="=" @click="jisuan()" />
			<input type="text" v-model="disan" />
		
		
			<p align="center" class="doface">doFace :
				<input type="text" name="" id="tianjiakuang" v-model="shijian" v-on:keyup.13="addshijian" /> <input type="button"
				@click="addshijian" id="tianjiaanniu" value="添加" />
				<hr>
			</p>

			<ol>
				<li v-for="(shijian) of shijianlist">{{shijian}}</li>
			</ol>


			<table>

				<tr>
					<td>当下要办的事情</td>

				</tr>

				<tr v-for="(shijian,index) of shijianlist">
					<td>{{index+1}}</td><td><input type="radio" name="fieldname"  value="value" ></td><td v-text="shijian"></td>
				</tr>

			</table>

		</div>
		<script type="text/javascript">
			new Vue({
				el: "#qichujisuanqi",
				data: {
					diyi: "",
					dier: "",
					disan: "",
					fuhao: "+",
					shijian: "",
					shijianlist: []
				},
				methods: {
					jisuan: function() {
						switch (this.fuhao) {
							case "+":
								this.disan = parseInt(this.diyi) + parseInt(this.dier);
								break;
							case "-":
								this.disan = parseInt(this.diyi) - parseInt(this.dier);
								break;
							case "*":
								this.disan = parseInt(this.diyi) * parseInt(this.dier);
								break;
							case "/":
								this.disan = parseInt(this.diyi) / parseInt(this.dier);
								break;
						}

					},
					addshijian:function(){
						this.shijianlist.push(this.shijian);
						this.shijian="";
					}
				}

				// 	},
				// computed:{
				// 		disan:function() {
				// 			return parseInt(this.diyi)+"fuhao+"+parseInt(this.dier);
				// 		}
				// 	}


			});
		</script>
	</body>
</html>

打地鼠

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>打地鼠</title>
		<link rel="stylesheet" type="text/css" href="css/css1.css" />
		<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="c1">
			<table>
				<tr>
					<td>-游戏时间-</td>
					<td> <input type="text" id="gametime" value="1" />分钟</td>
				</tr>
				<tr>
					<td>-倒计时间-</td>
					<td> <span id="countdown"></span> </td>
				</tr>
				<tr>
					<td>-地鼠出现间隔-</td>
					<td> <input type="text" id="jgtime" value="2" />秒钟</td>
				</tr>
				<tr>
					<td>-停留时间-</td>
					<td> <input type="text" id="tltime" value="2" />秒钟</td>
				</tr>
				<tr>
					<td>-得分情况-</td>
					<td>
						<div id="gamescore"></div>
					</td>
				</tr>
				<tr>
					<td><input type="button" value="开始游戏" onclick="startGame()" id="startbtn" /> </td>
					<td><input type="button" value="结束游戏" onclick="stopGame()" id="stopbtn" /> </td>
				</tr>
			</table>
		</div>
		<div class="c2">
			<p align="center">游戏说明</p>
			<p>点击“开始游戏”按钮，在下图中随机产生老鼠，老鼠消失前单机老鼠进行打击，打中一次即可获得100的积分，没有打中老鼠扣除50积分，快快行动吧考验你的反应和眼力。</p>
			<p>作者：缑启初 </p>
			<p>指导老师：</p>
		</div>
		<div class="c3">
			<table border="2px">
				<tr>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
				</tr>
				<tr>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
				</tr>
				<tr>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
				</tr>
				<tr>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
				</tr>
				<tr>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
					<td><img src="img/00.jpg" onclick="dds(this)"></td>
				</tr>
			</table>
		</div>
	</body>
</html>

还未入门

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习Vue第一天

第一天学习Vue引入Vue.js<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>声明周期：vue对象创建到销毁一：创建的过程四个函数 beforeCreate(...
复制链接

扫一扫