博客快捷键

按住 Shift 键查看可用快捷键

ShiftK

开启/关闭快捷键功能

ShiftA

打开/关闭中控台

ShiftD

深色/浅色显示模式

ShiftS

站内搜索

ShiftR

随机访问

ShiftH

返回首页

ShiftL

友链页面

ShiftP

关于本站

ShiftI

原版/本站右键菜单

松开 Shift 键或点击外部区域关闭

文章详情

互动

Vue系列-Day01-第一个Vue程序

5613分钟2022-07-3113未知

第一个VUE程序

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ counter }}
		</div>
        
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					counter :"www.hikki.site"
				}
			});
		</script>
	</body>
</html>

if-else

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if = "test">www.hikki.site</h1>
			<h1 v-else >这是我的博客</h1>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					test: true

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

if-else-if

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if = "test === 'A'">www.hikki.site</h1>
			<h1 v-else-if = "test ==='B'">B</h1>
			<h1 v-else >C</h1>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					test: 'A'
				}
			});
		</script>
	</body>
</html>

v-for

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<li v-for="item in items">
			{{item.msg}}
			</li>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					items:[
						{msg:'www.hikki.site'},
						{msg:'筆記'},
						{msg:'我的博客'},
					]
				}
			});
		</script>
	</body>
</html>

监听变量变化

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{a}}
</div>

<script type="text/javascript">
var data = { a : "变量变化前" };
var vm = new Vue({
	el   : "#app",
	data : data
});

vm.$watch('a', function(newVal, oldVal){
	console.log(newVal, oldVal);
})

vm.$data.a = "变量变化后"
</script>
</body>
</html>

生命周期的监听

可以指定事件在某个事件完成前后执行，处理特定的的事情。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "3秒后改变";
}, 3000);
</script>
</body>
</html>

小码同学

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自小码同学

喜欢这篇文章的人也看了

随便逛逛

【Docker系列】Lsky-Pro兰空图床

CentOS 7 磁盘扩容

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部

文章详情

互动

Vue系列-Day01-第一个Vue程序

5613分钟2022-07-3113未知

第一个VUE程序

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			{{ counter }}
		</div>
        
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					counter :"www.hikki.site"
				}
			});
		</script>
	</body>
</html>

if-else

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if = "test">www.hikki.site</h1>
			<h1 v-else >这是我的博客</h1>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					test: true

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

if-else-if

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<h1 v-if = "test === 'A'">www.hikki.site</h1>
			<h1 v-else-if = "test ==='B'">B</h1>
			<h1 v-else >C</h1>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					test: 'A'
				}
			});
		</script>
	</body>
</html>

v-for

html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/v2.6.10/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<li v-for="item in items">
			{{item.msg}}
			</li>
		</div>
		
		<script>
			var vm = new Vue({
				el:"#app",
				data:{
					items:[
						{msg:'www.hikki.site'},
						{msg:'筆記'},
						{msg:'我的博客'},
					]
				}
			});
		</script>
	</body>
</html>

监听变量变化

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{a}}
</div>

<script type="text/javascript">
var data = { a : "变量变化前" };
var vm = new Vue({
	el   : "#app",
	data : data
});

vm.$watch('a', function(newVal, oldVal){
	console.log(newVal, oldVal);
})

vm.$data.a = "变量变化后"
</script>
</body>
</html>

生命周期的监听

可以指定事件在某个事件完成前后执行，处理特定的的事情。

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
	{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
	el : "#app",
	data : {
		msg : "hi vue",
	},
	//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
	beforeCreate:function(){
		console.log('beforeCreate');
	},
	/* 在实例创建完成后被立即调用。
	在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
	然而，挂载阶段还没开始，$el 属性目前不可见。 */
	created	:function(){
		console.log('created');
	},
	//在挂载开始之前被调用：相关的渲染函数首次被调用
	beforeMount : function(){
		console.log('beforeMount');

	},
	//el 被新创建的 vm.$el 替换, 挂在成功	
	mounted : function(){
		console.log('mounted');
	
	},
	//数据更新时调用
	beforeUpdate : function(){
		console.log('beforeUpdate');
			
	},
	//组件 DOM 已经更新, 组件更新完毕 
	updated : function(){
		console.log('updated');
			
	}
});
setTimeout(function(){
	vm.msg = "3秒后改变";
}, 3000);
</script>
</body>
</html>

小码同学

生活明朗，万物可爱

本文是原创文章，采用 CC BY-NC-SA 4.0 协议，完整转载请注明来自小码同学

喜欢这篇文章的人也看了

随便逛逛

【Docker系列】Lsky-Pro兰空图床

CentOS 7 磁盘扩容

隐私政策

评论内容

0/500

昵称

邮箱

网址

滚动到此处加载评论...

安知鱼

来自安知鱼最新设计与科技的文章

查看全部