Vue 学习笔记01：入门_vue入门学习笔记-CSDN博客

本文链接：https://blog.csdn.net/realoser/article/details/123652361

Vue 学习笔记01：入门

一、下载 Vue
二、上手 Vue

一、下载 Vue

进入 Vue 官网，点击教程
点击安装，会显示两个版本。开发版本用于学习，生产版本用于项目开发。
因为是第一次上手，所以使用开发版本。下载好后，和平常一样再文档中引入 Vue.js

<script src="./js/vue.js"></script>

二、上手 Vue

新建一个文档，然后引入 Vue，打开后会有 2 个提示，一个错误。
在这里插入图片描述
第一个提示是下载 Vue-devtools，第二个提示是建议项目开发时不要使用开发版本。错误是指没有找到网页 logo。

1. 下载 Vue-devtools

点击链接，会进入 vue-devtools 的 Github 界面。
下拉滚动条，点击 Install the extension，然后会跳转到下载界面。
根据自己的浏览器，选择不同的版本。我用的微软Edge，可以兼容谷歌插件，所以选择第一个
点击后，进入谷歌商城，点击 Add to Chrome。
点击添加扩展
安装完成后，点击右上角三个点，再点击扩展。
可以看到 Vue.js devtools 已经存在，点击详细信息。
勾选允许访问文件 URL

2. 阻止生产提示

经过安装 Vue.js devtools，可以看到提示已经少了一个，现在解决第二个提示。
在文档 JavaScript 脚本中第一句添加下面代码：

Vue.config.productionTip = false;

3. 引入网页 logo

经过上面的操作，两个提示都已经被解决了，现在解决错误。
自己找一个 .ico 的文件，复制到根目录下，页面强刷新。
就能看到网页 logo 已经存在，错误也不见了。

4. 创建 Vue 实例

想要 Vue 工作，就必须创建一个 Vue 实例，且要传入一个配置对象。
root 容器中的代码依然符合 html 规范，只不过混入了一些特殊的 Vue 语法。
root 容器中的代码被称为 Vue 模板。
Vue 实例与容器一一对应。
真是开发中只有一个 Vue 实例，并且会配合着组件一起使用。
{{XXX}} 被称为插值语法，当中的 XXX 要写 Js 表达式，且 XXX 可以自动读取到 data 中的所有属性，
一旦 data 中的数据发生变化，那么模板中用到该数据的地方也会自动更新。

<head>
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="root"><h1>Hello, {{name}} </h1></div>
    <script>
        Vue.config.productionTip = false;
        // 创建 Vue 实例，传配置对象
        new Vue({
            el: '#root', // el 用于指定当前Vue实例为哪个容器服务，值通常为 css 选择器字符串
            data: { // data 中用于存储数据，数据供 el 所指定的容器所使用
                name: 'World!',
            },
        });
    </script>
</body>
</html>