2018-09-10
? ? ? ? ?對(duì)于Vue的初次了解呢，也許很惶恐，也許很高大上，但是在學(xué)習(xí)中，我希望把枯燥的Vue可以像Git里安裝他一樣（因?yàn)镚it是目前世界上最先進(jìn)的分布式版本控制系統(tǒng)（沒(méi)有之一）），讓他在npm install vue 一樣方便的記錄世界，記錄你。
? ? ? ?關(guān)于Vue.Js（他的讀音/vju:/,類似于view），是一套用于構(gòu)建用戶界面的漸進(jìn)式框架。與其他大型框架不同的是，Vue被設(shè)計(jì)為可以自低向上逐層應(yīng)用。Vue的 ? ?的核心庫(kù)只關(guān)注圖層，不僅易于上手，還便于第三方庫(kù)或既有項(xiàng)目整合。Vue也完全能夠?yàn)閺?fù)雜的單頁(yè)應(yīng)用提供驅(qū)動(dòng)。Vue的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明式的將語(yǔ)法渲染的DOM系統(tǒng)。
<!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>
效果圖：
? ? ? ?今天是分班的第一天，也認(rèn)識(shí)了我的教員小謝同學(xué)。
? ? ? 關(guān)于Js的框架包括Vue.Js,Angular.Js,React.Js三種，我們主要學(xué)習(xí)的是由華人尤雨溪編纂的Vue.Js。我們選擇Vue.Js也是因?yàn)樗娜齻€(gè)優(yōu)點(diǎn)：1，最容易學(xué)習(xí)的；2，由個(gè)人維護(hù)的；3，操作元素更方便（簡(jiǎn)化DOM操作）；
? ? ? 循環(huán)：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>編號(hào)</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<th>產(chǎn)地</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<th>種類</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <th>單價(jià)</th>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </tr>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </thead>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<tbody>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <！-----v-for相當(dāng)于遍歷----->
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <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>
效果圖：
