学习Vue 入门到实战——学习笔记

闲聊：

     自从进了现在的公司，小颖就再没怎么接触vue了，最近不太忙，所以想再学习下vue，就看了看vue相关视频，顺便做个笔记嘻嘻。

视频地址：Vue 入门到实战1、Vue 入门到实战2

学习内容：

什么是vue？

官网回答：

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

视频笔记：

vue是目前最火的前端框架、react是目前最流行的前端框架（react除了开发网站，还可以开发手机app，vue语法也可以用于开发手机app，需借助Weex）

vue是一套构建用户界面的框架，只关注视图层，所以易上手，而且也便于与第三方库或既有项目整合。（vue的优点）

库和框架的区别

框架：是一套完整的解决方案，对项目的侵入性比较大，项目如果需要换框架，则需重新搭建整个项目。

库：提供一个小功能，对项目的入侵性比较小，如果某个库无法完成某些需求，可以很容易切换到其它库实现需求。

如何理解MVVM

MVVM是前端视图层的分层开发思想，分成M、V和VM，其中VM是MVVM核心思想，因为VM是M和V之间的调度者。

     ——>取            ——>  取                            M：ajax获取的数据

M               VM              V                                 VM：M、V之间的调度者

     < ——存              <—— 存                          V：每个页面中的html代码

使用MVVM的优点：为了我们开发更加方便，因为MVVM提供了数据的双向绑定。（数据的双向绑定是由VM提供的）。

vue指令：

v-cloak：能解决插值表达式闪烁问题。（经验证目前版本不存在闪烁问题 Vue.js v2.5.16）

v-text：更新元素的

textContent。如果要更新部分的

textContent，需要使用

{{ Mustache }}插值。

示例： {{msg}}

v-text与插值表达式（{{}}）的区别

v-text会覆盖元素中原来的内容，但是差值表达式只会替换自己的占位符，不会把整个元素内容清空。

示例：

+++{{msg}}---