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