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

àì夳堔傛蜴生んèń 2022-12-24 14:54 191阅读 0赞

**目录**

引文：模型区分：

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不直联系。基本都是单向的。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70][]         ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1][]

### **MVP:**   Controller/Presenter 负责逻辑的处理、Model提供数据，View负责显示 ###

MVP是从经典MVC演变而来的。

在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。而且，Presenter与具体的View是没有直接关联的，而是通过定义好的接口进行交互，使View在变更的时候，可以保持Presenter不变。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 2][]

### MVVM: 使用该模式的框架-----Knockout、Ember.js、Google的AngularJS、Vue.js ###

MVVM是吧MVC的controller和MVP的Presenter改成了ViewModel，ViewModel的变化也会自动同步到view上显示。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 3][]

## 一、数据绑定 ##

只渲染一次的数据

是HTML片段

## 二、表达式 ##

{
       { cents/100 }}
    {
       { example.split(",") }}
    
    
    {
       { var logo= 'DDFE' }}
    {
       { if(true) return 'DDFE' }}

允许在表达式后面添加过滤符

{
       { example | toUpperCase }}
    {
       { example | filterA | filterB }}
    {
       { example | filter a b }}

## 三、指令 ##

## 四、分隔符 ##

可以在Vue.config中配置绑定语法。Vue.config是一个对象，包含了Vue.js的所有全局配置

分隔符在Vue.js中源码定义如下：

let delimiters = [ '{
       {', '}}' ]
    let unsafeDelimiters = [ '{
       {
       {', '}}} ]
    
    
    Vue.config.delimiters = ["<%" ,"%>"]
    
    
    
    Vue.config.unsafeDelimiters = ["<$" ,"$>"]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 4][]

复习参考教材：《Vue.js权威指南》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201129152213205.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 1]: /images/20221120/d124a69acca84a50b2c1b9ec89244dcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201129153229447.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20201129161502396.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20201128233839894.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dveWl6aGl6YWl6aGFvbmk=,size_16,color_FFFFFF,t_70