一、 實驗目標
1、熟悉Vue開發工具，學會安裝Vue-CLI腳手架工具。
2、學會使用Vue-CLI腳手架工具在自己的電腦上建立項目，并運行調試。
3、品牌列表網頁編程。
二、 實驗內容：
1、Vue-CLI腳手架工具搭建一個Web項目。
2、使用Vue技術編寫一個簡單的品牌列表網頁，內容及格式可自己定，效果可參照網址：https://blog.csdn.net/zerobaek/article/details/86567977
截圖展示：



主要代碼及實現方法簡介：
操作區：

<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌名</h3></div><div class="panel-body form-inline"><label>序號:<input type="text" class="form-control" v-model="id"></label><label>品牌名:<input type="text" class="form-control" v-model="name"></label><input type="button" value="添加" class="btn btn-primary" @click="add()"><label>搜索關鍵字：<input type="text" class="form-control" v-model="keywords"></label></div></div>

展示區：

<table class="table table-bordered table-hover table-striped"><thead><tr><th>序號</th><th>品牌名</th><th>時間</th><th>選項</th></tr></thead><tbody><tr v-for="item in search(keywords)" :key="item.id"><td>{{ item.id }}</td><td v-text="item.name"></td><td>{{ item.ctime }}</td><td><a href="" @click.prevent="del(item.id)">刪除</a></td></tr></tbody></table>

調度：

<script> export default {name: 'HelloWorld',props: {msg: String},data(){return{id: '',name: '',keywords: '',list: [{ id: 1, name: '奧迪', ctime: new Date() },{ id: 2, name: '寶馬', ctime: new Date() },{ id: 3, name: '大眾', ctime: new Date() }]}},methods: {add() {var car = { id: this.id, name: this.name, ctime: new Date() }this.list.push(car);this.id = this.name = '';},del(id) {var index = this.list.findIndex(item => {if (item.id == id) {return true;}})this.list.splice(index, 1);},search(keywords) {return this.list.filter(item => {if (item.name.includes(keywords)) {return item;}});}} } </script>

三、 心得體會：
1、 進一步鍛煉了vue代碼書寫能力
2、 熟悉了vue-cli腳手架
3、能夠區分vue2和vue3部分區別

總結

以上是生活随笔為你收集整理的移动应用开发——实验二的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。