Vue 个人笔记（二）

最新推荐文章于 2024-10-11 19:28:32 发布

原创最新推荐文章于 2024-10-11 19:28:32 发布 · 183 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue个人笔记专栏收录该内容

2 篇文章

订阅专栏

本文为个人感悟，仅供参考

**
Vue (读音 /vjuː/，类似于 view) ，Vue官网

v-on,缩写@（作用为绑定事件监听器）
v-on:click：当鼠标点击时出发
v-on:mousemove：鼠标移动事件的绑定
v-on:keyup.enter.space：当按下回车和空格后松开时弹出警告框，keydown为按下时弹出警告框

		<div id="app">
			<p>{{counter}}</p>
			<!-- 点击按钮count自加 -->
			<button type="button" v-on:click="increase">+</button>		<!-- 方法一：函数 -->
			<button type="button" v-on:click="subtract">-</button>
			<button type="button" @click="increase">+</button>		<!-- 方法二：方法一的简写 -->
			<button type="button" @click="subtract">-</button>
			<button type="button" v-on:click="increase1(2)">+2</button><!-- 方法三：传参+2 -->
			</br></br>
			<button type="button" v-on:click="counterTwo++">加2</button><!-- 方法四：原生JS -->			
			<button type="button" v-on:click="counterTwo--">减2</button>
			<p>{{counterTwo * 2}}</p>
			<h3>{{counterTwo * 2 > 10 ? '大于10':'小于10'}}</h3><!-- 三元表达式检测变量是否大于10 -->
			
			</br></br>
			<p v-on:mousemove="updateCoordinates">Coordinates:{{x}}/{{y}} 	<!-- 监听鼠标 -->
				-----------------------------<span v-on:mousemove="dummy">DEAD SPOT</span>	
				-----------------------------<span v-on:mousemove.stop="">DEAD SPOT</span>	<!-- .stop事件修饰符也能发挥同样的作用 -->
				-----------------------------<span v-on:mousemove.stop.prevent="">DEAD SPOT</span>	<!-- .stop事件修饰符也能发挥同样的作用 -->
			</p>
			
			<input type="text" v-on:keyup.enter.space="alerMe" />	<!-- 监听键盘 -->
			</br>
			</br>

			</div>
		</div>

<script type="text/javascript">
	var app = new Vue({
		el:'#app',
		data:{
			counter:0,
			counterTwo:0,
			x:0,
			y:0,
			value:0,
			valueUP:0,
		},
		methods:{
			increase:function(){ //数字自加函数
				this.counter++;
			},
			increase1:function(step){ //数字+传参的值
				this.counter += step;
			},
			subtract:function(){	//数字自减函数
				this.counter--;
			},
			updateCoordinates:function(event){	//定位鼠标位置
				this.x=event.clientX;
				this.y=event.clientY;
			},
			dummy:function(){
				event.stopPropagation();	//确保p标签中定位的事件不会传播给绑定有这个属性的元素（也就是span标签）
			},
			alerMe:function(){
				alert("警告!");	//弹出弹框
			},
		}
	});
</script>

本节题目

第一题:在点击按钮后弹出警告
第二题:input输入的值在p标签中显示
第三题:input输入的值按下回车键后在p标签中显示

<div id="app">
			<!-- 第一题:在点击按钮后弹出警告 -->
			<button type="button" v-on:click="alerButt">按钮</button>
			<!-- 第二题:input输入的值在p标签中显示 -->
			<div id="">
				<input type="text" v-on:keyup="InputKey" />		<!-- 方法二用函数 -->
				<!-- <input type="text" v-on:keydown="value = $event.target.value" /> -->	<!-- 方法二 --><!-- $event.target.value指向的是当前的input的值。-->
				<p>{{value}}</p>
			</div>
			<!-- 第三题:input输入的值按下回车键后在p标签中显示 -->
			<div id="">
				<input type="text" v-on:keyup.enter="InputDown" /><!-- 方法三用函数 -->
				<!-- <input type="text" v-on:keydown.enter="valueUP = $event.target.value" /> -->	<!-- 方法二 -->
				<p>{{valueUP}}</p>
