Vue.js小案例(1)

數據綁定

數據綁定是vue.js的基礎。本例中就是利用了vue.js的v-model指令在表單元素上建立雙向數據綁定。

<!--這是咱們的View-->
<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

<script>
    // 這是咱們的Model
    new Vue({
        el: '#app',
        data: {
            message:'Hello World!'
        }
    })
</script>

將message綁定到文本框，當更改文本框的值時，<p>{{ message }}</p> 中的內容也會被更新。

導航切換

這裏主要應用了vue.js的v-for指令來渲染一個列表、v-bind指令來綁定class以及v-on指令來處理事件

1這是HTML代碼 

<div id="main">
2     <nav @click.prevent>
3         <a v-for="item in items" :class="{'show': item.active}" @click="makeActive(item, $index)">{{item.name}}</a>
4     </nav>
5     <p>You chose <b>{{active}}</b></p>
6 </div>

css代碼:

 1 *{
 2     margin:0;
 3     padding:0;
 4 }
 5 #main{
 6     width:432px;
 7     margin:0 auto;
 8     text-align:center;
 9 }
10 nav{
11     display:inline-block;
12     margin:60px auto 45px;
13     background-color:#5597b4;
14     box-shadow:0 1px 1px #ccc;
15     border-radius:2px;
16 }
17 nav a{
18     display:inline-block;
19     padding: 18px 30px;
20     color:#fff !important;
21     font-weight:bold;
22     font-size:16px;
23     text-decoration:none !important;
24     line-height:1;
25     background-color:transparent;
26     -webkit-transition:background-color 0.25s;
27     -moz-transition:background-color 0.25s;
28     transition:background-color 0.25s;
29     cursor:pointer;
30 }
31 b{
32     display:inline-block;
33     padding:5px 10px;
34     background-color:#c4d7e0;
35     border-radius:2px;
36     font-size:18px;
37 }
38 .show{
39     background-color:#e35885;
40 }

JS代碼:

var vm = new Vue({
    el:'#main',
    data:{
        active:'HTML',
        items:[
            {name:'HTML', active:true},
            {name:'CSS', active:false},
            {name:'JavaScript', active:false},
            {name:'Vue.js', active:false}
        ]
    },
    methods: {
        makeActive: function(item, index){
            this.active = item.name;
            for(var i=0; i<this.items.length;i++){
                this.items[i].active = false;
            }
            this.items[index].active = true;
        }
    }
});

大家快試試吧!