Vue实例总结
一、登陆框的要点总结：
1、暂无数据就是要myData里没数据时候才出来；删除全部就是要有数据才出来。v-show的使用；
2、表格行就是需要循环数据，v-for、{{$index}}、{{item.属性}}的用法
3、给操作按钮绑定事件：v-on:click="add()"；
给input添加双向数据绑定、然后通过"this.属性"获取属性值，再将对象push到数组里面
4、input type="reset"使用、模态框的使用
5、声明一个nowIndex获取当前点击的行数。点击删除的时候，将当前行索引赋值给nowIndex；点全部删除的时候就赋值-2
6、给模态框里面的确定去绑定click事件，通过传参的nowIndex去判断删除那些数据
7、点删除或全部删除，通过v-if=""/v-else去显示不同的内容
8、总结：跟jquery相比的话，vue考虑问题的角度就要从数据方向去考虑（考虑数据有没有，考虑数据去怎样影响dom变化）；而jquery则是从dom方向去考虑（先建立dom，然后去给dom节点赋值）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue实例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<style>
</style>
<link rel="stylesheet" href="lib/bootstrap.min.css">
<script src="lib/jquery-1.7.2.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="vue.js"></script>
<script>
window.onload=function(){
new Vue({
el:'#box',
data:{
myData:[],
username:'',
age:'',
nowIndex:-
},
methods:{
add:function(){
this.myData.push({
name:this.username,
age:this.age
});
this.username='';
this.age='';
},
deleteMsg:function(n){
){
this.myData=[];
}else{
);
}
}
}
});
};
</script>
</head>
<body>
<div class="container" id="box">
<form role="form">
<div class="form-group">
<label for="username">用户名:</label>
<input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
</div>
<div class="form-group">
<label for="age">年 龄:</label>
<input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
</div>
<div class="form-group">
<input type="button" value="添加" class="btn btn-primary" v-on:click="add()">
<input type="reset" value="重置" class="btn btn-danger">
</div>
</form>
<hr>
<table class="table table-bordered table-hover">
<caption class="h3 text-info">用户信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">年龄</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in myData">
<td>{{$index+}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>
<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" v-on:click="nowIndex=$index">删除</button>
</td>
</tr>
<tr v-show="myData.length!=0">
<td colspan=" class="text-right">
<button class="btn btn-danger btn-sm" v-on:click="nowIndex=-2" data-toggle="modal" data-target="#layer" >删除全部</button>
</td>
</tr>
<tr v-show="myData.length==0">
<td colspan=" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
</table>
<!--模态框 弹出框-->
<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title" v-if="nowIndex == -2">确认删除全部么?</h4>
<h4 class="modal-title" v-else>确认删除么?</h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" v-on:click="deleteMsg(nowIndex)">确认</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Vue实例总结的更多相关文章
- Vue - 实例
1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- vue实例生命周期
实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...
- vue实例的几个概念
1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...
- Vue实例对象的数据选项
前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...
- vue.js开发环境搭建以及创建一个vue实例
Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...
- Vue 实例中的生命周期钩子
Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...
- v-cloak 实现vue实例未编译完前不显示
前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...
- vue实例讲解之axios的使用
本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...
- vue实例讲解之vue-router的使用
实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...
随机推荐
- python学习笔记 序列化
在程序运行的过程中,所有的变量都是在内存中,比如,定义一个dict: d = dict(name='Bob', age=20, score=88) 可以随时修改变量,比如把name改成'Bill',但 ...
- GIt 和 Github
原创 by zoe.zhang GitHub中采用的比较多得是markdown的语法,博客园里对markdown的支持感觉不是特别友好,但是为了应景,还是用了markdown来写这一篇文 ...
- js 函数分类2
js 通用监听函数实现 // 把所有方法封装到一个对象里面,充分考虑兼容写法 var EventUtil = { // 添加DOM事件 addEvent: function(element, type ...
- idea配置maven自动下载 源码和文档
勾上图中红框处,即可
- [ python ] 使用sys模块实现进度条
在写网络IO传输的时候, 有时候需要进度条来显示当前传输进度,使用 sys 模块就可以实现: sys.stdout.write() 这个函数在在控制台输出字符串不会带任何结尾,这就意味着这个输出还没有 ...
- OleDbDataAdapter具体使用11
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- k8s的故障切换（failover）
当前3个节点的状态都为ready 当前node1有两个pod node2有1个pod 现在将node1关机会有怎样的现象 ping 分布在node1节点的pod地址已经ping不通. 在node1节 ...
- CSDN博客用Windows Live Writer方法，终于可以离线编辑了！
以下是安装WLW 和相关设置: 1. 下载安装WLW (步骤略,可自行下载,官方下载地址:http://www.microsoft.com/zh-cn/download/details.aspx?id ...
- C#给IIS添加禁止IP限制
/// <summary> /// 给IIS添加禁止IP限制 /// 仅针对iis 7及以上版本 /// 首先需要引入Microsoft.Web.Administration.dll // ...
- webloader上传图片详细教程/使用thinkphp5.0（原创）
这个插件对后端程序员相当友好,无论是JAVA还是PHP,抑或python,基本只需要一句代码就能完成上传并且预览的效果,先上效果图,让你们眼馋一下 废话不说,直接撸代码,前端代码如下: <htm ...