目標(biāo)：創(chuàng)建一個(gè)自定義控件锈锤，看看vue和element能干什么
在動(dòng)手之前驯鳖，我們先觀察下App.vue的代碼闲询，代碼沒(méi)幾行，沒(méi)寫(xiě)過(guò)程序的人應(yīng)該也不會(huì)覺(jué)得害怕
可以看到浅辙，默認(rèn)的項(xiàng)目里面扭弧，贈(zèng)送了一個(gè)HelloWorld的component
App.vue導(dǎo)入了這個(gè)控件，并且設(shè)置了msg這個(gè)屬性值為Welcome to ....
仿造這個(gè)摔握，我們做一個(gè)能動(dòng)態(tài)增加數(shù)據(jù)行的表格寄狼，體驗(yàn)一下vue的強(qiáng)大
先在components目錄下新增MyComponent.vue文件，添加方法如下
輸入名稱(chēng)MyComponent氨淌，文件創(chuàng)建如下
我們從element官網(wǎng)，table控件的介紹頁(yè)伊磺，復(fù)制一個(gè)表格過(guò)來(lái)
https://element.eleme.cn/#/zh-CN/component/table
把代碼復(fù)制到我們的文件中盛正，調(diào)整一下格式，原來(lái)的代碼分了很多行屑埋，看著很累
然后我們把App.vue中的HelloWorld改成我們的名字（之前我們加的那個(gè)按鈕豪筝，代碼刪掉）
保存文件后，我們刷新下頁(yè)面（其實(shí)內(nèi)容會(huì)自動(dòng)刷）
很成功摘能，我們已經(jīng)完成了一個(gè)表格頁(yè)面续崖！
回頭看一下MyComponent的代碼，發(fā)現(xiàn)相當(dāng)簡(jiǎn)單
代碼中<template>部分团搞，定義了表格和表格項(xiàng)严望，并指定數(shù)據(jù)來(lái)源
<script>部分，我們定義了tableData的數(shù)據(jù)逻恐，就可以了像吻。
當(dāng)然，我們不會(huì)只滿(mǎn)足于一個(gè)靜態(tài)的表格复隆，來(lái)個(gè)高級(jí)的拨匆，嘗試下動(dòng)態(tài)添加表格的數(shù)據(jù)
一般我們都用表單來(lái)提交數(shù)據(jù)，這里我們需要輸入日期挽拂、姓名和地址
只有3個(gè)輸入項(xiàng)惭每，再加一個(gè)確定按鈕，所以顯示在一行會(huì)比較好亏栈。
打開(kāi)element文檔台腥，form這一頁(yè)，找到“行內(nèi)表單”這里
把代碼復(fù)制到我們的文件里面仑扑，要稍微改一下
template部分改成這樣览爵，添加了表單，里面放了一個(gè)日期選擇框和兩個(gè)輸入框镇饮，一個(gè)按鈕
script部分蜓竹，改成這樣
看一下效果，可以動(dòng)態(tài)添加表格數(shù)據(jù)了
是不是很神奇又很簡(jiǎn)單？ 在遠(yuǎn)古時(shí)代俱济，這樣的高級(jí)功能可不是一般的菜鳥(niǎo)能寫(xiě)出來(lái)的
就算是jquery嘶是，在獲取服務(wù)器數(shù)據(jù)后，動(dòng)態(tài)渲染頁(yè)面也是一個(gè)很麻煩的事
而我們只用了一行代碼蛛碌，vue就是這么優(yōu)秀聂喇！
本章完
