标签：script span 9.png 需要 val 应用 == com 代码
每个Vue应用都是通过Vue函数创建一个新的Vue实例开始,代码如下:
var vm=new Vue({});
{}是创建Vue应用时的参数对象
1、Vue实例的data属性
当一个Vue对象被创建时,它向Vue的响应式系统中加入了其参数对象的data属性中所有的属性,当data属性中的属性发生改变时,视图会随之产生改变,根据新的属性值更新视图.代码如下:
<body> <div id="tDiv"> {{message}} </div> </body> <script> var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标dom元素的Id //绑定数据源 data:{ message:"Hello World By Vue" } }); </script>
现在通过控制台改变data属性中的message属性,如下图:
可以发现视图也发生了对应的改变.
但是,这里需要注意的是只有哪些在实例被创建时就已经注册到data属性中的属性是响应式的,也就是说如果你后期向data属性中追加了属性,并且修改了该属性值,属兔是不会发生任何改变的.
如果你知道你可能在晚些的时候需要用到一个属性,但是它一开始不存在或者为空,那么你仅需要给该属性设置一个初始值
2、Vue实例暴露的有用的实例属性和方法
Vue实例暴露了一下有用的实例方法和属性,他们都有前缀$,以便于用户定义的属性区分开来,例如:
var data={a:1}; var currentPage=new Vue({ el:"#tDiv", //指定绑定的目标dom元素的Id //绑定数据源 data:data }); console.log(data===currentPage.$data); console.log(currentPage.$el); currentPage.$watch(‘a‘, function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
标签：script span 9.png 需要 val 应用 == com 代码
原文地址：http://www.cnblogs.com/GreenLeaves/p/7773991.html
