理论知识
- 画静态ui界面。分析业务功能，得到基本的ui界面。基于html+css实现静态的ui界面。
- 改造ui界面。利用vue模板语法，包括数据绑定、属性绑定、方法绑定等各种绑定，得到符合vue模板语法的ui界面。
- 实现用户操作。利用vue的事件绑定和js的控制逻辑，开发业务功能。
- 整体思路如下图，此图类似beetl，一定程度说明vue也是一个模板引擎
实践
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="vue.js"></script>
<style type="text/css">
.active{
border: 1px, solid;
background: green;
}
.img{
height: 180px;
width: 180px;
}
.test{
width: 180px;
}
.test> button{
width: calc(180px /3 );
}
</style>
</head>
<body>
<div id="app">
<div class="test"><button @click='b'>香蕉</button><button @click='c'>橘子</button><button @click='a'>苹果</button></div>
<div><img class="img" :src='url'></div>
</div>
<script type="text/javascript">
Vue.config.keyCodes.aaa= 65
var app = new Vue({
el: '#app',
data:{
url:'img/a.png'
},
methods:{
a:function(){
this.url='img/a.png'
},
b:function(){
this.url='img/b.png'
},
c:function(){
this.url='img/o.png'
}
}
})
</script>
</body>
</html>
- 代码效果，点击不同按钮，出现对应图片。
