配置Vue环境&Vue第一个实例

1.前言

什么是Vue

Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

2.配置Vue编程环境

资源下载和使用

到官网下载开发版的资源下地址（右键将连接另存为），放在工作目录中使用外链式方法引用。

或者在网页中以外链式的方法引用在线资源。

1	<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

1 2	<script src="http://wange1314.tk/vue.js"></script> //如果上一个加载的慢可以用我自己的在线资源

第一个Vue实例

通过前面的方法引用完Vue的资源后就可以开始写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>Document</title>
</head>
<script src="http://wange1314.tk/vue.js"></script>
<body>
    <div id="root">
        <center>{{name}}</center>
    </div>
</body>
<script>
    new Vue({
        el:'#root',  //用于指定当前vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{  //data中用于存储数据，数据供el所指定的容器去使用 （ el=》全程element），值我们暂时先写成一个对象
          name:'第一个vue实例！！！',
        }
      })
</script>
</html>