1.2 初识Vue

1.2.1 引入js文件

进入官网——安装文档https://cn.vuejs.org/v2/guide/installation.html

根据自己的需求，选择开发版本或是生产版本下载。

官网明确指出，如果对于制作原型或学习需要，你可以这样使用cdn来使用最新版本：

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

1.2.2 初识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始vue</title>
</head>
<body>
    <div id="root">
        <h1>Hello, World!</h1>
    </div>
</body>
</html>

　　这样的代码我们已经十分熟悉了。为了能让Hello, World!输出可以动态变化，我们引入vue

　　首先引入刚刚下载好的vue.js

<script type="text/javascript" src="../js/vue.js"></script>

　　这样我们就会获得一个Vue实例，那么我们创建一个Vue实例并进行配置。

<script type="text/javascript">
    // 创建一个Vue的实例对象，并传入配置对象
    new Vue({
    el: '#root', // 用于指定当前vue实例为哪个容器服务，值是选择器字符串，选择的写法类似于JQuery
        data: { // data是存储数据的地方，为root容器提供数据，值为一个对象，相当于React中的state
            name: 'Vue'
        }
    })
</script>

　　根据vue的语法规则，使用双大括号来输出需要的变量。我们这里定义了一个名为name的变量，其值为vue。那么我们使用{{name}}来输出其值vue。

<div id="root">
    <h1>Hello, {{name}}</h1>
</div>

1.2.3 小结

<div id="root">是一个容器，容器中写的不是原始html代码，而是vue的模板代码。
所谓模板代码，类似于React中的jsx，是html+js的混合体。
{{xxx}} xxx会自动读取data中的xxx属性