[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> 标签还有另外一种实现方 ...
随机推荐
- Xlight FTP搭建FTP服务器教程
Xlight FTP搭建FTP服务器教程 1. 服务器公共设置 设置FTP 端口, ip 等 FTP 服务器公共的设定 2. 设定 FTP 用户, FTP 目录 等信息 备注: 这个用户是非Wi ...
- java工具类 获取包下所有类
extends:http://blog.csdn.net/jdzms23/article/details/17550119 package com.threeti.util; import java. ...
- 2. Mysql数据库的入门知识
2. Mysql数据库的入门知识 (1)打开Windows系统提供的服务查看相应的服务. (2)在Windows任务管理器的进程中查看 (3)使用命令行管理windows的Mysql数据库服务. Ne ...
- Android Training Caching Bitmaps 翻译
原文:http://developer.android.com/training/displaying-bitmaps/cache-bitmap.html 图片缓存 在Android开发中,加载一个图 ...
- ztree 文件夹类型的 树状图
未套程序的源代码: 链接:http://pan.baidu.com/s/1nuHbxhf 密码:4aw2 已套程序的源代码: css样式: /*发布邮件 选择领导弹窗*/ .xuandao{ disp ...
- window.history.go(-1)返回且刷新页面 点击返回上一层
windows窗口对象(历史)history.go(),history.back(),history.forward(). 因为windows对象引用不是必须的.所以windows.history.g ...
- 壁虎书2 End-to-End Machine Learning Project
the main steps: 1. look at the big picture 2. get the data 3. discover and visualize the data to gai ...
- Linux/Unix 常用参数使用说明
参数使用说明 ~ 表示当前用户目录 绝对路径 .表示当前目录 绝对路径 | 命令格式:命令A|命令B,即命令1的正确输出作为命令B的操作对象(下图应用别人的图片) 举例 ps aux | grep & ...
- [No000015C]计算机科学关键领域
- iOS中的静态库与动态库，区别、制作和使用
如果我们有些功能要给别人用,但是又不想公开代码实现,比如高德地图.第三方登录分享等等,这时候我们就要打包成库了.库分静态库和动态库两种: 静态库:以.a 和 .framework为文件后缀名.动态库: ...