Vue学习之基础入门

MVVM是前端视图层的分层开发思想，主要把每个页面，分成了M，V和VM，其中VM是MVVM的思想核心：因为VM连接着M和V。

前端页面中使用MVVM的思想，主要是为了让我们开发MVVM提供了数据的双向绑定，双向绑定是由VM提供的

二、Vue基本使用

=====================================================================================================================================

此次代码工具是Visual Studio Code,小伙伴可自行下载安装。

1.第一个案例

---

代码如下:

{{ msg }}

注意代码中的注释！

访问页面

2.常用指令

---

指令 | 描述

------- | -------------------------------------------

{{}} | 插值表达式

v-cloak | 解决 插值表达式闪烁的问题

v-text | 和插值一样也是使用vue中的变量，但是默认没有闪缩问题，但是会覆盖原本的内容，插值不会

v-html | 显示HTML的内容

v-bind | Vue提供的属性绑定机制，缩写是 ‘:’

v-on | Vue提供的事件绑定机制，缩写是:’@’

2.1 插值表达式

在HTML页面中我们需要获取Vue中的数据，这时我们可以通过插值表达式来获取，如下

{{ msg }}

注意：插值表达式有闪缩的问题

我们以站点的方式启动，Ctrl+shift+p ：在输入中搜索 如下

访问地址：http://localhost/xxx.html

加载完成就会变好！这就是插值闪烁的问题

2.2 v-cloak

v-cloak指令可以解决上面插值闪烁的问题，如下：其实利用的就是当插值没有被加载出来的是通过 style属性将内容给隐藏了。

++++++++ {{ msg }} ----------

2.3 v-text

和插值差不多，也可以从vue对象中获取信息，v-text默认是没有闪烁问题的，但是会覆盖掉原有的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空，如下

----{{msg}}=====

*******

2.4 v-html

默认我们从Vue对象中获取的信息如果含有HTML标签的话只会当做普通字符串显示，如果我们要显示标签的语义，那么需要使用v-html指令如下

----{{msg}}=====

*******