使用vue實現簡單的品牌管理

引入bootstrap

rel=

"stylesheet"
href
="../../js/bootstrap.min.css"
/>

>

class
="panel panel-primary"
>
class
="panel-heading"
>
class
="panel-title"
>
新增品牌h3
>
div>
class
="panel-body form-inline"
>
>
id:type
="text"
class
="form-control"
v-model
="newid"
/>
label
>
>
name:
@keyup.enter
="add()"
type
="text"
class
="form-control"
v-model
="newname"
/>
label
>
@click
="add()"
type
="button"
value
="新增"
class
="btn btn-primary"
/>
>
搜尋關鍵字:
v-color="
'blue'
" v-focus
type
="text"
class
="form-control"
v-model
="keywords"
/>
label
>
div>
div>
class
="table table-bordered table-hover table-striped"
>
>
>
>
idth
>
>
nmaeth
>
>
ctimeth
>
>
操作th
>
tr>
thead
>
>
v-for
="item in search(keywords)"
:ket
="item"
>
>
}td>
>
}td>
>
}td>
>
href="
" @click.prevent
="del(item.id)"
>
刪除a>
td>
tr>
tbody
>
table
>
div>
完成效果
完成頁面搭建後，就可以使用vue完成品牌的查詢與新增功能了
此時頁面效果在時間的展示上還需要進行轉換，這時候可以使用過濾器轉換時間格式
//定義過濾器,進行時間格式化

vue.
filter
('dateformat'
,function
(datestr)-$
-$`;});
過濾轉換後時間就能顯示正常了

使用原生實現簡單的vue
html 更新操作 js let vm new vue computed methods 觀察者 發布訂閱 觀察者 被觀察者 class dep 訂閱 addsub watcher 發布 notify class watcher get update vm.watch vm,school.name ...
Vue狀態管理Vuex簡單使用
狀態管理儲存在store index.js中，簡單說明如下 import vue from vue import vuex from vuex vue.use vuex export default newvuex.store state成員操作,必須通過mutations操作state mutat...
簡單使用Vue
安裝node.js 1 cmd檢視是否安裝成功 npm version npm v檢視安裝路徑 注意 安裝node.js的目的是為了使用npm指令 安裝使用vue devtools 2 解壓 3 cmd進入解壓目錄 執行命令 npm install npm run build 這一步一定不要忘了，沒...