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.

根据错误提示知道是语法错误，于是更正