你的位置:首页 > 软件开发 > 网页设计 > \Vuejs的笔记

\Vuejs的笔记

发布时间:2017-02-14 12:00:20
一、MVVM框架当数据发生变化时,ViewModel就会检测到,然后通知相应的View改变当用户操作View时,ViewModel就会检测到,然后Model,修改相应的数据,最终实现双向绑定适用场景:针对具有复杂交互逻辑的前端应用;提供基础的架构抽象;通过Ajax数据持久化,保证 ...

一、MVVM框架

\Vuejs的笔记

当数据发生变化时,ViewModel就会检测到,然后通知相应的View改变

当用户操作View时,ViewModel就会检测到,然后Model,修改相应的数据,最终实现双向绑定

适用场景:针对具有复杂交互逻辑的前端应用;提供基础的架构抽象;通过Ajax数据持久化,保证前端用户体验(好处:当对前端进行数据操作的时候,不需要刷新能整个页面,只

通过Ajax进行数据持久化,只需改变相应部分的dom,尤其是移动端)

二、vue的核心思想

   1、数据驱动

   \Vuejs的笔记

  只要改变数据,Vuejs会通过Directives指令对DOM进行封装,当数据发生变化,会通知相应的DOM进行变化

  Vuejs会对DOM进行监听,通过DOMListeners监听视图的变化,通知数据进行改变,这样就实现了数据的双向绑定

  数据相应原理

  \Vuejs的笔记

       现在有一份a.b的数据,当vue对象实例化的时候,会通过es5的Object.defineproperty创建setter和getter方法,同时vuejs会生成一个指令对象(黄色部分),每个指令对象都会关联一个watcher。当我们对指令的a.b做求值时,会触发getter方法;(绿色部分)把依赖设置到了Watcher,当a.b数据发生改变时,会触发setter,通知到watcher,

watcher会对a.b就行求值,发现改变了,会通知指令,调用指令的update方法,指令是对DOM的封装,所以会更新视图

2.组件化

\Vuejs的笔记

组件设置原则

 页面上每个独立的可视/可交互区域视为一个组件

 每个组件对应一个工程目录,组件所需要的各种资源在这个目录就近维护(包括JS ,CSS等)

 页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面

 三、Vue-cli是Vue的脚手架工具

\Vuejs的笔记

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

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。