初识Vue

一、什么的Vue

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

按我来说：首先Vue是一套用于构建用户界面的渐进式的JavaScript框架，那肯定又有人迷了，什么的构建用户界面，什么的渐进式啊，这不是还看不明白吗，坑人博客不看了...

下面我就为大家一一讲解一下这些看不懂的名词

1.什么的构建用户界面：

 当我们获取到了一个数据时，Vue不管这个数据是怎么来的，服务器传递也罢，接口传递也罢，Vue的任务就是把这个数据，渲染到合适的位置、合适页面当中去，而这个过程就是构建用户界面

2.什么的渐进式

可以理解为自底向上逐层的应用，再通俗来讲就是，Vue可以想用那个就用那个，当你只有一个页面的时候，Vue就一个组件，当你有多个页面的时候，Vue不会调用所有的组件，而是你要那个组件，我给你那个组件，按我的理解就是：不多管闲事，只做自己责任之内的事情。

3.什么的框架

框架大白话就是可以提高，我们程序猿的开发效率，使开发变的简单。而且框架的使用都有约定俗成的操作规范，无论任何人使用，只要按照规范操作，就可以轻松使用。

---

二、MVVM设计模式

什么的MVVM设计模式呢，再说MVVM之前，我们先简单了解一下MVC设计模式

 而MVVM设计模式和MVC设计模式的不同点就在于C（控制器）

MVVM设计模式解析就是：M为模型，V为视图（也就是html），VM为视图模型

什么是视图模型？       

视图模型即可以实现数据的双向绑定，假如一个input框里面，是我要传输的值，我输入一个在下是姜泥断了姒，那么后台就会接收到在下是姜泥断了姒。而我如果不想输入这个了，我想输入姜泥断了姒，那么后台就会接收姜泥断了姒。从而把数据渲染到页面上去。

 注意：这里有人疑惑了，为什么VM进行DOM操作，就会减轻系统负担，不都是进行DOM操作吗？

这里就涉及到了，真实DOM和虚拟DOM

---

三、真实DOM和虚拟DOM

真实DOM

 虚拟DOM

 

---

 四、Vue入门程序

1.引入vue.js

<!--引入vue.js-->
<script src="../../public/js/vue.min.js"></script>

2.创建容器

<!--    创建容器-->
<div id="container">
    <h1>{{code}}</h1>
    <h1>{{name}}</h1>
    <h2>{{message}}</h2>
</div>

3.渲染数据

<script>
    // 1、创建Vue对象   参数：对象【配置项（容器地址，数据....）】
    new Vue({
        //el 为创建容器的类名
        el:"#container", 
//data  如果code为200，但是容器里面没有code这个占位符，则不会显示code这个数据
        data:{
            name:"今天学习了Vue",
            message:"感觉怎么样？",
            code:200
        }
    });
</script>

---

在下初识Vue，愿我们也可以一起努力。