vue 响应数据绑定(不兼容ie8),当数据发生改变时,会自动更新视图
利用 Object.definedProperty 中的setter / getter 代理数据,监控对数据的操作
MVVM :
M : model 数据模型 V:view 视图模板 VM:view-model 视图模型
案例:
<div id="demo">
<input type="text" v-model = "name"> // v-model 实现数据双向绑定
<p>{
{ name }}</p>
</div>
<script>
let obj = { // 数据(具有相应功能)
name:'hello'
};
var vm = new Vue({
el : '#demo', // 挂载元素
data : obj // 代理数据
});
</script>
声明式:只需要声明在哪里做什么,不用关心如何实现
命令式:需要以具体的代码表达在那里,做什么,如何实现
声明式渲染案例:
var arr = [1,2,3,4,5,6];
var newArr = arr.map(function(item){ // 只要用arr.map这个方法,就能实现数组中的每项变成原来的二倍
return item * 2;
})
console.log(newArr);
命令式案例:
var arr = [1,2,3,4,5,6];
var newArr = [];
for(var i=0;i<arr.length;i++){ // 必须一步一步的操作,跨过某一步,都不能完成数组中的每项变为原来二倍的操作
newArr.push(arr[i]*2);
}
console.log(newArr);
指令:指令的职责就是当其表达式的值发生改变时相应地将某些行为应用到DOM上