vue的坑

1.

<style lang="sass" scoped type="text/css">style>  错误写法

报错：

<style lang="scss" scoped type="text/css">style> 正确写法

2.

组件模板应该在最外层有个根元素，下面根元素为div

<div>
      
    <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.

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