调用Vue

有两种方法：

使用<script src="js/vue.js"></script>直接调用Vue文件
使用NPM来使用Vue(第一篇安装教程)

前面学习的时候首先使用第一种方法来调用Vue。

Vue实例化体验

创建js文件夹，然后将cdn上的Vue代码在本地创建一个vue文件来存放。
CDN链接:https://unpkg.com/vue@3.0.11/dist/vue.global.js

首先体验一下Vue实例化，实例化的对象可以绑定html中指定的标签，接着可以使用data属性传输数据至标签中。

新建1.html:

<!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>
<script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        {{title}}
        <h1>{{des}}</h1>
    </div>
    
</body>
</html>

<script>
    var app = new Vue({
        el: "#app",  // el用来绑定对象，"#"用来绑定标签的id选择器
        data: {       // data可以存储数据，在html中可以直接使用{{}}来调用其中的数据
            title: "我的世界", 
            des: "minecraft"
        }
    })
</script>

8行：用来导入vue文件
11-14行：声明一个id选择器为app的div标签
18-26行：实例化一个vue对象，使用el绑定div标签
23行：使用vue对象实例化的data属性，其中添加两对键值
12、13行：使用{{}}插值表达式来读取之前在data中的数据

观察效果：

可以看到成功将data中定义的数据，传输到了绑定的指定标签中来，并且可以利用嵌套标签，对数据的样式做进一步的改变。

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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app1">
        <h1>{{title}}</h1>
    </div>

    {{title}}

    <div id="app2">
        <em>{{title}}</em>
    </div>
</body>
</html>

<script>
    new Vue({
        el:"#app1",  // 绑定id选择器为app1的标签
        data:{
            title:"冒险岛"
        }
    })

    new Vue({
        el:"#app2",  // 绑定id选择器为app2的标签
        data:{
            title:"LOL"
        }
    })
</script>

观察结果:

可以看出，只有标签绑定了Vue对象，才能使用模板语言，否则{{}} 使用无效，这是新手容易犯的一个错误。