2018-09-10
对于Vue的初次了解呢，也许很惶恐，也许很高大上，但是在学习中，我希望把枯燥的Vue可以像Git里安装他一样（因为Git是目前世界上最先进的分布式版本控制系统（没有之一）），让他在npm install vue 一样方便的记录世界，记录你。
关于Vue.Js（他的读音/vju:/,类似于view），是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自低向上逐层应用。Vue的 的核心库只关注图层，不仅易于上手，还便于第三方库或既有项目整合。Vue也完全能够为复杂的单页应用提供驱动。Vue的核心是一个允许采用简洁的模板语法来声明式的将语法渲染的DOM系统。
<!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({
el:"#QAQ",
data:{
qaq:"Hello Vew!"
}
})
</script>
</body>
</html>
效果图：
今天是分班的第一天，也认识了我的教员小谢同学。
关于Js的框架包括Vue.Js,Angular.Js,React.Js三种，我们主要学习的是由华人尤雨溪编纂的Vue.Js。我们选择Vue.Js也是因为他的三个优点：1，最容易学习的；2，由个人维护的；3，操作元素更方便（简化DOM操作）；
循环：v-for=>遍历。
举例如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.Js</title>
</head>
<body>
<div class="form" style="text-align:center;">
<table border="1" width="300" height="200" cellspacing="0">
<thead>
<tr>
<th>编号</th>
<th>产地</th>
<th>种类</th>
<th>单价</th>
</tr>
</thead>
<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>
效果图：
网友评论