vue初学者入门（上）

最新推荐文章于 2023-07-03 18:20:50 发布

莫橙

最新推荐文章于 2023-07-03 18:20:50 发布

阅读量201

点赞数

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

本文链接：https://blog.csdn.net/m0_56265442/article/details/124140853

版权

Vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.创建第一个vue项目
用src引入vue.js，创建第一个简单的项目。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		//视图 
		<div id="app">
			// 声明变量message，name
			{{message}}  
			{{name}}  
		</div>
		//脚本 
		<script type="text/javascript">
		// 创建全局变量vue，属性el用id选择器获得标签app，属性data初始化message,name变量并且赋值
			var app = new Vue({
				el:'#app',   
				data:{
					message:'Hello World!'
					name:'莫橙ing',
				}
			});
		</script>
	</body>
</html>

结果：
浏览器展现
2.数据与方法
当一个vue实例被创建时，它将data对象中的所有的属性加入到vue的响应式系统中，当这些属性的值发生改变时，试图将会产生响应，即匹配更新为新的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 视图 -->
		<div id="app">
			{{a}}
		</div>
		<!-- 脚本 -->
		<script type="text/javascript">
		var data = {a : 'happy'};  //给a赋值happy
		var vm = new Vue({
			el:"#app",
			data:data
		});
		
		vm.$watch('a',function(newVal,oldVal){
			console.log(newVal,oldVal);
		})
		
		// 给a修改新值
		vm.$data.a = "Hello World----"
		</script>
	</body>
</html>

结果：
浏览器控制台展示
3.生命周期
例子简单说几个函数，其他见vue.js官网。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- <script src="https://unpkg.com/vue@next"></script> -->
		<script src="js/v2.6.10/vue.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 oberver），属性和方法的运算，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 = "change----";
		},5000);
		</script>
	</body>
</html>