Vue文件标准结构、v-for遍历、key、v-bind、@click、绑定class

<template>
<!-- 必须有一个父元素 -->
    <div id="login">
        <!-- 内容区 -->
        <div class="login-warp">
            <ul class="menu-tab">
                <li v-for="item in menuTab" :key="item.id" :class="{'current':item.current}" @click="toggleMenu(item)" >{{item.txt}}</li>
            </ul>
        </div>
    </div>
</template>
<script>
export default {
    // 当前模块名称
    name:'login',
    data(){
        return{
            menuTab:[
                {txt:'登录',current:true},
                {txt:'注册',current:false}
            ],
            isActive:true
        }
    },
    created(){},
    mounted(){
        
    },
    methods:{
        // 数据驱动视图
        toggleMenu(data){
            this.menuTab.forEach(elem => {
                elem.current = false;
            });
            // 高光
            data.current=true;
        }
    },
    props:{},
    watch:{}
};
</script>

<style lang="scss" scoped>
// scoped标识只对当前vue文件管用
#login{
    // 可视区的高度为100%
    height:100vh;
    background-color: #344a5f;
}
.login-warp{
    width: 330px;
    margin: auto;
}
.menu-tab{
    text-align: center;
    li{
        display: inline-block;
        width: 88px;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #FFF;
        border-radius: 2px;
        cursor: pointer;
    }
    .current{
        background-color: rgba(0,0,0, .1);
    }
}
</style>

1、vue文件分为三部分，template、script、style，template标签下面必须有一个标签包裹其所有子标签

export default {
    // 当前模块名称
    name:'login',
    //绑定的数据
    data(){
        return{
            menuTab:[
                {txt:'登录',current:true},
                {txt:'注册',current:false}
            ],
            //isActive:true
        }
    },
    created(){},
    mounted(){ },
    //需要调用的方法
    methods:{
        // 数据驱动视图
        toggleMenu(data){
        }
    },
    props:{},
    watch:{}
};
</script>
<style lang="scss" scoped>
</style>

style的lang表示要用的语言，scoped不写的话默认表示所有vue文件都可使用该样式。
2、 v-for=“item in menuTab”，menuTab为数据，item in menuTab,表示将循环遍历的第i条数局的值赋值给item。
3. :key=“item.id"或者是v-bind:key=“item.id”，是每条绑定数据都需要进行绑定的如果在data里面没有可以直接.id,vue会默认给你加上id。
4. :class=”{‘current’:item.current}" ，表示class绑定的值为，当前数据的current的值，如果isActive 的布尔值为 true 则样式渲染,如果为false 样式不渲染 。
5. @click=“toggleMenu(item)”,表示当进行点击事件时，调用methods中的方法toggleMenu(item)并传值给该事件，
6. this.menuTab.forEach(elem=>{ elem.current = false;});表示循环遍历menuTab中的所有current先改为false，elem为引用类型，引用的是menuTab的地址，当为其重新改变值得时候menuTab中的值也会给变，例：
let a = [11,22];
let b = a;
b[0] = 0;
则a=[0,22]

刚开始学习vue，如果有写的不对的地方还请各位大佬指教