一、初识vue

1.1vue.js的特点

易用：简单易学上手快

灵活：有繁荣的生态系统，还有很多vue相关的库

高效：使用虚拟的dom，运行速度快

1.2什么是虚拟的dom？

本是是一个js对象，用于描述视图界面结构，在vue中，每个组件都有一个render函数，每一个函数都会返回一个虚拟的dom树，这也意味着每一个组件都对应一个虚拟dom树

1.3为什么使用虚拟的dom

因为真实的dom操作会带来大量的性能损耗，当操作节点过多时，会极大地导致渲染速度变慢，**（虚拟dom如何转化为真实dom）**虚拟dom在数据发生改变时，新的dom树会和老的对比，然后vue会帮我们找出最小的更新量，更新必要的虚拟dom，最后通过虚拟dom来修改真实的dom

1.4vue设计思想

三部分MVVM

M：model数据层负责初始化数据

V：view视图层只负责页面的视图层展示

VM：view-model 视图模型层用来连接数据层和视图层

mvc和mvvc的区别
MVC包括view视图层、controller控制层、model数据层。各部分之间的通信都是单向的。 View 传送指令到 Controller Controller 完成业务逻辑后，要求 Model 改变状态 Model 将新的数据发送到 View，用户得到反馈 MVVM包括view视图层、model数据层、viewmodel层。各部分通信都是双向的。采用双向数据绑定，View的变动，自动反映在 ViewModel，反之亦然。 mvvm代表框架：Angularjs、React、Vue mvvm主要解决了mvc中大量 dom操作使得页面渲染性能降低，加载速度变慢，影响用户体验

SPA：单页面应用
一个项目只有一个web页面应用，加载单个HTML页面，并在用户与程序发生交互时，更新该页面的局部内容（但不刷新页面）

二、第一个vue应用

尝试 Vue.js 最简单的方法是使用 Hello World 例子，建议有一定的html基础的人，可以先使用vue.js的引入。
本系列中所有引入的vue.js均是开发环境版本，包含了有帮助命令行的警告网址如下：
vue.js的开发环境版本
将其右击另存为桌面中新建的vue-test文件夹中
在这里插入图片描述
新建名为test1的html文件，写出有关于vue的项目文件

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>
</head>

<body>
  <div id="app">
    {{ message }}
  </div>
  <script src="vue.js"></script>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    })
  </script>

</body>

</html>

注意：在引入vue的时候必须要写在，自己写的script标签上面，否则会没有Vue这个方法

现在的数据和dom节点已经进行了关联，可以通过尝试data中的message的值来看到dom节点中的内容进行变化

其中{{}}被成为插值语法，{{}}里面的内容就是dom所要渲染的数据内容，每一个dom所要渲染的数据内容，必须要在data对象中进行声明

除此之外，可以绑定元素的属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>初识vue</title>
</head>

<body>
  <div id="app-2">
    <span v-bind:title="message">
      鼠标悬停几秒钟查看此处动态绑定的提示信息！
    </span>
  </div>
  <script src="vue.js"></script>
  <script>
    var app2 = new Vue({
      el: '#app-2',
      data: {
        message: '页面加载于 ' + new Date().toLocaleString()
      }
    })
  </script>

</body>

</html>