<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--導入vue.js-->
<script src="../js/vue.js"></script>
</head>
<body>
<!--vue控制的元素區，爲所說的V-->
<div id="app">
<p>{{message}}</p>
</div>
<script>
//創建一個Vue實例app
//new出來的對象就是控制頁面的元素區域和存放數據的，即爲VM
var app=new Vue({
//vue控制頁面上的區域
el:'#app',
//data存放el中的數據
//data中存放的是顯示的數據則爲M
data:{
message:'Hello Vue'
}
})
</script>
</body>
</html>
app.js
|
項目的入口，項目先進入這裏 |
router.js
|
路由分發處理模塊 不負責處理 |
controller
|
業務邏輯處理 |
model
|
只負責數據處理 |
前端視圖層分爲以下幾個模塊
|
M |
VM |
V |
|
每個頁面中保存的數據 |
溝通的橋樑 |
html
|