2018-09-10
今天是分班的第一天，也認識了我的教員小謝同學。
對于Vue的初次了解呢，也許很惶恐，也許很高大上，但是在學習中，我希望把枯燥的Vue可以像Git里安裝他一樣（因為Git是目前世界上最先進的分布式版本控制系統(tǒng)（沒有之一）），讓他在npm install vue 一樣方便的記錄世界，記錄你。
關于Vue.Js（他的讀音/vju:/,類似于view），是一套用于構建用戶界面的漸進式框架。與其他大型框架不同的是，Vue被設計為可以自低向上逐層應用。Vue的核心庫只關注圖層，不僅易于上手，還便于第三方庫或既有項目整合。Vue也完全能夠為復雜的單頁應用提供驅動。Vue的核心是一個允許采用簡潔的模板語法來聲明式的將語法渲染的DOM系統(tǒng)。
關于Js的框架包括Vue.Js,Angular.Js,React.Js三種，我們主要學習的是由華人尤雨溪編纂的Vue.Js。我們選擇Vue.Js也是因為他的三個優(yōu)點：
1，最容易學習的；
2，由個人維護的；
3，操作元素更方便（簡化DOM操作）；
循環(huán)：v-for=>遍歷(本節(jié)重點)。
用 v-for 把一個數(shù)組對應為一組元素
我們用 v-for 指令根據(jù)一組數(shù)組的選項列表進行渲染。v-for 指令需要使用 item in items形式的特殊語法，items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。
在 v-for 塊中，我們擁有對父作用域屬性的完全訪問權限。v-for 還支持一個可選的第二個參數(shù)為當前項的索引。
舉例如下：
<!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 應該只能是數(shù)據(jù) - 不推薦觀察擁有
狀態(tài)行為的對象。
行為的對象。
data:{
qaq:"Hello Vew!"
}
})
</script>
</body>
</html>
效果圖：
<!DOCTYPE html>
<html lang="en">
</head>
<body>
<div class="form" style="text-align:center;">
// table表格標簽,其中加樣式不用行內(nèi)樣式，且不
加單位。cellpadding邊距 :設置單元格文字與邊框
的距離。cellspacing間距：設置兩單元格之間的距
離。
<table border="1" width="300" height="200" cellspacing="0">
//thead表頭標簽：自帶加粗居中。
<thead>
<tr>
<th>編號</th>
<th>產(chǎn)地</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: {
//存數(shù)據(jù)
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-on
綁定事件監(jiān)聽器。
②v-bind
動態(tài)地綁定一個或多個特性，或一個組件 prop 到表達式。
④v-model
一個組件上的 v-model 默認會利用名為 value 的 prop 和名為 input 的事件，但是像單選框、復選框等類型的輸入控件可能會將 value 特性用于不同的目的。
