一、MVVM框架当数据发生变化时,ViewModel就会检测到,然后通知相应的View改变当用户操作View时,ViewModel就会检测到,然后Model,修改相应的数据,最终实现双向绑定适用场景:针对具有复杂交互逻辑的前端应用;提供基础的架构抽象;通过Ajax数据持久化,保证 ...
一、MVVM框架
当数据发生变化时,ViewModel就会检测到,然后通知相应的View改变
当用户操作View时,ViewModel就会检测到,然后Model,修改相应的数据,最终实现双向绑定
适用场景:针对具有复杂交互逻辑的前端应用;提供基础的架构抽象;通过Ajax数据持久化,保证前端用户体验(好处:当对前端进行数据操作的时候,不需要刷新能整个页面,只
通过Ajax进行数据持久化,只需改变相应部分的dom,尤其是移动端)
二、vue的核心思想
1、数据驱动
只要改变数据,Vuejs会通过Directives指令对DOM进行封装,当数据发生变化,会通知相应的DOM进行变化
Vuejs会对DOM进行监听,通过DOMListeners监听视图的变化,通知数据进行改变,这样就实现了数据的双向绑定
数据相应原理
现在有一份a.b的数据,当vue对象实例化的时候,会通过es5的Object.defineproperty创建setter和getter方法,同时vuejs会生成一个指令对象(黄色部分),每个指令对象都会关联一个watcher。当我们对指令的a.b做求值时,会触发getter方法;(绿色部分)把依赖设置到了Watcher,当a.b数据发生改变时,会触发setter,通知到watcher,
watcher会对a.b就行求值,发现改变了,会通知指令,调用指令的update方法,指令是对DOM的封装,所以会更新视图
2.组件化
组件设置原则
页面上每个独立的可视/可交互区域视为一个组件
每个组件对应一个工程目录,组件所需要的各种资源在这个目录就近维护(包括JS ,CSS等)
页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面
三、Vue-cli是Vue的脚手架工具
vue-cli
地址:https://github.com/vuejs/vue-cli
安装 npm install -g vue-cli
使用 vue init webpack my-project
webpack
地址: https://github.com/vuejs-templates/webpack
注意里面的template,用webpack创建的项目,结构就是这样的
原标题:\Vuejs的笔记
关键词:JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。