一、 實(shí)驗(yàn)?zāi)繕?biāo)
1、熟悉Vue開發(fā)工具，學(xué)會(huì)安裝Vue-CLI腳手架工具。
2、學(xué)會(huì)使用Vue-CLI腳手架工具在自己的電腦上建立項(xiàng)目，并運(yùn)行調(diào)試。
3、品牌列表網(wǎng)頁編程。
二、 實(shí)驗(yàn)內(nèi)容：
1、Vue-CLI腳手架工具搭建一個(gè)Web項(xiàng)目。
2、使用Vue技術(shù)編寫一個(gè)簡(jiǎn)單的品牌列表網(wǎng)頁，內(nèi)容及格式可自己定，效果可參照網(wǎng)址：https://blog.csdn.net/zerobaek/article/details/86567977
截圖展示：



主要代碼及實(shí)現(xiàn)方法簡(jiǎn)介：
操作區(qū)：

<div class="panel panel-primary"><div class="panel-heading"><h3 class="panel-title">添加品牌名</h3></div><div class="panel-body form-inline"><label>序號(hào):<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>搜索關(guān)鍵字：<input type="text" class="form-control" v-model="keywords"></label></div></div>

展示區(qū)：

<table class="table table-bordered table-hover table-striped"><thead><tr><th>序號(hào)</th><th>品牌名</th><th>時(shí)間</th><th>選項(xiàng)</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>

調(diào)度：

<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>

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。