[vue]基础篇stepbystep案例实践(废弃)

总结:

1.子组件可以触发父组件的方法,this.$emit() //(通知父组件干活)

2.父组件可以调用子组件的方法() // ref 如果放在组件上获取的是组件的实例并不是组件的dom元素

https://eeweb.top/tool/bootstrap-cheatsheet/#input-group-append

1.展示

2.全选/反选

3.删除

4.搜索

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

</head>

<body>

<div class="container" id="app">

    <div class="card">

        <div class="card-body form-inline">

            <label class="sr-only" for="inlineFormInputName1">id</label>

            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName1" placeholder="id"

                   autocomplete="off" v-model="id">

            <label class="sr-only" for="inlineFormInputName2">Name</label>

            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"

                   autocomplete="off" v-model="name">

            <button type="submit" class="btn btn-primary mb-2" @click="add">添加</button>

            <label class="sr-only" for="inlineFormInputName4">Name</label>

            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName3" placeholder="search"

                   autocomplete="off" v-model="keyword">

        </div>

        <table class="table table-bordered">

            <thead>

            <tr>

                <th>全选: <input type="checkbox" v-model="checkAll"></th>

                <th>id</th>

                <th>name</th>

                <th>ctime</th>

                <th>operation</th>

            </tr>

            </thead>

            <tbody>

            <tr v-for="(item,index) in search(keyword)" :key="item.id">

                <th><input type="checkbox" name="" id="" v-model="item.isSelected"></th>

                <th scope="row">{{item.id}}</th>

                <td>{{item.name}}</td>

                <td>{{item.ctime}}</td>

                <td><a href="#" @click.prevent="del(item)">delete</a></td>

            </tr>

            </tbody>

        </table>

    </div>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>

  let vm = new Vue({

    el: "#app",

    data: {

      keyword: '',

      id: '',

      name: '',

      list: [

        {'id': '1', 'name': 'maotai', 'ctime': new Date(), 'isSelected': true},

        {'id': '2', 'name': 'maotai', 'ctime': new Date(), 'isSelected': true},

        {'id': '3', 'name': 'maotai', 'ctime': new Date(), 'isSelected': true},

      ]

    },

    methods: {

      add() {

        this.list.unshift({id: this.id, name: this.name, ctime: Date.now()});

        this.id = this.name = ''

      },

      del(p) {

        this.list = this.list.filter(item => item !== p)

      },

      search(keyword) {

        return this.list.filter(item => item.name.includes(keyword))

      },

    },

    computed: {

      checkAll: {

        get() {

          //设置checkall的值

          return this.list.every(item => item.isSelected)

        },

        set(val) {

          this.list.forEach(item => item.isSelected = val)

        }

      }

    }

  })

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css">

</head>

<body>

<div class="container" id="app">

    <div class="card">

        <div class="card-body form-inline">

            <label class="sr-only" for="inlineFormInputName1">id</label>

            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName1" placeholder="id"

                   autocomplete="off" v-model="id">

            <label class="sr-only" for="inlineFormInputName2">Name</label>

            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"

                   autocomplete="off" v-model="name">

            <button type="submit" class="btn btn-primary mb-2" @click="add">添加</button>

            <label class="sr-only" for="inlineFormInputName4">search</label>

            <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName4" placeholder="search"

                   autocomplete="off" v-model="keyword" v-focus>

        </div>

        <table class="table table-bordered">

            <thead>

            <tr>

                <th>全选: <input type="checkbox" v-model="checkAll"></th>

                <th>id</th>

                <th>name</th>

                <th>ctime</th>

                <th>operation</th>

            </tr>

            </thead>

            <tbody>

            <tr v-for="(item,index) in search(keyword)" :key="item.id">

                <th><input type="checkbox" name="" id="" v-model="item.isSelected"></th>

                <th scope="row">{{item.id}}</th>

                <td>{{item.name}}</td>

                <td>{{item.ctime|dateFormat}}</td>

                <td><a href="#" @click.prevent="del(item)">delete</a></td>

            </tr>

            </tbody>

        </table>

    </div>

</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>

  let vm = new Vue({

    el: "#app",

    data: {

      keyword: '',

      id: '',

      name: '',

      list: [

        {'id': '1', 'name': 'maotai', 'ctime': new Date(), 'isSelected': true},

        {'id': '2', 'name': 'maotai', 'ctime': new Date(), 'isSelected': true},

        {'id': '3', 'name': 'maotai', 'ctime': new Date(), 'isSelected': true},

      ]

    },

    methods: {

      add() {

        this.list.unshift({id: this.id, name: this.name, ctime: Date.now()});

        this.id = this.name = ''

      },

      del(p) {

        this.list = this.list.filter(item => item !== p)

      },

      search(keyword) {

        return this.list.filter(item => item.name.includes(keyword))

      },

    },

    computed: {

      checkAll: {

        get() {

          //设置checkall的值

          return this.list.every(item => item.isSelected)

        },

        set(val) {

          this.list.forEach(item => item.isSelected = val)

        }

      }

    },

    filters: {

      dateFormat(dateStr, pattern = 'yyyy-mm-dd1') {

        console.log(dateStr);

        let dt = new Date(dateStr);

        let y = dt.getFullYear();

        let m = dt.getMonth();

        let d = dt.getDate();

        if (pattern.toLowerCase() === "yyyy-mm-dd") {

          return `${y}-${m}-${d}`;

        } else {

          let hh = dt.getHours();

          let mm = dt.getMinutes();

          let ss = dt.getSeconds();

          return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;

        }

      }

    },

    directives: {

      'focus': {

        inserted(el) {

          el.focus();

        }

      }

    }

  })

