夏天,他把手中的魔法棒轻轻一挥,带给咱们一片充满活力的蓝色。你瞧,蓝蓝的天空飘着朵朵白云,远处,蔚蓝的大海在夏风的吹拂下,卷起层层浪花。
官网对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属性到此结束。人有没有信念并非取决于铁链或任何其他外在的压力。小编再次感谢大家对我们的支持!