java-microservice-01-vue-03-data-and-method_text标签 datavar-CSDN博客

本文链接：https://blog.csdn.net/henrychow_2015/article/details/122411705

java-microservice-01-vue-03-data-and-method

命名数据对象和匿名数据对象：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数据与方法</title>
		<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
	</head>
	<body>
		<div id="id1">
			a:{{a}}
		</div>
		<div id="id2">
			b:{{b}}
		</div>
		<script type="text/javascript">
			var dataVar = {
				a: "1"
			}
			// 以命名对象形式将数据加入到vue实例
			var vm1 = new Vue({
				el: "#id1",
				data: dataVar
			})
			// 以匿名对象形式将数据加入到vue实例
			var vm2 = new Vue({
				el: "#id2",
				data: {
					b: "2"
				}
			})
		</script>
	</body>
</html>

Vue实例过程中，数据参数可以是命名数据对象，也可以是匿名数据对象。
展示效果如下：

修改数据以出发视图响应：

方式一：修改[dataVar]对象中的[a]属性值
```
dataVar.a = "123";
```
方式二：修改[vm]对象中的[a]属性值
```
vm1.a="123";
```
方式三：修改[vm]对象中的[data]实例中的[a]属性值
```
vm1.$data.a="123"
```

以上三种方式都可以实现同一个视图响应效果：

实例方法：

Vue暴露了一些实例属性和方法，以 $开头，用来区分用户自定义的属性和方法，例如：

vm1.$watch("a", function(newVal, oldVal) {
	console.log("oldVal:" + oldVal + "\t->\tnewVal:" + newVal);
})

然后我们在浏览器控制台中对a进行修改：

watch方法详细用法参考官方api