Vue学习笔记

Vue中文官网：cn.vuejs.org/

一、Vue安装

Vue可以有两种使用方式，一种是下载到本地，一种是使用CDN方式

1. 本地下载

Vue的js文件有两种，一种是Vue.js，一种是Vue.min.js，区别在于Vue.js是开发时用的包，会有详细的报错的说明，告诉你错在哪里；而Vue.min.js是应用发布时所用的包，他不会提示错在哪里，为了运行速度，也没有什么注解。

使用方法如下：

<script type="text/javascript" src="你的vue.js文件所在路径"></script>
<!-- 例如 -->
<script type="text/javascript" src="./vue.js"></script>

2. CDN方式

CDN方式是不下载到本地，利用网上的Vue.js

使用方法如下：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

二、安装开发者工具并消除开发者状态提示

1. 安装开发者工具

如果是利用的本地下载，如果版本较旧的话，在网页右键，打开开发者模式的控制台，会提示进行开发者工具的下载，若是利用CDN方式的话，一般情况是没有这个提示。打开控制台1.png 打开控制台2.png 控制台提示.png 如果需要的话，在Chrome应用商店(我用的是谷歌浏览器)中下载扩展工具vue_dev_tools.crx，然后在谷歌浏览器的地址输入栏中输入chrome://extensions/进入扩展管理，将下载好的vue_dev_tools.crx拖到页面中，并且打开右上角的开发者模式，随后点击详情，开启无痕和允许访问文件网址配置开发者工具1.png 配置开发者工具2.png 随后刷新网页即可消除安装开发者工具提示信息

2. 消除开发者状态提示（可选）

在控制台中输入Vue.config会看到它的很多属性，其中有个属性是productionTip，这个就是控制是否提示的信息。

消除方法：

可以在JavaScript代码将其属性设置为false

<script>
    Vue.config.productionTip = false
</script>

若是在本地下载的Vue.js文件的话，可以直接将Vue.js文件中的productionTip属性改为false（大约在第398行，将原来的注释掉，然后换成productionTip : false）

最后就可以消除提示了，如果没有消除，也没有关系，它不会影响程序运行，只是这样控制台会干净一点

三、Hello案例

将控制台的提示设置完成后，先写一个网页示例（我是用vscode编写的代码），让其输出一个hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
</head>
<body>
    <div id="root">
        <h1>hello</h1>
    </div>
</body>
</html>

1. 安装插件Live Server(可选，但是建议安装)

安装vscode中的Live Server插件后可以在vscode中右键点击Open with Live Server Live Server.png Live Server插件会将当前项目的根目录在默认浏览器打开并默认的运行在5500端口下，如果在网页地址栏输入127.0.0.1:5500就可以看到根目录下的文件与文件夹

Live Server的功能：使用"Live Server"插件，可以通过在浏览器中实时预览网页。只需启动，它将在默认浏览器中打开HTML文件，并在编辑保存时自动刷新页面。

注意：

利用Live Server时，项目中用到的各种资源，例如Vue.js文件等，都要放在根目录或者根目录的子目录，或者子目录的子目录中，换句话说，要放在这个项目中，否则就会报资源找不到404的错误

2. 解决favicon.ico错误

当利用Live Server或者直接打开HTML时，会发现存在favicon.ico找不到的错误favicon.ico是我们网页的图标只需要将一个favicon.ico文件放到根目录下即可，文件命名为favicon.ico不可为其他名字

四、模板语法与数据绑定

下面是一段程序，简单运用Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
</head>
<body>
    <!-- 初始化一个容器 -->
    <div id="root">
        <h1>hello {{name}}</h1>
    </div>
    
    <script>
        const vm = new Vue({
            el: '#root',  //el表示element表示选中哪个容器
            data: {
                name: '小帅',  //因为选中的是root容器，所以root容器可以用data内的数据，但是需要用两个{{}}括起来
            }
        })
    </script>
</body>
</html>

如果说是将id改为class，并且有两个root，则只会对第一个生效例如下边程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="./vue.js"></script>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
</head>
<body>
    <!-- 初始化一个容器 -->
    <div class="root">
        <h1>hello {{name}}</h1>
    </div>
    <div class="root">
        <h1>hello {{name}}</h1>
    </div>
    
    <script>
        const vm = new Vue({
            el: '.root',  //el表示element表示选中哪个容器
            data: {
                name: '小帅',  //因为选中的是root容器，所以root容器可以用data内的数据，但是需要用两个{{}}括起来
            }
        })
    </script>
</body>
</html>

两个root.png 上边这个说明一个实例只能对应一个容器，其实在Vue中，一个容器也只能对应一个实例，即容器和实例是一对一的关系。如果一个容器对应两个实例，即有两个new Vue中的el都是同一个容器，则控制台会报错

Vue入门 ｜ 青训营