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

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页