前端框架Vue学习01

1、概要介绍
Vue是时下最流行的一种前端开发框架，在当前的Vue开发框架中，主要采用MVVM的分层开发思想，主要把每个页面分成M、V、和VM，其中VM是整个MVVM思想的核心，是M和V之间的调度者。下图是一个项目的前后端处理过程示意图（来自b站）

2、下载使用
从官网https://cn.vuejs.org/v2/guide/installation.html下载到本地，放到指定目录下，打开vscode，在html文档中引入，如下图所示。

MVVM分层开发的思想在代码中体现为：首先在script中new一个Vue实例，el声明要控制的页面上的哪个区域即视图层V,data即是MVVM中的M(第一个)，存放的是el中需要用到的数据，通过Vue指令msg可以被渲染到页面上，不需要再去手动操作DOM(例如document.getElementById(“wb”).InnerHTML)，而new出来的vm对象即是VM即调度者，如下图所示。

3、基本知识点
插值表达式：{{ }}，插值表达式中 不可以写代码片段 会报错，里面存放的是data中的变量，即用来控制el所指明的区域。

v-cloak

当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。可以使用 v-cloak 指令来解决这一问题。

v-text

v-text只能显示Vue对象传递过来的数据，如果节点里有内容，会将其替换。这和插值表达式有所区别，插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起。https://www.cnblogs.com/shibin90/p/10312969.有详细介绍。

v-html

与之绑定的节点可以在M即data中的声明中解析html标签。
详解：https://www.cnblogs.com/shibin90/p/10314112.html

v-bind

Vue提供的属性绑定机制，缩写是“ ：”,当绑定属性后，此属性的值即可当成一个变量处理，即v-bind中可以写合法的JS表达式。

v-on

Vue提供的时间绑定机制，相当于原生JS中的onClick事件。缩写是“@”。

v-model

Vue中指定的唯一可以双向数据绑定的指令，v-bind只能实现数据的单向绑定 从M -> V。使用v-model 指令，可以实现表单元素和model中数据的双向数据绑定，注意：该指令只能运用在表单元素中，例如，input(radio text address email …) select cheeckbox textarea等等。

上图中将input中的“值”进行了双向绑定，也就是说当input中的值改变时，msg变量的值也会改变。


今晚先到这里。。。