前提した後、ブートストラップのjQueryをインストールするインストール
コマンドを実行します。
NPMブートストラップインストール
2
main.jsで導入
'ブートストラップ/ DIST / CSS / bootstrap.min.css' インポート
'ブートストラップ/ DIST / JS / bootstrap.min' インポート
そして、コードbootstrap.vueを追加
<テンプレート>
<！ - エリアを制御するために作成されました - >
<div要素のid = 'アプリ'>
<のdivクラス=「パネルパネルプライマリ」>
<のdivクラス=「パネルの見出し」>
<h3のクラス= 'パネルタイトル'> </ H3>製品を追加
</ div>
<DIV CLASS =「パネル体形態インライン」>
<ラベル>
ID：
<INPUT TYPE = 'テキスト' クラス= 'フォームコントロール' V-モデル= 'ID' />
</ label>は
<ラベル>
名：
<input type = 'text' のクラス= 'フォームコントロール' V-モデル= '名前' @ keyup.enter = / '追加'>
</ label>は
<ラベル>
キーワード検索：
< - ノート:! Vueのすべての命令は、呼び出されたときに、V-し始めています - >
<INPUT TYPE = 'テキスト' クラス= 'フォームコントロール' V-モデル= 'キーワード' />
</ label>は
<入力タイプ= 'ボタン' 値=クリック@クラス= 'BTN BTN-主' '追加' = / '追加'>
</ div>
</ div>
<テーブルクラス=「テーブルのテーブルホバーテーブルボーダーテーブルストライプ」>
<THEAD>
<TR>
<番目> ID </目>
<番目>名前</目>
<番目>時間</目>
<番目>操作</目>
</ TR>
</ THEAD>
<TBODY>
<TR-Vのための '検索（キーワード）の項目' =：キー= 'item.id'>
<TD> {{item.id}} </ TD>
<TD> {{item.name}} </ TD>
<TD> {{item.ctime}} </ TD>
<TD>
<a href='#' @click.prevent='del(item.id)'>削除する</a>
</ TD>
</ TR>
</ TBODY>
</ TABLE>
</ div>
</テンプレート>
<スクリプト>
輸出のデフォルト{
名前：「製品」、
データ（）{
リターン{
リスト：[
{ID：1、名称： 'ベンツ'、CTIME：新しいDate（）}、
{ID：2、名称： 'BMW'、CTIME：新しいDate（）}
]、
ID： ''、
名前： ''、
キーワード：「」
}。
}、
方法：{
{追加（）
this.list.push（{ID：this.id、名前：this.name、CTIME：新しいDate（）}）。
}、
デル（ID）{
せインデックス= this.list.findIndex（項目=> {
{（=== IDをitem.id）場合
trueを返します。
}
}）;
this.list.splice（インデックス1）。
}、
検索（キーワード）{
戻りthis.list.filter（項目=> {
IF（item.name.includes（キーワード））{
返却物;
}
}）;
}
}
}。
</ SCRIPT>
<スタイルは、スコープ>
H1、
H2 {
フォント重量：ノーマル;
}
{
リストスタイルのタイプ：なし。
パディング：0;
}
{
表示：インラインブロック。
マージン：0 10pxの;
}
{
色：＃42b983。
}
</スタイル>
実行NPMの実行DEV
