Vue

2018-09-11  本文已影响0人  长安有故里_5e53

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},

                      ]

}

})

上一篇下一篇

猜你喜欢

热点阅读