Vue学习笔记（一）

开始更新Vue.js学习笔记

---

首先是关于MVC和MVVM的概念

MVC 与 MVVM

1.MVC式后端分层开发的概念，三个字母的具体含义为：
M:Model层，主要处理数据的上下邮递；
V：View层（视图层），前端页面；
C：Controller层（业务逻辑层）；
2.MVVM式前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了Model，View，VM ViewModel；
具体关系为下图：

接下来开始介绍Vue基本代码和MVVM之间对应关系

Vue基本代码和MVVM之间对应关系

基本代码对应关系如上图，接下来介绍v-cloak、v-text与v-html

v-cloak、v-text与v-html

1.v-cloak
v-clock的用法为：

<div id="app">
    <p v-cloak>{{msg}}</p>
</div>  

使用 v-cloak能够有效解决 插值表达式闪烁问题（以及当网络卡顿时显示出插值表达式问题）

2.v-text
v-text的用法为：

<div id="app">
    <h4 v-text="msg"></h4>
</div>

默认v-text 是没有闪烁问题的,但是插值表达式只会替换自己这个占位符，不会把整个元素的内容清空，比如：

<div id="app">  
    <h4 v-text="msg">=========</h4>
</div>

这个代码段在页面上只会显示由M传来的数据，不会显示=========，而在

<div id="app">
    <p v-cloak>===={{msg}}=====</p>
</div>  

中，页面会显示=====（插值表达式数据）=====，不会把整个元素的内容清空。

3.v-html
v-html的用法为：

<div v-html="msg2">1212121</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '123',
            msg2 :'<h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>',
        }
    })
</script>

页面会按照插值表达式中的HTML格式输出，而v-cloak与v-text则会在页面输出

<h1>哈哈，我是一个大大的H1，我大，我骄傲</h1>

并且v-html也会覆盖元素中原本的内容。