一、登陆框的要点总结：

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>&times;</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实例总结的更多相关文章

  1. Vue - 实例

    1.实例属性介绍如下图所示: 具体介绍如下: A.$parent:访问当前组件的父实例 B.$root:访问当前组件的根实例,要是没有的话,则是自己本身 C.$children:访问当前组件实例的直接 ...

  2. 05-Vue入门系列之Vue实例详解与生命周期

    Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...

  3. vue实例生命周期

    实例生命周期 var vm = new Vue({ data: { a: 1 }, created: function () { // `this` 指向 vm 实例 console.log('a i ...

  4. vue实例的几个概念

    1.构造器 vue应用都是通过vue构造函数创建实例来启动的,在创建vue实例时需要传入一个options对象,该对象可以包含数据.模板.挂在元素.方法.生命周期钩子等选项: var vm = new ...

  5. Vue实例对象的数据选项

    前面的话 一般地,当模板内容较简单时,使用data选项配合表达式即可.涉及到复杂逻辑时,则需要用到methods.computed.watch等方法.本文将详细介绍Vue实例对象的数据选项 data ...

  6. vue.js开发环境搭建以及创建一个vue实例

    Vue.js 是一套构建用户界面的渐进式框架.Vue 只关注视图层, 采用自底向上增量开发的设计.Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 在使用 vue.js ...

  7. Vue 实例中的生命周期钩子

    Vue 框架的入口就是 Vue 实例,其实就是框架中的 view model ,它包含页面中的业务处理逻辑.数据模型等,它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻 ...

  8. v-cloak 实现vue实例未编译完前不显示

    前言: 由于网速原因,(ps:之前同事无意间在网速很差的情况下测出的)在使用vue开发时,会由于vue实例还没编译成功的时候数据绑定的"Mustache"标签会闪现一下,造成不好的 ...

  9. vue实例讲解之axios的使用

    本篇来讲解一下axios插件的使用,axios是用来做数据交互的插件. 这篇将基于vue实例讲解之vue-router的使用这个项目的源码进行拓展. axios的使用步骤: 1.安装axios npm ...

  10. vue实例讲解之vue-router的使用

    实例讲解系列之vue-router的使用 先总结一下vue-router使用的基本框架: 1.安装并且引入vue-router 安装:npm install vue-router --save-dev ...

随机推荐

  1. django原生sql

    参考:http://www.jb51.net/article/128257.htm coding=utf-8 from django.core.paginator import Paginator d ...

  2. module加载过程初步分析［更新中］【转】

    转自:http://blog.chinaunix.net/uid-1817735-id-2837068.html 分析这个过程可以有助于我们认识在加载模块时出现的问题大抵在哪里了. 直接从sys_in ...

  3. [ Python - 3 ] python3.5中不同的读写模式

    r 只能读.r+可读可写,不会创建不存在的文件.如果直接写文件,则从顶部开始写,覆盖之前此位置的内容,如果先读后写,则会在文件最后追加内容.w+ 可读可写 如果文件存在 则覆盖整个文件不存在则创建w ...

  4. JavaScript秘密花园

    译文地址 bonsaiden.github.io/JavaScript-Garden/zh/#intro.authors 之前被人问到JS一些概念性的东西,感觉很模糊,可能层次比较浅,偏理论的东西实践 ...

  5. 解决vim没有颜色的办法

    首先打开vim,输入命令 scriptnames看看vim加载了哪些脚本. :scriptnames 输出入下 : /home/users/xxx/.vimrc : /home/users/xxx/t ...

  6. Java语言中的协变和逆变(zz)

    转载声明: 本文转载至:http://swiftlet.net/archives/1950 协变和逆变指的是宽类型和窄类型在某种情况下的替换或交换的特性.简单的说,协变就是用一个窄类型替代宽类型,而逆 ...

  7. 使用Pygame制作微信打飞机游戏PC版

    前一阵子看了一篇文章:青少年如何使用Python开始游戏开发 .看完照葫芦画瓢写了一个,觉得挺好玩儿,相当于简单学了下Pygame库.这篇文章是个12岁小孩儿写的,国外小孩儿真心NB,想我12岁的时候 ...

  8. Response 部分功能

    设置状态码的方法:    void setStatus(int sc)     void setStatus(int sc, String sm) 设置响应头的方法:    void setHeade ...

  9. (14)python 文件和流

    打开文件 f=open('C:\Temp.txt') 读取数据 f.read(); 关闭文件 f.close();#关闭后将无法再读取 打开文件的方式 不写模式,默认是只读模式 1.r 打开只读文件, ...

  10. POJ 3126 Prime Path【从一个素数变为另一个素数的最少步数/BFS】

    Prime Path Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26475 Accepted: 14555 Descript ...