1.Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.下面一个简单的使用实现增删查功能



<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" href="styles/demo.css" />

	</head>

	<body>

		<div id="app">

			<fieldset>

				<legend>

					Create New Person

				</legend>

				<div class="form-group">

					<label>Name:</label>

					<input type="text" v-model="newPerson.name"/>

				</div>

				<div class="form-group">

					<label>Age:</label>

					<input type="text" v-model="newPerson.age"/>

				</div>

				<div class="form-group">

					<label>Sex:</label>

					<select v-model="newPerson.sex">

					<option value="Male">Male</option>

					<option value="Female">Female</option>

				</select>

				</div>

				<div class="form-group">

					<label></label>

					<button @click="createPerson">Create</button>

				</div>

		</fieldset>

		<table>

			<thead>

				<tr>

					<th>Name</th>

					<th>Age</th>

					<th>Sex</th>

					<th>Delete</th>

				</tr>

			</thead>

			<tbody>

				<tr v-for="(person, index) in people">

					<td>{{ person.name }}</td>

					<td>{{ person.age }}</td>

					<td>{{ person.sex }}</td>

					<td :class="'text-center'"><button @click="deletePerson(index)">Delete</button></td>

				</tr>

			</tbody>

		</table>

		</div>

	</body>

	<script src="https://cdn.jsdelivr.net/npm/vue"></script><!-- 生产环境版本，优化了尺寸和速度 -->

	<script>

		var vm = new Vue({

			el: '#app',

			data: {

				newPerson: {

					name: '',

					age: 0,

					sex: 'Male'

				},

				people: [{

					name: 'Jack',

					age: 30,

					sex: 'Male'

				}, {

					name: 'Bill',

					age: 26,

					sex: 'Male'

				}, {

					name: 'Tracy',

					age: 22,

					sex: 'Female'

				}, {

					name: 'Chris',

					age: 36,

					sex: 'Male'

				}]

			},

			methods:{

				createPerson: function(){

					this.people.push(this.newPerson);

					// 添加完newPerson对象后，重置newPerson对象

					this.newPerson = {name: '', age: 0, sex: 'Male'}

				},

				deletePerson: function(index){

					// 删一个数组元素

					this.people.splice(index,1);

				}

			}

		})

	</script>

</html>

实现的效果图如下：

Vue.js-简单的增删查功能的更多相关文章

  1. js中数组增删查改unshift、push、pop、shift、slice、indexOf、concat、join

    js中数组增删查改unshift.push.pop.shift.slice.indexOf.concat.join

  2. vue.js核心最基本的功能

    Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: , text: , text: , text: '随便其它什么人吃的东西' } ] }}) 蔬菜 奶酪 随便其 ...

  3. nodejs连接mysql并进行简单的增删查改

    最近在入门nodejs,正好学习到了如何使用nodejs进行数据库的连接,觉得比较重要,便写一下随笔,简单地记录一下 使用在安装好node之后,我们可以使用npm命令,在项目的根目录,安装nodejs ...

  4. Vue.js简单的应用

    1:一个简单实现 下面代码部分: <body> <div id="myDiv1"> {{userName}} </div> </body& ...

  5. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  6. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  7. vue.js简单添加和删除

    这只是个简单的添加和删除,没有连接后台数据的 <%@ page language="java" contentType="text/html; charset=UT ...

  8. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

  9. ABP+NetCore+Vue.js实现增删改查

    ABP我就不多介绍了,不知道的可以自己百度 本篇开发工具VS2017,数据库SQL SERVER2012,系统Win7 1.去ABP官网下载对应的模板,下载地址:https://aspnetboile ...

随机推荐

  1. C#在不同平台下DLL的引用问题

    缘起 很多时候,我们需要引用在不同平台下的DLL,32位(X86)和64位(X64).如果平台错误,在C#中会引发BadImageFormatException异常. 解决思路 我们同时不能添加不同平 ...

  2. Binder or AIDL的最简单实践

    1.前言: 在Android开发中多进程的合理使用+进程间通信的IPC是一个比较难的点.特别是Android特有的Binder机制,非常复杂,对于应用层开发的初级开发工程师强求深入理解Binder机制 ...

  3. powerdesigner 将表中name列值复制到comment列 (保留原有comment)

    /** * PowerDesigner里面将表中name列值复制到comment列 * @see --------------------------------------------------- ...

  4. 为My97DatePicker日期插件设置默认日期

    datepicker.zip 为My97DatePicker日期插件设置默认日期,开始日期为系统日期的前一个月,结束日期为系统日期: 开始日期不能大于结束日期,且都不能大于今天: 开始日期-maxDa ...

  5. Sencha Architect打开闪退问题修复

    删除以下位置的cache文件夹 C:\Users\Administrator\AppData\Local\Sencha\Sencha Architect 3.2\Cache bug解决参考 https ...

  6. angular之$on、$emit、$broadcast

    1.$scope.$on view事件 //View被加载但是DOM树构建之前时: $scope.$on('$viewContentLoading', function(event, viewConf ...

  7. JavaScript的进阶之路（二）函数简介，变量、作用域和内存问题

    <h3>ECMAScript中函数不存在函数签名的概念,没有重载</h3><h3>无需指定返回值,可以在任何时候返回任何值.未指定返回值的函数,返回的是一个特殊的u ...

  8. Spring 框架（二）

    1AOP 1.1 AOP介绍 1.1.1 什么是AOP l 在软件业,AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功 ...

  9. WPF 蒙罩层 LoadingPage

    WPF 蒙罩层 LoadingPage 前言 无论是在PC客户端,移动端,网站,在遇到长时间处理的时候都会需要用到蒙罩层,让用户有更好的体现.今天上网逛了一下各位前辈网友的蒙罩层的实现方式,觉得有很多 ...

  10. 万网知您所需，“域”众不同--.link/.love/.help等一大波新顶级域来袭！

    万网在新顶级域市场再次发力,一大波域名界的小鲜肉新鲜上线,价格优惠,限时低至9元起,更有丰富的可注册资源. 一下,即刻世界,用记录生活,用观看世界, 用和做最好的! 新上线的个性化新顶级域价格如下: ...