https://www.ma-no.org/en/programming/javascript/crud-operations-using-vue-js-a-basic-example在本教程中，我们将向您展示如何使用 vue js 创建 CRUD 应用程序。这是 vue.js crud 应用程序的非常基本和简单的示例。使用这个 vuejs crud（创建读取更新删除），您可以轻松地使用 php mysql 或在 laravel 或 codeigniter 框架中实现。所以这是一个非常简单的初学者示例教程。
因此，只需遵循以下两个文件，即可使用 vue.js获得非常惊人且简单的 CRUD 应用程序。我们将创建以下两个文件来制作简单的 crud 应用程序。
1 - index.html
2 - index.js
现在您可以在下面看到两个文件的代码：
index.html
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Basic CRUD Operations Using Vue.js Example</title>
<link rel="stylesheet prefetch" href="bootstrap.min.css">
<link rel="stylesheet prefetch" href="bootstrap-theme.min.css">
</head>
<body>
<div class="container">
<header class="page-header">
<div class="branding">
<img src="https://vuejs.org/images/logo.png" alt="Logo" title="Home page" class="logo"/>
<h1>Basic CRUD Operations Using Vue.js Example - HDTuto.com</h1>
</div>
</header>
<main id="app"></main>
</div>
<template id="invoice-list">
<section>
<div class="actions">
<router-link class="btn btn-default" :to="{path: '/invoice-add'}">
<span class="glyphicon glyphicon-plus"></span>
Add invoice
</router-link>
</div>
<div class="filters row">
<div class="form-group col-sm-3">
<label for="search-element">invoice name</label>
<input v-model="searchKey" class="form-control" id="search-element" requred/>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Description</th>
<th>Price</th>
<th class="col-sm-2">Actions</th>
</tr>
</thead>
<tbody>
<tr v-for="invoice in filteredinvoices">
<td>
<router-link :to="{name: 'invoice', params: {invoice_id: invoice.id}}">{{ invoice.name }}</router-link>
</td>
<td>{{ invoice.description }}</td>
<td>
{{ invoice.price }}
<span class="glyphicon glyphicon-euro" aria-hidden="true"></span>
</td>
<td>
<router-link class="btn btn-warning btn-xs" :to="{name: 'invoice-edit', params: {invoice_id: invoice.id}}">Edit</router-link>
<router-link class="btn btn-danger btn-xs" :to="{name: 'invoice-delete', params: {invoice_id: invoice.id}}">Delete</router-link>
</td>
</tr>
</tbody>
</table>
</section>
</template>
<template id="invoice-add">
<section>
<h2>Add new invoice</h2>
<form v-on:submit="createinvoice">
<div class="form-group">
<label for="add-name">Name</label>
<input class="form-control" id="add-name" v-model="invoice.name" required/>
</div>
<div class="form-group">
<label for="add-description">Description</label>
<textarea class="form-control" id="add-description" rows="10" v-model="invoice.description"></textarea>
</div>
<div class="form-group">
<label for="add-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="add-price" v-model="invoice.price"/>
</div>
<button type="submit" class="btn btn-primary">Create</button>
<router-link class="btn btn-default" :to="{path: '/'}">Cancel</router-link>
</form>
</section>
</template>
<template id="invoice">
<section>
<h2>{{ invoice.name }}</h2>
<b>Description: </b>
<div>{{ invoice.description }}</div>
<b>Price:</b>
<div>{{ invoice.price }}<span class="glyphicon glyphicon-euro"></span></div>
<br/>
<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
<router-link to="'/'">Back to invoice list</router-link>
</section>
</template>
<template id="invoice-edit">
<section>
<h2>Edit invoice</h2>
<form v-on:submit="updateinvoice">
<div class="form-group">
<label for="edit-name">Name</label>
<input class="form-control" id="edit-name" v-model="invoice.name" required/>
</div>
<div class="form-group">
<label for="edit-description">Description</label>
<textarea class="form-control" id="edit-description" rows="3" v-model="invoice.description"></textarea>
</div>
<div class="form-group">
<label for="edit-price">Price, <span class="glyphicon glyphicon-euro"></span></label>
<input type="number" class="form-control" id="edit-price" v-model="invoice.price"/>
</div>
<button type="submit" class="btn btn-primary">Save</button>
<router-link to="'/'" class="btn btn-default">Cancel</router-link>
</form>
</section>
</template>
<template id="invoice-delete">
<section>
<h2>Delete invoice {{ invoice.name }}</h2>
<form v-on:submit="deleteinvoice">
<p>The action cannot be undone.</p>
<button type="submit" class="btn btn-danger">Delete</button>
<router-link to="'/'" class="btn btn-default">Cancel</router-link>
</form>
</section>
</template>
<script src='vue.js'></script>
<script src='vue-router.js'></script>
<script src="index.js"></script>
</body>
</html>index.js
var invoices = [
{id: 1, name: 'Laravel', description: 'Provide Laravel Information.', price: 100},
{id: 2, name: 'AngularJS', description: 'Provide AngularJS Information.', price: 100},
{id: 3, name: 'PHP', description: 'Provide PHP Information.', price: 100}
];
function findinvoice(invoiceId) {
return invoices[findinvoiceKey(invoiceId)];
}
;
function findinvoiceKey(invoiceId) {
for (var key = 0; key < invoices.length; key++) {
if (invoices[key].id == invoiceId) {
return key;
}
}
}
;
var List = Vue.extend({
template: '#invoice-list',
data: function () {
return {invoices: invoices, searchKey: ''};
},
computed: {
filteredinvoices: function () {
var self = this;
console.log()
return self.invoices.filter(function (invoice) {
return invoice.name.indexOf(self.searchKey) !== -1
})
}
}
});
var invoice = Vue.extend({
template: '#invoice',
data: function () {
return {invoice: findinvoice(this.$route.params.invoice_id)};
}
});
var invoiceEdit = Vue.extend({
template: '#invoice-edit',
data: function () {
return {invoice: findinvoice(this.$route.params.invoice_id)};
},
methods: {
updateinvoice: function () {
var invoice = this.invoice;
invoices[findinvoiceKey(invoice.id)] = {
id: invoice.id,
name: invoice.name,
description: invoice.description,
price: invoice.price
};
router.push('/');
}
}
});
var invoiceDelete = Vue.extend({
template: '#invoice-delete',
data: function () {
return {invoice: findinvoice(this.$route.params.invoice_id)};
},
methods: {
deleteinvoice: function () {
invoices.splice(findinvoiceKey(this.$route.params.invoice_id), 1);
router.push('/');
}
}
});
var Addinvoice = Vue.extend({
template: '#invoice-add',
data: function () {
return {invoice: {name: '', description: '', price: ''}
}
},
methods: {
createinvoice: function () {
var invoice = this.invoice;
invoices.push({
id: Math.random().toString().split('.')[1],
name: invoice.name,
description: invoice.description,
price: invoice.price
});
router.push('/');
}
}
});
var router = new VueRouter({
routes: [{path: '/', component: List},
{path: '/invoice/:invoice_id', component: invoice, name: 'invoice'},
{path: '/invoice-add', component: Addinvoice},
{path: '/invoice/:invoice_id/edit', component: invoiceEdit, name: 'invoice-edit'},
{path: '/invoice/:invoice_id/delete', component: invoiceDelete, name: 'invoice-delete'}
]});
new Vue({
el: '#app',
router: router,
template: '<router-view></router-view>'
});现在您可以运行上面的示例
584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
