【Vue】Vue 初学（前三节）

最新推荐文章于 2024-09-06 16:20:20 发布

菜鸟M

最新推荐文章于 2024-09-06 16:20:20 发布

阅读量148

点赞数

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

本文链接：https://blog.youkuaiyun.com/weixin_43592907/article/details/108066985

版权

Vue.js 专栏收录该内容

3 篇文章

订阅专栏

本文详细解析了Vue实例的创建过程，阐述了Vue如何使data对象中的属性响应式，以及实例方法和属性的使用。并通过实例展示了如何利用$watch方法观察变量变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
// 选项
})

1、当一个 Vue 实例被创建时，它将 data 对象中的所有的 property（属性）加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值；

下面是一个实例：

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

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

//下面的三种方法都可以改变data对象中的属性值，当值发生变化后，视图就会产生响应
data.a = 'firstbird'; 
vm.a='firstbird';
vm.$data.a='firstbird';
vm.a == data.a == vm.$data.a

</script>

需要注意的时，在改变data 对象的 property 时，只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如：vm.b=‘aa’;

<div id="app">
	{{a}} 
</div>

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

vm.b='aa';  错误，是不会发生任何变化
</script>

2、除了数据 property，Vue 实例还暴露了一些有用的实例 property 与方法。它们都有前缀 $，以便与用户定义的 property 区分开来。例如：

<div id="app">
	{{a}} 
</div>
<script type="text/javascript">
	var data = { a : 1 };
	var vm = new Vue({
		el   : "#app",
		data : data
	});
	
document.write(vm.$el==document.getElementById('app'));//true
vm.$data === data; //true 只是用来与用户定义的 property 区别分开
</script>

$watch 是一个实例方法，是用来观察一个变量的变化，记录变量变化的最新的值和原来的值，但是需要注意的是： $watch 必须要放在变量的变化之前，也就是改变变量 a 之前，否侧没有输出，下面是一个实例：

<div id="app">
	{{a}} 
</div>
<script type="text/javascript">
	var data = { a : 1 };
	var vm = new Vue({
		el   : "#app",
		data : data
	});
	
	vm.$watch('a', function(newVal, oldVal){
		console.log(newVal, oldVal);
	});
	// $watch 必须 要放在改变变量值的前面，否则么有输出！！！！！
	vm.a='我是新的值--------';
</script>