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 memcache操作-安装、连接memcache
安装memecache wget http://memcached.org/latest tar -zxvf memcached-1.x.x.tar.gz cd memcached-1.x.x ./c ...
- win32 listctrl控件右键菜单的实现
HMENU Menu_list,Menu_all; POINT point; HINSTANCE hInstance;//下面代码放到BOOL WINAPI DialogProc下 case WM_C ...
- PostgreSQL教程
https://www.yiibai.com/postgresql/ https://blog.csdn.net/zhangzeyuaaa/article/details/77941039
- AC日记——[Noi2011]阿狸的打字机 bzoj 2434
2434 思路: 构建ac自动机: 抽离fail树: 根据字符串建立主席树: 在线处理询问: 询问x在y中出现多少次,等同于y有多少字母的fail能走到x: 1a,hahahahah: 代码: #in ...
- [libgdx游戏开发教程]使用Libgdx进行游戏开发(4)-素材管理
游戏中总是有大量的图像资源,我们通常的做法是把要用的图片做成图片集,这样做的好处就不多说了.直接来看怎么用. 这里我们使用自己的类Assets来管理它们,让这个工具类作为我们的资源管家,从而可以在任何 ...
- POJ 1703 Find them, Catch them【种类/带权并查集+判断两元素是否在同一集合/不同集合/无法确定+类似食物链】
The police office in Tadu City decides to say ends to the chaos, as launch actions to root up the ...
- Problem A: 英雄无敌3(1)【dp/待补】
Problem A: 英雄无敌3(1) Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 86 Solved: 16[Submit][Status][ ...
- python——入门系列(一)索引与切片
1.索引和切片:python当中数组的索引和其他语言一样,从0~n-1,使用索引的方法也是中括号,但是python中的切片的使用简化了代码 索引:取出数组s中第3个元素:x=s[2] 切片:用极少的代 ...
- DP(悬线法)【P1169】 [ZJOI2007]棋盘制作
顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述-->p1169 棋盘制作 题目大意 给定一个01棋盘,求其中01交错的最大正方形与矩形. 解题思路: 动态规划---悬线法 以下内 ...
- RabbitMQ (四) 工作队列之公平分发
上篇文章讲的轮询分发 : 1个队列,无论多少个消费者,无论消费者处理消息的耗时长短,大家消费的数量都一样. 而公平分发,又叫 : 能者多劳,顾名思义,处理得越快,消费得越多. 生产者 public c ...