Vue基础：数据与方法

声明数据的另一种方法

<div id="app">
			{{ a }}
		</div>
		<script type="text/javascript">
			var data = { 
				a: 1 ,
			}


			var vm = new Vue({
				el: '#app',
				data:data
			})
		</script>

单向数据绑定

改变data的值，网页显示也会改变

var data = { 
				a: 1 ,
			}


			var vm = new Vue({
				el: '#app',
				data:data
			})
			data.a="hello world"
			vm.a="test"

变量要提前声明

变量要提前声明，否则不起作用： 值得注意的是只有当实例被创建时就已经存在于 data

中的 property 才是响应式的。也就是说如果你添加一个新的 property，比如

		<div id="app">
			{{ a }} {{b}}
		</div>
		<script type="text/javascript">
			var data = { 
				a: 1 ,
			}


			var vm = new Vue({
				el: '#app',
				data:data
			})
			data.a="hello world"
			vm.b="test456"
		</script>

那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，但是一开始它为空或不存在，那么你仅需要设置一些初始值：

		<div id="app">
			{{ a }} {{b}}
		</div>
		<script type="text/javascript">
			var data = { 
				a: 1 ,
				b:null
			}


			var vm = new Vue({
				el: '#app',
				data:data
			})
			data.a="hello world"
			vm.b="test456"
		</script>

Object.freeze()函数

这里唯一的例外是使用 Object.freeze()，这会阻止修改现有的 property，也意味着响应系统无法再追踪变化。

<div id="app">
			{{ a }} {{b}}
		</div>
		<script type="text/javascript">
			var data = { 
				a: 1 ,
				b:null
			}

            Object.freeze(data)
			var vm = new Vue({
				el: '#app',
				data:data
			})
			data.a="hello world"
			vm.b="test456"
		</script>

（？）实例 与方法

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