官网对data属性的介绍如下:
意思就是:data保存着Vue实例里用到的数据,Vue会修改data里的每个属性的访问控制器属性,当访问每个属性时会访问对应的get方法,修改属性时会执行对应的set方法。
Vue内部实现时用到了ES5的Object.defineProperty()这个API,也正是这个原因,所以Vue不支持IE8及以下浏览器(IE8及以下浏览器是不支持ECMASCRIPT 5的Object.defineProperty())。
以一个Hello World为例,如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <title>Document</title> </head> <body> <div id="app">{{message}}</div> <button id="b1">测试按钮</button> <script> var app = new Vue({ el:'#app', data:{ //data里保存着Vue实例的数据对象,这里只有一个message,值为Hello World! message:"Hello World!" } }) document.getElementById('b1').addEventListener('click',function(){ //在b1这个按钮上绑定一个click事件,内容为修正app.message为Hello Vue! app.message='Hello Vue!'; }) </script> </body> </html>
本文Vue.javascript源码分析(四)基础篇响应式原理data属性到此结束。人有没有信念并非取决于铁链或任何其他外在的压力。小编再次感谢大家对我们的支持!