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" />
<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.运行视图
1026
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
