Vue学习笔记1 - Vue是什么？-CSDN博客

本文链接：https://blog.csdn.net/shi_ly/article/details/130518623

1，Vue概念

官网上（简介 | Vue.js）上说，

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。

这个还好理解，就是说它是一款前端框架，用于构建前端界面的。

但是它给一个例子，让人直接看不太懂了。

一般来说，咱们理解的前端就是 HTML+CSS+JS。

或者JSP，ASP之类的，用标签来填充变量和逻辑。

这个先放一下，以后搞明白了再说。

<官网例子>

2，Vue特点

这个摘自狂神说Java的Vue上手视频里面的，说了Vue是一款渐进式JS框架。

其他的有名的框架，像鼎鼎大名的Angular，React，

Angular的特点是将MVC模式搬到了前端，

React的特点是提出了虚拟DOM概念，用以减少真实DOM操作，提高性能，

而Vue的特点，则是将上面两个东西都引入了，即前端引入MVC模式和虚拟DOM。

<JS框架>

3，什么是虚拟DOM呢？

下面这个图摘自Vue官网上面的学习视频，虚拟DOM就是将真实DOM变成JS对象。

比如这个 HTML标签div，就用一个JS对象来代表，他们在Vue中是等价的。

--HTML
<div>Hello</div>

--JS对象

{
  tag: "div",
  children: [
    {
      text: "Hello"
    }
  ]
}

4，MVVM【Model-View-ViewModel】

那么Vue中的MVC是什么呢？

MVC本身是，M：模型；V：视图；C：控制器。

HTML标签本身就是V，而Model就是Vue中数据对象（Data），C的概念好像不太清晰，反而是出来另外一个概念，VM，即ViewModel，就是双向绑定。

也就是View变，即时反映到Model，Model变，即时反映到View。

<MVVM，摘自狂神说Java的Vue上手视频>

5，先写个HelloWorld来体验一下Vue

我是用Idea写的，别的编辑器，像VsCode，或者记忆力好的话，notepad也没问题。

这里我贴一下代码。

其中View部分，用一个带id=“app”的div来实现，Model部分，用一个 var vm= new Vue来实现。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--引入Vue-->
    <script src="../vue.min.js"></script>
</head>
<body>

<!--View部分-->
<div id="app">
{{message}}
    <span v-bind:title="message">鼠标移上来看</span>
</div>

<!--Model部分-->
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            message:"Hello,vue!"
        }
    });
</script>
</body>
</html>

运行一下，就是这样的。