vue知识点梳理（一）---总括

目录

引文：模型区分：

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权威指南》