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>
展示效果如下：
修改数据以出发视图响应：
- 方式一：修改[dataVar]对象中的[a]属性值
- 方式二：修改[vm]对象中的[a]属性值
- 方式三：修改[vm]对象中的[data]实例中的[a]属性值
dataVar.a = "123";vm1.a="123";vm1.$data.a="123"实例方法：
Vue暴露了一些实例属性和方法，以$开头，用来区分用户自定义的属性和方法，例如：vm1.$watch("a", function(newVal, oldVal) {
console.log("oldVal:" + oldVal + "\t->\tnewVal:" + newVal);
})watch方法详细用法参考官方api