Vue学习----第二课

最新推荐文章于 2023-06-23 23:53:16 发布

大炜丶

最新推荐文章于 2023-06-23 23:53:16 发布

阅读量183

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/nw336699/article/details/81133391

版权

vue.js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.创建Vue实例和数据操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<title>Vue1-2</title>
	</head>
	<body>
		<script src="https://unpkg.com/vue"></script>
			<div id="app">
				<p>{{ foo }}</p>
				<!--这里的foo不会更新！ -->
				<button v-on:click="foo = 'baz'">Change It</button>
			</div>
		<script>
		
			//定义一个数据对象并赋值
			var data = { a:1 }		
			//定义一个vue实例，并将data对象放入vue实例中
			var vm= new Vue({
				data : data
			})
			
			//获得vue实例的属性，返回源数据中对应的字段
			if(vm.a = data.a) alert("Equal!!");			// =>true 
			//设置实例中对象的属性值也会影响到原始对象里面的值
			vm.a = 2;
			alert(data.a);
			//反之亦然
			data.a=3;
			alert(vm.a);
			
			
			var obj = {
				foo : 'bar'
			}
			<!--Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。-->
			Object.freeze(obj);
			new Vue({
				el: '#app',
				data : obj
			})
			<!-- ******************************************************************-->
			var data2 = {a:1}
			var vm2 = new Vue({
				el: '#example',
				data : data2
			})
			//通过前缀$（前缀$是vue自身带的一些有用的属性和方法），
			//用来与用户定义属性区分
			if(vm2.$data == data) alert("Equal!!");
			if(vm2.$el == document.getElementById("example")) alert("id Equal..");
			//$watch 是一个实例方法，观察 Vue //实例变化的一个表达式或计算属性函数。回调函数得到的参数为新值和旧值。
			//表达式只接受监督的键路径。对于更复杂的表达式，用一个函数取代。
			//(简单来说就是观察一个值的变化，如果发生变化了，就会调用里面的方法)
			vm2.$watch('a',function(newValue,oldValue){
				//这个回调将在vm2.a改变后调用
			})
		
		</script>
		
	</body>
</html>

2.实现生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

2.1生命周期图示

3.实例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<title>Vue1-3</title>
	</head>
	<body>
		<script src="https://unpkg.com/vue"></script>
		<script>
			new Vue({
				data:{a:1},
				//created 钩子在vue实例创建后执行后面的方法
				created : function(){
					alert('a is '+ this.a);
				}
				//也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 
                                //mounted、updated 和 destroyed。
				//生命周期钩子的 this 上下文指向调用它的 Vue 实例。
			})
		</script>
		
	</body>
</html>

以上来自于https://cn.vuejs.org/v2/guide/instance.html