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 ...
随机推荐
- Pycharm中快捷键大全
#1.按住ctrl然后鼠标放在函数上就会提示出这个函数有那些参数,双击进入该函数. 1.Pycharm中快捷键大全,遇到一个更新一个 撤销与反撤销:Ctrl + z,Ctrl + Shift + z ...
- 在opensuse 中安装视频解码器
最近由于需要32位的linux系统使用,很多版本的linux都不再发布32的安装镜像了,有一些又不是很熟悉,我熟悉的manjaro发布的32镜像又不是kde桌面,最后发现opensuse的滚动版本,即 ...
- linux环境下的GUN make学习笔记（一）
第一章:概述 1.1:make概述 在linux环境下使用make工具能够比较容易的构建一个属于自己的工程,整个工程的编译只需要一个命令就可以完成编译.连接以至于最后的执行.不过我们需要投入一些时间去 ...
- Mac-item+zsh
$brew cask install iterm2 $ sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/m ...
- [ Python - 9 ] 高阶函数map和reduce连用实例
1. 利用map和reduce编写一个str2float函数,把字符串'123.456'转换成浮点数123.456: from functools import reduce def str2num( ...
- [ Mariadb ] 记录一次MySQL数据库时区的问题
操作系统:Centos 7数据库:5.5.52-MariaDB 根本问题:由于系统时区不对,造成数据库的时区和数据的时间不正确. 处理办法: # 查看系统时区, [root@mongodb ~]# t ...
- mysql:functional dependency
0down vote First, a functional dependency in the form A->B means that, given one value for A, we ...
- tcpdump学习（1）：安装
目前学习mysql,其中,提到使用tcpdump来进行query的抓包日志,那么,首先就要安装tcpdump. 在ubuntu中,tcpdump是缺省安装的,如果没有,则按照以下步骤做: 1)安装li ...
- gcc 学习
gcc -lrt 参数说明: 说明在连接生成可执行文件的时候,将连接库librt.so or librt.a -l 参数说明 连接库 编译 使用 clock_gettime函数的,gcc需要添加上 ...
- Spring创建对象的原理
当容器启动时,首先会加载给定的配置文件,将配置文件逐行解析.当解析到bean标签时,根据class属性的值,通过反射调用创建对象. 将创建好的对象存储到Spring自身维护的Map当中.map中的ke ...