搭建Vue环境——我的第一个Vue页面

2023-09-06 335 阅读1分钟

搭建Vue开发环境及编写一个简单的页面

简单安装Vue（推荐新入手时用这个方法）

打开Vue 官网文档，选择直接用<script>引入

选择开发版本进行安装
打开 VsCode，新建一个 Vue 环境测试文件夹，在该文件夹下新建一个Vue环境测试.html文件，引入vue.js文件。
用浏览器打开该文件，切换到控制台窗口，看到这两条消息提示即为引入 Vue 成功。
验证 Vue 构造函数：在控制台输入Vue然后回车，看到如下代码即为成功调用Vue构造函数
安装vue-devtools：安装该工具能够更方便的调试Vue程序。
1. 进入vue-devtools仓库，选择install the extension
2. 在弹出的页面中选择自己的浏览器下载插件，下载不下来的可以下这个进行安装。
关闭生产提示：打开vue.js源文件，在里面搜索productionTip，将其值设置为false，保存即可。

至此，Vue环境搭建完成。

我的第一个Vue页面

在刚才的Vue环境测试.html文件中编写如下代码

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好，{{name}}！</h1>
    </div>
</body>
<script>
    //创建Vue实例
    new Vue({
        el:'#root',  //用于指定当前Vue容器为哪个容器服务，值通常为CSS选择器字符串
        data:{  //data中用于存储数据，数据供el所指定的容器使用
            name:'Vue'
        }
    })
</script>

运行结果如下图所示：

总结

想让Vue工作，就必须创建一个Vue实例，并且要传入一个配置对象；

root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

root容器里的代码被称为Vue模板，由{{}}组成，模板可以是js中的表达式;

容器和实例之间只能是一对一的关系，一个实例只能对应一个容器。

真实开发中只有一个Vue实例，并且会配合着组件一起使用;

一旦data中的数据发生改变，那么模板中用到该数据的地方也会自动更新。