</script>

</body>

</html>

[vue]基础篇stepbystep案例实践(废弃)的更多相关文章

Vue 基础篇
Vue 基础篇一.框架与库的区别 JQ库->DOM(DOM操作) + Ajax请求 art-template库->模板引擎框架 -> 全方位.功能齐全简易的DOM体验 + 发请 ...
Vue 基础篇---computed 和 watch
最近在看前端 Vue方面的基础知识,虽然前段时间也做了一些vue方面的小项目,但总觉得对vue掌握的不够所以对vue基础知识需要注意的地方重新撸一遍,可能比较零碎,看到那块就写哪块吧 1.vue中的 ...
[vue]vue基础复习项案例stepbystep
看本篇第二次复习内容即可. 还有一些文档了这个如 https://www.cnblogs.com/iiiiiher/p/9508733.html https://www.cnblogs.com/ii ...
vue基础篇---vue组件《2》
定义全局组件我们通过Vue的component方法来定义一个全局组件. <div id="app">  <coun ...
vue基础篇---vue组件
vue模块第一篇,因为公司马上要用到这vue开发.早就想好好看看vue了.只有实际工作中用到才会进步最快.vue其他的简单指令就不多讲了,没啥意思,网上一大堆.看w3c就ok. 组件这个我个人感觉坑蛮 ...
vue基础篇---路由的实现《2》
现在我们来实现这样一个功能: 一个页面,包含登录和注册,点击不同按钮,实现登录和注册页切换: 编写父组件 index.html <div id="app"> <s ...
vue基础篇---watch监听
watch可以让我们监控一个值的变化.从而做出相应的反应. 示例: <div id="app"> <input type="text" v-m ...
vue基础篇---生命周期
每个钩子函数都在啥时间触发 beforeCreate 在实例初始化之后,数据观测(data observer) 和 event/watcher 事件配置之前被调用. created 实例已经创建完成之 ...
vue基础篇---路由的实现
路由可以有两种实现方式,一种是标签形式的,一种是js实现. 标签: <router-link to='/city'> 北京 </router-link> 标签还有另外一种实现方 ...

随机推荐

ubuntu-16.04更好软件源
author: headsen chen date:2019-03-06 14:01:07 1,修改软件源文件成如下的清华大学的源(亲测可用) root@ubuntu:/var/lib/apt/li ...
textarea 固定大小，滚动条，限制拖动，文字对齐
取值:$("#ID").val(); 控制大小:加width,height限制(style="width:100px;height:200px;");或row, ...
Ubuntu将网卡名称eno160改为eth0并且设置静态IP
修改配置文件/etc/default/grub GRUB_CMDLINE_LINUX="net.ifnames=0 biosdevname=0" 设置生效 update-grub ...
Redhat7.5安装glusterfs4
redhat7.5自带yum源不包含glusterfs4,下面通过rpm包的方式安装glusterfs4 环境查看 glusterfs官方网站下载rpm包下载地址 https://buildlogs. ...
Processing-基础小坑-
x 坑A:) 新建一个"Walker"项目,Walker.pde,必须在Walker文件夹下... 刚开始以为如果一个文件需要引用另外一个文件中的类,只要把这两个文件放一个文件夹下 ...
hdu6397 Character Encoding 母函数解约束条件下多重集
http://acm.hdu.edu.cn/showproblem.php?pid=6397 原问题的本质是问m个元素的多重集S,每一种类型的对象至多出现n-1次的S的k组合的个数是多少? 等价于 x ...
【凸包板题】Gym - 101484E E. Double Fence
http://codeforces.com/gym/101484/problem/E 题解凸包板题 #define _CRT_SECURE_NO_WARNINGS #include<cmath ...
ionic中调用cordova插件upload上传的问题，拍照and调用相册
第一次写博客直接怼代码首先应该 ionic cordova plugin add cordova-plugin-file-transfer npm install --save @ionic-nat ...
sparking water
1 2 It provides a way to initialize H2O services on each node in the Spark cluster and to access dat ...
delphi中的 IntToHex()
Delphi 自带函数 IntToHex 功能说明:该函数用于将“十进制”转换成“十六进制”.该函数有二个参数.第一个参数为要转换的十进制数据,第二个参数是指定使用多少位来显示十六进制数据. 参考实例 ...

[vue]基础篇stepbystep案例实践(废弃)

[vue]基础篇stepbystep案例实践(废弃)的更多相关文章

随机推荐

热门专题