Vue

作者: 长安有故里_5e53 | 来源:发表于2018-09-11 15:47 被阅读0次

    1.Vue:Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。

    2.下载Vue  输入指令 ump install vue,下载完毕之后出现文件夹即可

    3.vue内容:

           new Vue({ //element元素

                el:'#itany',

                data:{//写数据

                    table

         })

    4.循环数组:

    div:

    <div id="mingzi">

    <ul>

    <li v-for="a in arr">{{a}}</li>

    </ul>

    </div>

    js:

    new Vue({

    el:'#mingzi',

    data:{

    arr:[1,2,3]

    }

    })

    5.循环对象:

    div:

    <div id="mingzi">

    <ul>

    <li v-for="a in obj"><<a>></li>

    </ul>

    </div>

    js:

    new Vue({

    el:'#mingzi',

    data:{

    obj:{name:"社会王",age:"18岁"}

    }

    })

    6.循环下标:

    div:

    <div id="mingzi">

      <ul>

      <li v-for="(a,index) in arr"><<a>><<index>></li>

      </ul>

      </div>

        js:

        new Vue({

        el:'#mingzi',

        data:{

        arr:[1,2,3]

        }

        })

        7.循环表格:

        div:

        <div id ="itany">

        <table>

        <thead>

        <tr>

        <th>编号</th>

        <th>名称</th>

        <th>单价</th>

        </tr>

        </thead>

        <table>

        <tr v-for="(value,index) in arr">

                        <td>{{index+1}}</td>

                          <td>{{value.pname}}</td>

                          <td>{{value.price}}</td>

        </tr>

        </table>

        </table>

        </div>

        js:

        new Vue({

        el:'#itany',

        data:{

            arr:[

                                {pname:"葡萄",price:1},

                                {pname:"香蕉",price:2},

                                {pname:"苹果",price:3},

                              ]

        }

        })

        相关文章

          网友评论

              本文标题:Vue

              本文链接:https://www.haomeiwen.com/subject/bllugftx.html