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

    idea用腻了，索性换vscode玩玩
    安装了vscode的liveserver与中文包

    新建文件夹，然后创建一个html页面，输入以下代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.         <title>Document</title>
    8.     </head>
    9.     <body>
    10.         <div id="app">{{message}}</div>
    11.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    12.         <script>
    13.             var app = new Vue({
    14.                 el:"#app",
    15.                 data:{
    16.                     message:"hello,world"
    17.                 }
    18.             })
    19.         </script>
    20.     </body>
    21. </html>

    这里说明以下el与data
    el表示挂载点，与css选择器类似，#代表id、.代表class、标签选择器，但要注意标签选择器只能匹配第一个标签
    作用范围为el选项命中的元素及其内部的后代元素
    可以使用其他双标签，除了body、html

    data表示数据，vue中用到的数据定义在data中，data也可以写入复杂的数据，比如数组，渲染时要遵守js的语法
    样例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.     <head>
    4.         <meta charset="UTF-8">
    5.         <meta name="viewport" content="width=device-width,initial-scale=1.0">
    6.         <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.         <title>Document</title>
    8.     </head>
    9.     <body>
    10.         <div id="app">
    11.             {{message}}
    12.             <h2>{{school.name}} {{school.mobile}}</h2>
    13.             <li>{{address[0]}}</li>
    14.         </div>
    15.         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    16.         <script>
    17.             var app = new Vue({
    18.                 el:"#app",
    19.                 data:{
    20.                     message:"hello,world",
    21.                     school:{
    22.                         name:"张三",
    23.                         mobile:"13677778888",
    24.                     },
    25.                     address:["太原","北京"]
    26.                 }
    27.             })
    28.         </script>
    29.     </body>
    30. </html>

    页面：
    截屏2020-11-09 下午8.58.37.png