理論的な知識
- 静的な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>
- コードの効果は、別のボタンに対応する画像をクリックしてください。
