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

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实例过程中，数据参数可以是命名数据对象，也可以是匿名数据对象。
展示效果如下：

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

  1. 方式一：修改[dataVar]对象中的[a]属性值
    2. dataVar.a = "123";
  2. 方式二：修改[vm]对象中的[a]属性值
    3. vm1.a="123";
  3. 方式三：修改[vm]对象中的[data]实例中的[a]属性值
    4. vm1.$data.a="123"
以上三种方式都可以实现同一个视图响应效果：

实例方法：

Vue暴露了一些实例属性和方法，以$开头，用来区分用户自定义的属性和方法，例如：
vm1.$watch("a", function(newVal, oldVal) {
	console.log("oldVal:" + oldVal + "\t->\tnewVal:" + newVal);
})
然后我们在浏览器控制台中对a进行修改：

watch方法详细用法参考官方api
posted @ 2022-01-10 15:27  zhoux_top  阅读(26)  评论(0)  编辑  收藏  举报