Vue入门学习(一)

Vue实现

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


<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.msgthis.intervalId等。

定时器使用

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

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

你可能感兴趣的:(Vue)