Vue.js
Vue.js 是什么
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
第一课Hellow Vue!
创建一个html文件，然后通过如下方式引入 Vue：
<script src="js/vue.js"></script>
输入以下代码：
<body>
<div id="nbsp">
{{message}}
{{text}}
{{num}}
{{obj}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#nbsp",
data:{
message:"Hellow Vue!",
text:"你好维哦",
num:9999,
obj:{name:"张小明",age:18}
}
});
</script>
</body>
以上代码输出如下：
QQ截图20180911195917.png
第二课,用v-for输出一些简单的数组或对象
<body>
<div id="nbsp">
<ol>
<li v-for="value in arr">{{value}}</li>
<li v-for="val in obj">{{val}}</li>
<li v-for="(val,qw) in arr">
{{qw}}?????{{val}}
</li>
<li v-for="(val,ind) in obj">
{{ind}}={{val}}
</li>
</ol>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#nbsp",
data:{
arr:[1,2,3],
obj:{name:"jack",age:19},
}
});
</script>
</body>
输出结果如下
QQ截图20180911200908.png
数组对象：
<body>
<div id="nbsp">
<ol>
<li v-for="value in arrs">
{{value.num}}
{{value.name}}
{{value.price}}
</li>
</ol>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el:"#nbsp",
data:{
arrs:[
{num:1,name:"apple",price:3},
{num:3,name:"banana",price:3},
{num:8,name:"mailefaolen",price:1000}
]
}
});
</script>
输出结果如下：
QQ截图20180911201306.png
用v-for输出一个表格
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<style>
table{
width: 300px;
color: #ff7c35;
}
</style>
<body>
<div id="nbsp">
<table border="1" cellspacing="0">
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
</tr>
<tr v-for="(value,index) in fruit">
<td>{{index+1}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
</table>
</div>
链接Vue.js
<script src="js/vue.js"></script>
输入的Vue.js代码如下：
<script>
new Vue({
el:"#nbsp",
data:{
fruit:[
{name:"apple",price:3},
{name:"banana",price:3},
{name:"mailefaolen",price:1000}
]
}
});
</script>
</body>
在for循环输入中还可以这样写：
<tr v-for="value in fruit">
<td>{value.num}}</td>
<td>{{value.name}}</td>
<td>{{value.price}}</td>
</tr>
那么在js中输入就成了这样：
<script>
new Vue({
el:"#nbsp",
data:{
fruit:[
{num:1,name:"apple",price:3},
{num:2,name:"banana",price:3},
{num:3,name:"mailefaolen",price:1000}
]
}
});
</script>
最后输出的结果为：
QQ图片20180911194136.png
网友评论