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. js时间字符串转时间戳

    字符串形如:2016-06-20 10:41 转换为时间戳: var date = "2016-06-20 10:41"; date = date.substring(,); da ...

  2. Redis整合spring总结

    一:Redis简介: Redis是一个开源(BSD许可)的内存数据结构存储,用作数据库,缓存和消息代理. 简单来说,它是一个以(key,value)的形式存储数据的数据库. 官网:https://re ...

  3. Java使用反射来获取成员变量泛型信息

    Java通过指定类对应的Class对象,程序可以获得该类里包括的所有Field,不管该Field使用private修饰,还是使用public修饰.获得了Field对象后,就可以很容易的获得该Field ...

  4. MySql中存储引擎MyISAM与InnoDB区别于选择

    InnoDB: 支持事务处理等 不加锁读取 支持外键 支持行锁 不支持FULLTEXT类型的索引 不保存表的具体行数,扫描表来计算有多少行 DELETE 表时,是一行一行的删除 InnoDB 把数据和 ...

  5. java.lang.NullPointerException: Attempt to invoke virtual method 'java.util.List com.yunweather.app.db.YunWeatherDB.loadProvinces()' on a null object reference

    NullPointerException:查看自己的什么地方是否对空指针进行了操作 Attempt to invoke virtual method 'java.util.List com.yunwe ...

  6. img图片加载失败默认图片

    <img :src="item.goods_pic" onerror="javascript:this.src='../static/images/default. ...

  7. HDU4652：Dice

    题面 传送门 题意 \(m\)面的骰子 求连续出现\(n\)个相同面的期望次数 或者 求连续出现\(n\)个不同面的期望次数 Sol 设\(f[i]\)表示已经出现了\(i\)~\(n\)这些面相同的 ...

  8. HTML总结摘要

    一 概述 1.什么是HTML? HyperText Markup Language,超文本标记语言,客户端技术的技术,负责页面展示. 2.HTML的特点 标签不区分大小写. 3.请求地址 HTML是客 ...

  9. JS高级程序设计第三版——变量、作用域和内存问题

    JavaScript变量: 由于JavaScript变量松散类型的本质,决定了它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可 ...

  10. spark出现task不能序列化错误的解决方法

    应用场景:使用JavaHiveContext执行SQL之后,希望能得到其字段名及相应的值,但却出现"Caused by: java.io.NotSerializableException: ...