Vue入门--@用法

1. 效果

先做个简易版本 因为简易版本不需要做图。长的跟下面一样...

2. 实现

css

    #wrap {
        height: 50vh;
        width: 50vw;
        display: flex;
        flex-direction: column;
    }

    #header {
        display: flex;
        flex-grow: 1;
        justify-content: space-between;
        background-color: ghostwhite;
    }

    .tag {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #footer {
        display: flex;
        flex-grow: 9;
        justify-content: center;
        align-items: center;
        background-color: pink;
    }

html

    <div id="wrap">
        <div id="header">
            <div class="tag" @click="curId='html'" style="background-color: lightcoral;">html</div>
            <div class="tag" @click="curId='css'" style="background-color: lightblue;">css</div>
            <div class="tag" @click="curId='js'" style="background-color: #d4c835;">js</div>
            <div class="tag" @click="curId='xml'" style="background-color: lightgoldenrodyellow;">xml</div>
        </div>
        <div id="footer">{{curId}}</div>
    </div>

js

    const vm = new Vue({
        el: '#wrap',
        data: {
            curId: 'html'
        }
    })

3. 总结

@是v-on的缩写，v-on == jquery.on，用于绑定事件的。
{{}}用来让数据回显到视图的。
vue是视图–视图模型–数据的框架，不牵扯dom操作。