初学Vue2.0


直接引入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!就成功了

提问 一起学习

如果你在学习中遇到问题,或者我有什么错误,可以到下方留言,也可以联系我QQ:2573018577


文章作者: Bibooo
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Bibooo !
评论
  目录