vue
原理
是一套用于构建用户界面的渐进式框架。与其它大型 框架不同的是,
Vue
被设计为可以自底向上逐层应用。
Vue
的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的 工具链以及各种支持类库结合使用时,
Vue
也完全能够为复杂的单页应用提供驱动。
- 渐进式
框架做分层设计,每层都可选,不同层可以灵活接入其他方案。而当你都想用官方的实现时,会发现也早已准备好,各层之间包括配套工具都能比接入 其他方案更便捷地协同工作。 一个个放入,放多少就做多少。
MV*模式(MVC/MVP/MVVM)
MVC
model view controller
用户的对View操作以后,View捕获到这个操作,会把处理的权利交移给
Controller(Pass calls);Controller会对来自View数据进行预处理、决定
调用哪个Model的接口;然后由Model执行相关的业务逻辑(数据请求);
当Model变更了以后,会通过观察者模式(Observer Pattern)通知View;
View通过观察者模式收到Model变更的消息以后,会向Model请求最新的数
据,然后重新更新界面。
把业务逻辑和展示逻辑分离,模块化程度高。但由于View是强依赖特定的 Model的,所以View无法组件化,无法复用
MVP
model view presenter
和MVC
模式一样,用户对View
的操作都会从View
交移给Presenter
。 Presenter
会执行相应的应用程序逻辑,并且对Model
进行相应的操作;而这 时候Model
执行完业务逻辑以后,也是通过观察者模式把自己变更的消息传 递出去,但是是传给Presenter
而不是View
。Presenter
获取到Model
变更的 消息以后,通过View
提供的接口更新界面。
View不依赖Model,View可以进行组件化。但Model->View的手动同步逻 辑 麻烦,维护困难
MVVM
model view viewmodel
MVVM
的调用关系和MVP
一样。但是,在ViewModel
当中会有一个叫 Binder
,或者是Data-binding engine
的东西。你只需要在View
的模版语法 当中,指令式地声明View
上的显示的内容是和Model
的哪一块数据绑定的。 当ViewModel
对进行Model
更新的时候,Binder
会自动把数据更新到View
上 去,当用户对View
进行操作(例如表单输入),Binder
也会自动把数据更新 到Model
上去。这种方式称为:Two-way data-binding
,双向数据绑定。可 以简单而不恰当地理解为一个模版引擎,但是会根据数据变更实时渲染。 解决了MVP
大量的手动View
和Model
同步的问题,提供双向绑定机制。提高 了代码的可维护性。对于大型的图形应用程序,视图状态较多,ViewModel
的构建和维护的成本都会比较高。
数据绑定原理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fF5dec3f-1640694550369)(Images/深入响应式原理.png)]
调用
国内CDN
https://cdn.staticfile.org/vue/2.2.2/vue.min.js
我的阿里OSS
https://webplus-cn-beijing-s-5f12835a3dd7f938e565a84d.oss-cn-beijing.aliyuncs.com/Script/vue.js
https://webplus-cn-beijing-s-5f12835a3dd7f938e565a84d.oss-cn-beijing.aliyuncs.com/Script/vue.min.js
我的阿里OSS CDN
https://scriptcdn.11451400.xyz/scripts/vue.js
https://scriptcdn.11451400.xyz/scripts/vue.min.js
tencent COS
https://yjs666-1304700566.cos.ap-nanjing.myqcloud.com/Scripts/vue.js
https://yjs666-1304700566.cos.ap-nanjing.myqcloud.com/Scripts/vue.min.js
起步
模板语法
- 插值
- 文本
{ {}}
- 纯
HTML
v-html
- 文本
指令
v-on
绑定事件的指令
<button v-on:click="handleClick()">change</button>
<button @click="handleClick()">change</button>
v-show
动态显示和隐藏 传入的参数为True
或者False
<div v-show="isShow">我是动态隐藏显示</div>
v-bind
动态绑定
<div v-bind:class="isActice ? 'red':'yellow' ">动态切换背景色</div>
<div :class="isActice ? 'red':'yellow' ">动态切换背景色</div>
v-for
遍历数组的指令
<ul >
<li v-for="(item,index) in datalist">
{
{item}}------{
{index}}
</li>
</ul>
v-for
遍历元素时 参数为value
预定义参数为index
,name
-
index
为元素对应的索引值 -
name
为元素对应的key
值 -
v-if
动态创建和删除 传入的参数为True
或者False
<div v-if="isCreated">我是动态创建和删除</div>
v-html
解析html的指令
<div v-html