双向数据绑定原理
DOM是数据的一种自然映射
这里的ViewModel是一个vue实例，如果没有ViewModel我们的DOM跟数据怎么交互呢？
Vue是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter。在数据变动时发布消息给订阅者，发出相应的监听回调，达到监听数据变动的目的。
Object.defineProperty ()：
语法: Object.defineProperty(obj, prop, descriptor)
参数:
obj： 操作对象
prop： 需要操作的属性名称
descriptor： 属性具有的特性
返回值： 传入的对象, 即第一个参数obj
针对特性描述存在两种形式： 数据描述和存取器描述
Object.defineProperty 是ES5中一个无法shim的特性，这也就是为什么Vue不支持IE8以及更低版本浏览器的原因。
shim特性：指把一个库引入一个旧的浏览器, 然后用旧的API, 实现一些新的API的功能
现在有一份数据a.b，在一个vue对象实例化过程中，会给a.b这份数据通过es5 Object.defineproperty属性添加了一个getter和setter，同时vuejs会对模块做编译，解析生成一个指令对象，在这里就是一个v-text指令，每一个指令对象都会关联一个watcher，但我们对指令对应的表达式a.b求值的时候就会触发它的getter，这里我们就会把依赖生成到watcher里。当我们再次改变a.b的值时，就会触发它的setter，会通知到对应关联的watcher里，watcher就会再次对a.b求值，计算对比新旧值，当发现值改变了，watcher就会通知到指令，调用指令的update方法，由于指令是对DOM的封装，所以它就会调用原生DOM的方法去更新视图，这样我们就完成了数据改变到视图更新的自动过程。
组件化
组件化的目的是拓展HTML元素，封装可重用的代码
组件设计原则：
页面上每个独立的可视/可交互区域视为一个组件；
每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护；
页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面；
jQuery与Vue的区别
- jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作。
- Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
- 可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作。
- 这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom元素的值的变化而变化就叫做双向数据绑定。
在vue中获取dom
mounted(){ //这里必须是 mouted 钩子
this.title = document.querySelector('#footer-box-title');
this.title.style.color = "#ff0000";
}
要在mounted中使用，因为只有在执行 mounted 的时候，vue已经渲染了dom节点，这个时候是可以获取dom节点的，也可以使用ref属性获取
<button ref="btn">获取ref</button>
this.$ref.btn.style.backgroundColor="#ff0000"
网友评论