VUE学习

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