1.利用<script></script>引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.編寫代碼
vue01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue.js</title>
<link rel="stylesheet" href="css/style.css" target="_blank" rel="external nofollow" />
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="vue-app">
<p>{{great()}}</p>
<p>Name:{{name}}</p>
<p>Work:{{work}}</p>
<p>Address:{{address}}</p>
<button v-on:click="add">增加一天</button>
<button v-on:click="substract">減少一天</button>
<p>I'am here for {{wait}} day</p>
</div>
<script src="js/app.js"></script>
</body>
</html>
style.css
無代碼
app.js
new Vue({
el:"#vue-app",
data:{
name:"YanHSama",
work:"Student",
address:"Guangdong Zhanjiang",
wait:"22"
},
methods:{
great:function(){
return 'welcome to Web 開發！';
},
add:function(){
this.wait++;
},
substract:function(){
this.wait--;
}
}
});
/*
* el:element屬性
* data:資料存儲
* methods:方法
*/
3.運作視圖
![從零開始系列之vue全家桶(2)安裝chrome調試插件vue Devtools[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)