vue項目執行個體-常用标簽
總結：
1、<router-link
2、v-bind動态綁定指令，格式為：v-bind:你要動态變化的值="表達式"
3、v-for清單渲染
例：
<tr v-for="item in peoples">
<td>
{{item.name}}
</td>
</tr>
4、v-show指令與v-if指令的差別就在于，前者一開始就加載，更适用于頻繁的切換，後者需首先判斷布爾值，為true才加載渲染
5、v-model指令是雙向綁定，一般用于表單元件
6、單檔案元件的引用，import [命名] from [相對路徑]
7、自定義标簽：駝峰法定義的元件FooterNav需在使用時用短橫線連接配接<footer-nav>
8、在<style>标簽上添加scoped，聲明作用域，樣式效果隻在該頁面内生效，不污染全局。
9、CSS中class可以指定多個值，用空格隔開就可以了。
比如：<div class="exp1 exp2 exp3">這個是範例</div>
前言
在開始開發執行個體前，應首先了解一下vue-cli的項目結構。接着我們一起來實作一個小demo——人員管理，功能簡單，通過這個執行個體讓大家熟悉使用vue-cli開發項目的一些操作，加深對vue-cli項目結構的印象。
執行個體功能簡述
人員管理項目，有兩個頁面，首頁和管理頁，管理頁主要實作一個簡單的增删改功能，各個功能如下所示（附github位址）
路由
新增操作
修改操作
删除操作
建立項目
首先第一步，就是建立我們的項目，打開cmd，進入到想要建立項目的目錄下，我這裡是到d盤的根目錄下，然後輸入
vue init webpack manage，敲回車。
建立項目（1）
建立項目（2）
接着安裝依賴包，進入項目，輸入npm install
安裝依賴包
接着輸入npm run dev 運作項目，可以看到浏覽器自動打開，顯示如下
項目初始顯示
項目開發
1.建立首頁
因為我做的人員管理項目是wap端的，是以我們首先在首頁index.html中加上meta标簽
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
1.1 建立目錄
為友善管理，我們在src檔案夾下建立一個views檔案夾，用于存放所有的子產品元件。
在views檔案夾下建立index檔案夾，再在index檔案夾下建立index.vue作為項目的首頁。
建立首頁index.vue
1.2 編輯首頁index.vue
首頁模闆
接着在路由配置中引入我們剛建立的首頁，并更改一下路由配置
更改路由
打開浏覽器，看到更改的内容已經自動渲染
2. 添加底部導航元件
因為底部導航元件是公共元件，在兩個頁面都有引用，是以我們把它建在components檔案夾下，命名為footer.vue。
底部導航元件頁面内容
div的fixed樣式寫在了公共樣式public.css裡面，并在App.vue中引入，作用域設為全局
公共樣式public.css
引入外部css
對這個頁面主要講兩點：
（1）<router-link>
可以看到footer.vue使用了<router-link>标簽，該标簽主要實作跳轉連結功能，屬性to='/'即是跳轉到path為'/'的路徑（即我們在路由配置中定義的Index路由）
（2）scoped
在<style>标簽上添加scoped，聲明作用域，樣式效果隻在該頁面内生效，不污染全局。
3. 在首頁中引入底部導航元件
我們剛剛建立了footer.vue，但還未引入，在首頁子產品views/index/index.vue中引入該元件
在首頁中引入底部導航元件
使用元件步驟：
（1）引入元件 import FooterNav from '../../components/footer.vue'
（2）局部注冊 注意寫在export default内部，components:{FooterNav}
（3）使用元件 <footer-nav></footer-nav> 注意命名，駝峰法定義的元件FooterNav需在使用時用短橫線連接配接<footer-nav>
再回到浏覽器，可以看到首頁已經有底部導航了
4.建立人員管理頁面
4.1 建立頁面
同樣的，因為人員管理可以算另外一個子產品，是以我們在src/views/建立一個檔案夾manage，再在manage檔案夾下建立index.vue
管理頁面
同樣在管理頁面引入了底部導航元件footer.vue
現在管理頁面建立完成，但還需在路由配置中引入才可以通過路由/manage去通路
增加/manage路由
接下來就去浏覽器檢驗，我們定義的兩個路由之間的跳轉
4.2 為底部導航綁定class
可以看到由于沒有給底部導航設定active狀态的樣式，切換起來不是很明顯，是以我們可以給底部導航綁定class值
在首頁使用<foot-nav>時綁定class類名isIndex
這裡使用v-bind指令來綁定class，第一個屬性為class名字，第二個屬性為布爾值，為true，則表示該元件有這個class，為false則沒有。是以，當通路首頁子產品時，底部導航有一個類名isIndex，我們可以在底部導航内部為isIndex設定樣式。
同樣的，也在管理頁面manage.vue為底部導航綁定class isManage。
另外還需注意一點，data在元件内部得寫為一個函數，通過return傳回資料值，這是因為元件之間是共享的，但是要保證它們各自的資料是私有，互不影響的，是以要給每個元件傳回新的data對象。這一點官網也有說明vuejs官網——data必須是函數。
傳回浏覽器檢視，綁定的class已經生效
4.3 編寫功能
前面管理頁面把姓名清單寫死了，為友善實作增删改功能，接下來我們得通過資料模拟來實作清單渲染。
定義資料
（1）在data函數下新增peoples數組
（2）清單渲染
清單渲染用v-for指令，item為自定義的名字，指向數組中的每一個個體，peoples為我們在data函數中定義的數組名字，模闆渲染采用{{ }}
傳回浏覽器檢視效果
4.3.1 新增功能
控制輸入框顯示與隐藏
我們先将新增人員輸入框隐藏，當點選“新增”按鈕時再顯示，要實作這個功能我們需要用到條件渲染。
首先用到了v-show指令，showAdd是一個布爾值，為true則渲染，為false則隐藏
v-show指令與v-if指令的差別就在于，前者一開始就加載，更适用于頻繁的切換，後者需首先判斷布爾值，為true才加載渲染
同時我們給按鈕增加一個點選事件（v-on是綁定事件指令），用于控制showAdd的值進而控制輸入框div的隐藏與顯示
vue中方法用methods:{}包裹，裡面的add(){}也等同于add:function(){}
檢視效果
新增事件
給輸入框雙向綁定其輸入的資料，給輸入區域的“确定”按鈕綁定一個事件去擷取輸入框輸入的資料并儲存進數組。
v-model指令是雙向綁定，一般用于表單元件
當輸入框的值改變，其綁定的nameValue跟着改變
同理，當綁定的nameValue值改變，輸入框的值也跟着改變
我們這裡還做了判斷，如果什麼都不輸，或輸入空格就彈出提示，隻有當輸入的值不為空時再儲存
檢視效果
4.3.2 删除功能
删除功能有一個重點，我們得擷取清單的index索引值，來判斷到底删除哪一個值
更改一下清單循環，加入索引，并将索引值綁定到td标簽上，通過event點選事件去擷取td标簽上的id，進而去删除索引值為id的值
檢視效果
4.3.3 編輯功能
首先建立編輯輸入區域，通過點選“編輯”控制其渲染。
當點選“編輯”字樣時，觸發edit事件，edit事件主要控制showEdit為true，讓編輯輸入區域渲染出來，同時還擷取td标簽上的id值，儲存到一個變量editId中。
同樣也給編輯輸入框雙向綁定一個值newName。
當點選“确定”按鈕時，觸發editName事件，editName事件首先擷取editId的值以及input綁定的newName值，再更改索引值為editId的name屬性
檢視效果