目录
MVC: Model(模型)、Controller(控制器)、View(视图)
MVP: Controller/Presenter 负责逻辑的处理、Model提供数据,View负责显示
MVVM: 使用该模式的框架-----Knockout、Ember.js、Google的AngularJS、Vue.js
引文:模型区分:
区分MVC/MVP/MVVM:
MVC: Model(模型)、Controller(控制器)、View(视图)
View一般都是通过Controller和Model进行联系。
Controller是Model和View的协调者,View和Model不直联系。基本都是单向的。
MVP: Controller/Presenter 负责逻辑的处理、Model提供数据,View负责显示
MVP是从经典MVC演变而来的。
在MVP中,Presenter完全把View和Model进行了分离,主要的程序逻辑在Presenter里实现。而且,Presenter与具体的View是没有直接关联的,而是通过定义好的接口进行交互,使View在变更的时候,可以保持Presenter不变。
MVVM: 使用该模式的框架-----Knockout、Ember.js、Google的AngularJS、Vue.js
MVVM是吧MVC的controller和MVP的Presenter改成了ViewModel,ViewModel的变化也会自动同步到view上显示。
一、数据绑定
<span>Text:{{text}}</span>
只渲染一次的数据
<span>Text:{{*text}}</span>
是HTML片段
<span>Text:{{{text}}}</span>
二、表达式
<!-- js表达式 -->
{{ cents/100 }}
{{ example.split(",") }}
<!-- 无效语句 -->
{{ var logo= 'DDFE' }}
{{ if(true) return 'DDFE' }}
允许在表达式后面添加过滤符
{{ example | toUpperCase }}
{{ example | filterA | filterB }}
{{ example | filter a b }}
三、指令
<div v-if="show">ddfe</div>
四、分隔符
可以在Vue.config中配置绑定语法。Vue.config是一个对象,包含了Vue.js的所有全局配置
分隔符在Vue.js中源码定义如下:
<!-- 源码目录src/config.js -->
let delimiters = [ '{{', '}}' ]
let unsafeDelimiters = [ '{{{', '}}} ]
<!-- 修改delimiters -->
Vue.config.delimiters = ["<%" ,"%>"]
<!-- 如果修改了默认的文本插值的方式,则使用由 {{ example }}变成了<%example%> -->
<!-- 修改unsafeDelimiters -->
Vue.config.unsafeDelimiters = ["<$" ,"$>"]
<!-- 如果修改了默认的文本插值的方式,则使用由 {{{ example }}}变成了<$example$> -->
复习参考教材:《Vue.js权威指南》