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. Linux_vim文本编辑器指令整理

    一般指令模式 : 可以移动光标,可以删除字符和删除整列,可以复制粘贴 编辑模式 : 按下"i, I, o, O, a, A, r, R"任意一个字母时进入;按下ESC退出编辑模式 ...

  2. SQLSTATE[HY000] [2002] No such file or directory in

    这个错误将数据库配置信息的localhost改成127.0.0.1就行了

  3. Win7下硬盘安装Ubuntu双系统

    一. 准备工作 1. 下载ubuntu镜像文件:Ubuntu-14.04.5-desktop-amd64.iso(4G及以上内存建议64位) 注意这个amd并不是指amd芯片. 2. 下载硬盘分区工具 ...

  4. Spring_Spring与IoC_基于注解的DI

    一.基本注解的使用 (1)导入AOP的Jar包 (2) 与set()无关 二.组件扫描器的base-package 三.@Component相关注解 四.@Scope 五.域属性的注入 (1)byTy ...

  5. poj3260 平衡问题（二维01背包）

    http://www.cnblogs.com/ziyi--caolu/p/3228090.html http://blog.csdn.net/lyy289065406/article/details/ ...

  6. 纯css画三角形，勾等形状

    //三角形 .money-ul li.active:after { content: ""; position: absolute; bottom: 0; right: 0; bo ...

  7. Python基础-进程和线程

    一.进程和线程的概念 首先,引出“多任务”的概念:多任务处理是指用户可以在同一时间内运行多个应用程序,每个应用程序被称作一个任务.Linux.windows就是支持多任务的操作系统,比起单任务系统它的 ...

  8. Python基础-小程序练习（跳出多层循环，购物车，多级菜单，用户登录）

    一. 从第3层循环直接跳出所有循环 break_flag = False count = 0 while break_flag == False: print("-第一层") wh ...

  9. androidwebview网页显示事件

    @Overridepublic void onPageCommitVisible(WebView view, String url) { super.onPageCommitVisible(view, ...

  10. 从Microsoft SQL Server迁移到MySQL指南

    转自 https://www.mysql.com/why-mysql/white-papers/sql-server-to-mysql-zh/ 由于 MySQL 将节约成本.自由选择平台.特性丰富等优 ...