2018-09-10
今天是分班的第一天，也认识了我的教员小谢同学。
对于Vue的初次了解呢，也许很惶恐，也许很高大上，但是在学习中，我希望把枯燥的Vue可以像Git里安装他一样（因为Git是目前世界上最先进的分布式版本控制系统（没有之一）），让他在npm install vue 一样方便的记录世界，记录你。
关于Vue.Js（他的读音/vju:/,类似于view），是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自低向上逐层应用。Vue的核心库只关注图层，不仅易于上手，还便于第三方库或既有项目整合。Vue也完全能够为复杂的单页应用提供驱动。Vue的核心是一个允许采用简洁的模板语法来声明式的将语法渲染的DOM系统。
关于Js的框架包括Vue.Js,Angular.Js,React.Js三种，我们主要学习的是由华人尤雨溪编纂的Vue.Js。我们选择Vue.Js也是因为他的三个优点：
1，最容易学习的；
2，由个人维护的；
3，操作元素更方便（简化DOM操作）；
循环：v-for=>遍历(本节重点)。
用 v-for 把一个数组对应为一组元素
我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 item in items形式的特殊语法，items 是源数据数组并且 item 是数组元素迭代的别名。
在 v-for 块中，我们拥有对父作用域属性的完全访问权限。v-for 还支持一个可选的第二个参数为当前项的索引。
举例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8”>
<title>Vue.Js</title>
</head>
<body>
<div id="QAQ">
{{qaq}}
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
//element元素，存放的位置
el:"#QAQ",
//data 应该只能是数据 - 不推荐观察拥有
状态行为的对象。
行为的对象。
data:{
qaq:"Hello Vew!"
}
})
</script>
</body>
</html>
效果图：
hello.png
<!DOCTYPE html>
<html lang="en">
</head>
<body>
<div class="form" style="text-align:center;">
// table表格标签,其中加样式不用行内样式，且不
加单位。cellpadding边距 :设置单元格文字与边框
的距离。cellspacing间距：设置两单元格之间的距
离。
<table border="1" width="300" height="200" cellspacing="0">
//thead表头标签：自带加粗居中。
<thead>
<tr>
<th>编号</th>
<th>产地</th>
<th>种类</th>
<th>单价</th>
</tr>
</thead>
//tbody表格主体
<tbody>
<！-----v-for相当于遍历----->
<tr v-for="(text,sub) in arbj">
<td>{{sub+1}}</td>
<td>{{text.product}}</td>
<td>{{text.fruit}}</td>
<td>{{text.price}}</td>
</tr>
</tbody>
</table>
</div>
<script src="vue.js"></script>
<script>
new Vue({
//绑定元素
el: ".form",
data: {
//存数据
arbj: [{
product: 'China',
fruit: 'apple',
price: '￥5'
},
{
product: 'China',
fruit: 'banana',
price: '￥3'
},
{
product: 'China',
fruit: 'pineapple',
price: '￥2'
},
{
product: 'China',
fruit: 'watermelon',
price: '￥1'
}
]
}
})
</script>
</body>
</html>
效果图：
v-for.png
最后的最后：
①v-on
绑定事件监听器。
②v-bind
动态地绑定一个或多个特性，或一个组件 prop 到表达式。
④v-model
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。
网友评论