vue的坑

1.

<style lang="sass" scoped type="text/css"></style>  錯誤寫法

報錯：

<style lang="scss" scoped type="text/css"></style> 正確寫法

2.

組件模板應該在最外層有個根元素，下面根元素爲div

<div>
    <!-- <p class="tit">您當前的手機套餐:<span>{{nowPackage}}</span></p> -->  
    <article id='fgList'>
        <section class="fG_wrap" v-for="item in list">
            <header class="pr">
                <h3 class="pa" @click="showInfo(item.id)">{{ item.product_name }}<i class="show_detail"></i></h3>
                <span class="pa tel"><i></i>{{ item.product_talktime }}分鐘</span>
                <span class="pa flow"><i></i>{{ item.product_flow }}</span>
                <button class="pa btn_buy">訂購</button>
            </header>
            <div class="detail" v-show="activeId==item.id">
                <div class="rule"><p>{{ item.product_desc }}</p></div>
                <div class="tips_tit">溫馨提示:</div>
                <div class="tips"><p>{{ item.second_tips }}</p></div>
            </div>
        </section>
    </article>
    <dialog-html></dialog-html>
</div>

3.

##沒有根元素會報錯

<article id='fgList'>
    <section class="fG_wrap" v-for="item in list">
        <header class="pr">
            <h3 class="pa" @click="showInfo(item.id)">{{ item.product_name }}<i class="show_detail"></i></h3>
            <span class="pa tel"><i></i>{{ item.product_talktime }}分鐘</span>
            <span class="pa flow"><i></i>{{ item.product_flow }}</span>
            <button class="pa btn_buy">訂購</button>
        </header>
        <div class="detail" v-show="activeId==item.id">
            <div class="rule"><p>{{ item.product_desc }}</p></div>
            <div class="tips_tit">溫馨提示:</div>
            <div class="tips"><p>{{ item.second_tips }}</p></div>
        </div>
    </section>
</article>
<dialog-html></dialog-html>

4.

根據錯誤提示知道是語法錯誤，於是更正