Vue.js中v-on指令的使用和一个跑马灯效果的展示

最新推荐文章于 2022-05-25 09:20:55 发布

Joker_Tonglp

最新推荐文章于 2022-05-25 09:20:55 发布

阅读量230

点赞数

分类专栏： Vue.js 文章标签： vue js html

本文链接：https://blog.csdn.net/Bmom_1Mpac/article/details/107166903

版权

Vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

第一次学习Vue.js没想到竟然有700多人访问，这给了我继续学习的动力，在上节学习了几个基本指令后，这节又继续学习了v-on指令和跑马灯效果的制作。

<body>
		<div id="app">
		
		<!--<input type="button" value="我的按钮" :title="mytitle+'123'" v-on:click="alert('hello')"/>-->
		
		<input type="button" value="按钮2" v-on:click="show" />
		</div>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>//2.创建一个Vue的实例
			//当我们导入包之后，在浏览器的内存中，就多了一个Vue的构造函数
			var vm = new Vue({
				el: '#app',//表示我们当前new的这个Vue实例，要控制页面
				//这里的data就是MVVM中的M，专门用来保存每个数据的
				data:{ //data属性中，存放的是el中用到的数据
					
				},
				
				methods:{
				show:function(){
					alert('Hello')
				}
			}
			})
			
			
			/*document.getElementById('btn').onclick=function(){
				alert('Hello')
			}*/
			</script>
		
	</body>

运行页面后，点击按钮2
在这里插入图片描述弹出“Hello”
我们来回顾一下上篇Vue.js学习过的指令：
{{}}插值表达式和v-text
v-cloak、v-html、
v-bind Vue提供的属性绑定机制可缩写为：
本节学习到的v-on Vue提供的事件绑定机制可缩写为 @

//注意:在vn实例中，如果想要获取data 上的数据，或者想要调用methods 中的方法，必须通过
this数据属性名或
this.方法名来进行访问，这里的this，就表示我们new出来的
VM实例对象

跑马灯效果展示代码如下：

<body>
		
		<div id="app">
			<p>{{msg}}</p>
			<input type="button" value="哎哟不错喔" v-on:click="youshow" />
			<input type="button" value="好啦我知道了" v-on:click="stopyoushow" />
		</div>
		
		<script type="text/javascript" src="js/vue.js" ></script>
		<script>
			var vm=new Vue({
				el:'#app',
				data:{
					msg:'你真的很棒！很棒很棒！',
					intervalId:null //在data上定义 定时器Id
				},
				
				methods:{
					youshow() {
//						console.log(this.msg)
//						
//						var start=this.msg.substring(0,1)
//						//取后面所有的字符
//						var end=this.msg.substring(1);
//						
//						this.msg=end+start

						//if(this.intervalId!=null) return;
						
						var _this= this
						this.intervalId = setInterval(function(){
						var start=_this.msg.substring(0,1)
						//取后面所有的字符
						var end=_this.msg.substring(1);
						
						_this.msg=end+start
						},400)
					},
					stopyoushow(){//停止计时器
					clearInterval(this.intervalId)//,
					//this.intervalId=null
					}
				},
			})
		</script>
	</body>

//注意: VM实例，会监听自己身上data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去 ; [好处:程序员只需要关心数据，不需要考虑如何重新渲染DOM页面]

Joker_Tonglp

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js中v-on指令的使用和一个跑马灯效果的展示

第一次学习Vue.js没想到竟然有700多人访问，这给了我继续学习的动力，在上节学习了几个基本指令后，这节又续学习了v-on指令和跑马灯效果的制作。<body> <div id="app">  <input type="button" value
复制链接

扫一扫