</div>

<script type="text/javascript">
	var app = new Vue({
		el:'#app',
		data:{
			value:0,
			valueUP:0,
		},
		methods:{
			alerButt:function(){
				alert("按钮警告");
			},
			InputKey:function(){
				this.value=event.target.value;
			},
			InputDown:function(){
				this.valueUP=event.target.value;
			},
		}
	});
</script>

完整代码

	<div id="app">
			<p>{{counter}}</p>
			
			<button type="button" v-on:click="increase">+</button>		<!-- 方法一：函数 -->
			<button type="button" v-on:click="subtract">-</button>
			<button type="button" @click="increase">+</button>		<!-- 方法二：方法一的简写 -->
			<button type="button" @click="subtract">-</button>
			<button type="button" v-on:click="increase1(2)">+2</button><!-- 方法三：传参+2 -->
			</br></br>
			<button type="button" v-on:click="counterTwo++">加2</button><!-- 方法四：原生JS -->			
			<button type="button" v-on:click="counterTwo--">减2</button>
			<p>{{counterTwo * 2}}</p>
			<h3>{{counterTwo * 2 > 10 ? '大于10':'小于10'}}</h3><!-- 三元表达式检测变量是否大于10 -->
			
			</br></br>
			<p v-on:mousemove="updateCoordinates">Coordinates:{{x}}/{{y}} 	<!-- 监听鼠标 -->
				-----------------------------<span v-on:mousemove="dummy">DEAD SPOT</span>	
				-----------------------------<span v-on:mousemove.stop="">DEAD SPOT</span>	<!-- .stop事件修饰符也能发挥同样的作用 -->
				-----------------------------<span v-on:mousemove.stop.prevent="">DEAD SPOT</span>	<!-- .stop事件修饰符也能发挥同样的作用 -->
			</p>
			
			<input type="text" v-on:keyup.enter.space="alerMe" />	<!-- 监听键盘 -->
			</br>
			</br>
			<!-- 第一题:在点击按钮后弹出警告 -->
			<button type="button" v-on:click="alerButt">按钮</button>
			<!-- 第二题:input输入的值在p标签中显示 -->
			<div id="">
				<!-- <input type="text" v-on:keyup="InputKey" /> -->		<!-- 方法二用函数 -->
				<input type="text" v-on:keydown="value = $event.target.value" />	<!-- 方法二 -->
				<p>{{value}}</p>
			</div>
			<!-- 第三题:input输入的值按下回车键后在p标签中显示 -->
			<div id="">
				<input type="text" v-on:keyup.enter="InputDown" /><!-- 方法三用函数 -->
				 <!-- <input type="text" v-on:keydown.enter="valueUP = $event.target.value" /> -->	<!-- 方法二 --> 
				
				<p>{{valueUP}}</p>
			</div>
		</div>

<script type="text/javascript">
	var app = new Vue({
		el:'#app',
		data:{
			counter:0,
			counterTwo:0,
			x:0,
			y:0,
			value:0,
			valueUP:0,
		},
		methods:{
			increase:function(){ //数字自加函数
				this.counter++;
			},
			increase1:function(step){ //数字+传参的值
				this.counter += step;
			},
			subtract:function(){	//数字自减函数
				this.counter--;
			},
			updateCoordinates:function(event){	//定位鼠标位置
				this.x=event.clientX;
				this.y=event.clientY;
			},
			dummy:function(){
				event.stopPropagation();	//确保p标签中定位的事件不会传播给绑定有这个属性的元素（也就是span标签）
			},
			alerMe:function(){
				alert("警告!");	//弹出弹框
			},
			alerButt:function(){
				alert("按钮警告");
			},
			InputKey:function(){
				this.value=event.target.value;
			},
			InputDown:function(){
				this.valueUP=event.target.value;
			},
		}
	});
</script>