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. python6

    集合-set    集合是高中数据中的一个概念.    确定的一堆无需数据,集合中的买个数据称为一个集合       集合的定义         1.创建空集合             变量 = se ...

  2. python 需求文件requirements.txt的创建及使用

    在虚拟环境中使用pip生成: (venv) $ pip freeze >requirements.txt 当需要创建这个虚拟环境的完全副本,可以创建一个新的虚拟环境,并在其上运行以下命令: (v ...

  3. Linux Loop设备 使用

    有时候需要一个独立的块设备,loop设备是个方便的选择,可通过如下方式创建 dd if=/dev/zero of=./loopback_file bs=1M count=1000 losetup /d ...

  4. CentOS7下开启端口

    开启端口: firewall-cmd --zone=public --add-port=80/tcp --permanent 含义: --zone #作用域 --add-port=80/tcp #添加 ...

  5. Bzoj1496: [NOI2006]千年虫

    题面 传送门 Sol 左右可以分开搞 然后就是要形成一个类似梳子的东西 设\(f[0/1][i][j]\) \(0\)凹,\(1\)凸,\(i\)为行,可以滚一维,\(j\)为该行长度 \(f[0][ ...

  6. 禁用F12和鼠标右键，防止查看控制台代码

    虽然是个治标不治本的办法,还是挺有用的(对Opera无效,Opera开始控制台是Ctrl+Shift+C) 在禁用同时,自身的代码健壮性也需要加强 // 屏蔽F12 document.onkeydow ...

  7. Python入门-类的成员

    昨天我们简单的认识了一下面向对象,以及和面向过程之间的区别,从而我们知道了类这个东西,今天我们就来详细的了解一下关于类的一些东西. 一.类的成员 首先, 什么是类的成员,很简单, 你能在类中写什么? ...

  8. 02_NIO简单实例

    [一个用NIO实现的客户端向服务端单向通信的例子] [服务端程序] package com.nio.test; import java.io.IOException; import java.net. ...

  9. C#链接数据库：SQL Server 2008

    自己学习C#编程,在WinForm编程中,代码测试连接数据库. 现在sqlserver中测试使用的数据库能否以指定的用户名和密码登录. 如图所示,计算机名为administrator,数据库实例为sq ...

  10. Visual C++编程实现摄像头视频捕捉

    原文:http://blog.csdn.net/nemojiang/article/details/653033?locationNum=7&fps=1 前言 DirectShow是微软公司提 ...