Vue入门学习（一）

最新推荐文章于 2024-04-30 08:37:00 发布

码代马

最新推荐文章于 2024-04-30 08:37:00 发布

阅读量392

点赞数

分类专栏： Vue 文章标签： Vue JavaScript

本文链接：https://blog.csdn.net/qq_37296487/article/details/94330237

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

Vue实现

Vue实现字符串轮回（类似跑马灯效果）。

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8"/>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="button" @click="lang" value="浪起来"/>
			<input type="button" @click="stop"  value="停止"/><br>
			<h1>{{msg}}</h1>
		</div>
		
		<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'我真帅啊！真有才啊！',
					intervalId:null
				},
				methods:{
					lang(){
						
						if(this.intervalId != null) {
							return;
						}
						
						this.intervalId = setInterval(() => {
							var start = this.msg.substring(0,1);
							var end = this.msg.substring(1);
							this.msg = end + start;
						},500);
					},
					stop(){
						clearInterval(this.intervalId);
						this.intervalId = null;
					}
				}
			})
		</script>
	</body>
</html>

程序说明

1、首先引入Vue.js文件
2、建立视图层：

		<div id="app">
			<input type="button" @click="lang" value="浪起来"/>
			<input type="button" @click="stop"  value="停止"/><br>
			<h1>{{msg}}</h1>
		</div>

Vue.js 可以采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，如上述程序中使用文本插值将msg的值渲染到视图层中，现在数据和DOM产生了关联，并且页面是响应式的。@click="lang"和@click="stop"是两个点击事件，也可以这样写：v-on:click="lang"和v-on:click="stop"。@是“v-on”的缩写。
3、建立VM层，vm层是V层与M层连接的中间层。
（Vue前端框架是MVVM模式，M层是数据层，V层是视图层，而VM则连接V层和M层，可以将数据渲染到V层，从而减少对DOM的操作）。

<script>
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'我真帅啊！真有才啊！',
					intervalId:null
				},
				methods:{
					lang(){
						if(this.intervalId != null) {
							return;
						}
						this.intervalId = setInterval(() => {
							var start = this.msg.substring(0,1);
							var end = this.msg.substring(1);
							this.msg = end + start;
						},500);
					},
					stop(){
						clearInterval(this.intervalId);
						this.intervalId = null;
					}
				}
			})
		</script>

在上述程序中，首先初始化Vue，然后“el”指定渲染的组件，data则是定义和初始化的据（在本程序中，data这部分可以看作是M层），methods中则是定义的函数，但当函数要引用本Vue对象中的对象时，要使用this关键字，如同上述程序中的this.msg和this.intervalId等。

定时器使用

setInterval()方法
定时执行某段逻辑，如上述代码中，每500ms执行一次字符串更新。该方法返回的是该定时器的id。
clearInterval()方法
此方法作用是停止定时器，传参是定时器的id。

具体定时器的使用：https://javascript.ruanyifeng.com/advanced/timer.html#toc1

码代马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门学习（一）

Vue实现Vue实现字符串轮回（类似跑马灯效果）。<!DOCTYPE html><html> <head> <title></title> <meta charset="utf-8"/> <script src="vue.js" type="text/javascript" charset="utf-...
复制链接

扫一扫