vue的基本代碼
阿新 • • 發佈:2019-02-26
就是 name 4.0 idt -c port scrip 是我 ont
<!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>Title</title>
<!--1:導入vue-->
<script src="js/vue-2.4.0.js"></script>
</head>
<body>
<!--將來new的vue實例,會控制這個元素中所有的內容-->
<!--Vue 實例所控制的這個元素區域,就是我們的V-->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
//創建一個vue的實例
//當我們導入包之後,在瀏覽器內存中,就多了個vue構造函數
//註意:我們 new 出來的這個 vm ,就是我們 MVVM 中的 vm 調度者
const vm = new Vue({
el: ‘#app‘, //表示,當前我們new的這個vue實例,要控制頁面上的哪個區域
//這裏的data就是MVVM中的M,專門用了保存每個頁面的數據的
data: { //date屬性中,存放的是el中要用到的數據
msg: ‘歡迎學習Vue‘ //通過vue提供的指令,很方便就能把數據渲染在頁面上,
// 程序員不再動手操作DOM元素了[前端的Vue之類的框架,不提倡我們去動手操作DOM元素]
}
});
</script>
</body>
</html>
vue的基本代碼