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">
    <nav @click.prevent>
        <a v-for="item in items" :class="{'show': item.active}" @click="makeActive(item, $index)">{{item.name}}</a>
    </nav>
    <p>You chose <b>{{active}}</b></p>
</div>

css代码:

*{
    margin:0;
    padding:0;
}
#main{
    432px;
    margin:0 auto;
    text-align:center;
}
nav{
    display:inline-block;
    margin:60px auto 45px;
    background-color:#5597b4;
    box-shadow:0 1px 1px #ccc;
    border-radius:2px;
}
nav a{
    display:inline-block;
    padding: 18px 30px;
    color:#fff !important;
    font-weight:bold;
    font-size:16px;
    text-decoration:none !important;
    line-height:1;
    background-color:transparent;
    -webkit-transition:background-color 0.25s;
    -moz-transition:background-color 0.25s;
    transition:background-color 0.25s;
    cursor:pointer;
}
b{
    display:inline-block;
    padding:5px 10px;
    background-color:#c4d7e0;
    border-radius:2px;
    font-size:18px;
}
.show{
    background-color:#e35885;
}

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;
        }
    }
});

你们快试试吧!