[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> 标签还有另外一种实现方 ...

随机推荐

使用mui.js实现下拉刷新
闲聊: 最近因公司项目需求,小颖需要写一些html5页面,方便公司IOS和Android给APP中嵌套使用,其中需要实现拉下刷新功能,其实就是调用了一下mui.js就可以啦嘻嘻,下面跟着小颖一起来看看 ...
简单xmlrpc服务器
import calendar, SimpleXMLRPCServer class Calendar: def getMonth(self, year, month): return calendar ...
10.18正式开发stark组件*(三)
2018-10-18 19:15:54 等这个stark组件做完了再上传到github上面,然后再整理博客!这就到周末啦! 因为models导入的时候出现bug,所以只有源码没有测试数据! 源码都有注 ...
CentOS7 下安装mysql历程
一.成功他妈的经历背景(废话不用看):自己对Linux不是很熟悉,说难听点就是门都没有么到!基于这近年大数据之类的热闹话题,自己就想学习一下!开始下的是Minimal ISO这个版本,Vbox5虚拟 ...
C# 各类常见Exception 异常信息
一直对报错有些迷惑的地方,什么时候try,catch那些Exception更合适,报错信息更能快速定位问题所在... 转载链接← 正文 Exception: 所有异常对象的基类. SystemExce ...
浏览器下载Excel,直接打开显示乱码...
情景: 浏览器中点击下载文件有两个选项:[打开][下载] [打开]之后,提示["文件.xlsx"的文件格式和扩展名不匹配.文件可能已损坏或不安全.除非您信任其来源,否则请勿打开.是 ...
linux下python3.5环境搭建
ubuntu12 在虚拟机vm11版本下安装正常,ubuntu14在虚拟机11-14版本下均因为某些文件权限不够安装失败(ubuntu14安装失败),未解决. ubuntu12 安装完成后,首先安装 ...
day0319 模块
一.序列化将原本的字典,列表等内容转化成一个字符串的过程就是序列化. 序列化的目的: 1.以某种存储形式使自定义对象持久化 2.将对象从一个地方传递到另一个地方. 3.程序更具有维护性二. Jso ...
[knowledge] netmap
900MHz的单核处理10GB的包收/发. netmap has been implemented in FreeBSD and Linux and Gbit/s network adapters. ...
[security] security engine things
1. luarock luarock 之于 lua,就好比 pip 之于 python https://luarocks.org/ 2. lua的库 [root@base package]# ls ...

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

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

随机推荐

热门专题