初学Vue2.0

Vue

发布日期: 2021-01-19

直接引入Vue3.x源码

Vue官方提供直接引入的CDN服务地址，只要用script标签，就可以直接引入Vue3，并且使用它。（其实学习期间，你并不需要会使用Vue-cli、Vite这些构建工具，来构建项目）

<script src="https://unpkg.com/vue@next"></script>

引入Vue3的框架之后，我们就可以写Vue的代码了。现在body标签中，加入一个div层,并给他一个id=”app”。

<div id="app"></div>

感觉这样挺麻烦的,我就放全部代码了:smile:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    Vue.createApp({ //创建一个Vue实例
        template:'<div>Hello   Word!</div>'
    }).mount("#app")
</script>
</html>

写完代码后，你可以直接打开index.html就会显示在浏览器的网页上。当你看到了结果，我再给你一行行解释一下这个代码。

Vue.createApp({   //创建一个Vue实例，简单理解就说，我要使用Vue了
    template: '<div>Hello World</div>'   // template是模板的意思，就是在JS里写html代码
}).mount("#app")   //这个模板需要放一个位置，也就是说挂载，挂载到`id=app`的DOM上

当你打开index那个页面后出现 Hello Word！就成功了