Vue第一个程序,经典Hello

发布时间 2023-07-26 18:11:46作者: 天霜

弄明白了简单模式的vue应用,开始应用,首先下载vue.js文件,也可以访问使用 CDN 方法,

我是直接下载了vue.global.js,方法是NPM 方法(这个在上面的官网与菜鸟都有)

,然后用Visual Studio 建了一个空网站,新建文件夹scripts 把vue.global.js放文件夹下,新建文件夹pages在这个文件夹下新建一个html文件

写如下代码,然后保存

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="../scripts/vue.global.js" type="text/javascript"></script>
<title></title>
</head>
<body>
<div id="Hello">
<p>{{ message }}</p>
</div>
</body>

</html>
<script>
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!ssss'
}
}
}

Vue.createApp(HelloVueApp).mount('#Hello');
</script>

然后运行,第一个Hello程序就完成了