這篇文章學(xué)習(xí)一下如何使用vuejs在頁面輸出最簡單的hello vuejs
為了頁面好看杖刷，我在項目中引入了bootstrap相關(guān)的文件和fonts字體
項目結(jié)構(gòu)如下：
vuejs靜態(tài)項目目錄結(jié)構(gòu).png
頁面結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>demo01</title>
<link rel="stylesheet" href="../css/base/bootstrap.min.css">
<link rel="stylesheet" href="../css/base/common.css">
</head>
<body>
<div class="container mt10">
<h1 id="title">{{ message }}</h1>
</div>
<script src="../js/base/vue.js"></script>
<script src="../js/base/jquery.min.js"></script>
<script src="../js/base/bootstrap.min.js"></script>
<script>
new Vue({
el: '#title',
data: {
message: 'Hello Vue.js.'
}
});
</script>
</body>
</html>
在瀏覽器中打開這個網(wǎng)頁，就可以看到下面的結(jié)果：
result.png
