vue是一种MVVM框架 数据映射视图 响应式框架（数据发生改变时 视图也发生变化 视图发生变化时 数据同样发生变化 双向数据绑定）
- MVVM ：model（数据层） view（视图层） view-model（视图模型层）通过视图模型把数据层和视图层联系起来 可以双向数据绑定 也可以单向数据绑定
- MVC ：model view controller(控制器层) 控制器层是链接数据和视图的 一般是单向数据流 通过Controller 把数据绑定到视图中
let vm = new Vue({
el:'#app',
data:{
product:'Apple Mac Pro',
user:{
name:'张三',
age:13,
title:'老师'
}
}
})
小胡子语法 {{}}
双向数据绑定原理
vue 利用Object.defineProperty 这个方法遍历data中所有的属性 给每个属性增加了一个setter 和 getter方法 当数据发生变化时 会触发setter方法 当获取数据时 会触发getter方法 **Object.defineProperty在IE8以下不兼容 **
.html
<body>
<input type = 'text' id = 'input'>
<div id = 'app'>
<script src = '1.js'></script>
</div>
</body>
1.js
let input = document.getElementDyId('input');
let app = document.getElementById('app');
// defineProperty 是一个函数，用来定义对象属性的特性；是 Object 的静态方法
Object.defineProperty(obj,'name',{
get(){
return this._name;
},
set(val){
this._name = val;
app.innerHTML = this._name;
// vue 使用的是发布订阅模式，vue 会收集页面中所有绑定数据的元素，这些相当于订阅了 data 里面的数据变更的事件，当数据发生变更时，会触发 set 方法，在 set 方法中会把所有的使用这个属性的元素的值更新成最新的值（发布事件）；
}
})
// v-model 的原理也是利用了 DOM 事件，当表单元素的值发生变化时，设置对象的属性，然后设置对象的属性的时候，会触发 set 方法，在 set 方法中，会去修改所有依赖这些值的地方
input.oninput = function(){
obj.name = this.value;
}
修改属性的方法
- 修改 vm属性上的值 vm.user.name = 'zhangsan'
- 使用
set(vm.user,'name','zhangsan')
- 使用
set(vm.user,'age',13)
vue常用指令
- v-model 把表单中的value 和data中的某个属性绑定在一起
- v-text 把数据绑定到 DOM元素中 且具有响应式 会把之前的数据覆盖掉 v-text不识别标签
- v-html 可以识别标签
- v-if 属性值为true时 显示当前元素 若是false 当前元素不显示 但是会显示v-else中的内容
- v-show 属性值为true 显示元素 为false 隐藏元素
- v-if 控制DOM元素 若为false 页面中没有这个元素 v-show是设置元素的display
- v-bind 用于绑定动态属性 并且可以简写成一个 ： v-bind后 这个属性就可以使用data中该属性的值
- v-for 用于列表渲染 根据给定的值生成多个相同元素
- v-for Array 数组有多少项就生成多少个li
- {{a.name}}{{a.age}}
- v-for Object 对象有多少个 key 就生成多少 li
- {{a}}{{b}}
- v-for num 生成num个 li
- {{a}}{{b}}
- v-for str 生成 str.length个li
- {{a}}{{b}}
