[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> 标签还有另外一种实现方 ...
随机推荐
- VBA 高级筛选
http://www.geren-jianli.com/n19719c34.aspx http://m.vccoo.com/v/4aej07_2 AdvancedFilter 函数介绍
- C# HTTPServer和OrleansClient结合
using System; using System.Collections.Generic; using System.IO; using System.IO.Compression; using ...
- Orleans学习总结(四)--集群配置篇
上篇我们讲了Orleans学习总结(三)--持久化篇,这一篇我们来说说集群配置,毕竟这个才是Orleans的看家本领 Orleans支持热起动,支持自动节点发现,能够断线重发等一系列黑科技. 我这篇是 ...
- CSS3 水平翻转
.button_1:hover #button1_img,.button_2:hover #button2_img{ box-shadow: 0 0 10px #9AFE2E; animation: ...
- ado.net EF学习系列----深入理解查询延迟加载技术(转载)
ado.net EF是微软的一个ORM框架,使用过EF的同学都知道EF有一个延迟加载的技术. 如果你是一个老鸟,你可能了解一些,如果下面的学习过程中哪些方面讲解的不对,欢迎批评指教.如果一个菜鸟,那我 ...
- cc2640 细节展示
1. 对于 cc2640内部有两个单片机,一个m3负责内核,另一个是一个16位单片机,应该是msp430可以替代主机完成一些数据采集,adc采集,iic等等功能,传感器软件内部可以进行外设配置,并使用 ...
- [daily] 主机间目录共享
1. 安装 nfs工具 [root@D128 j]# yum install nfs-utils 2. 修改配置文件: 1. 查看一下语法. [root@D128 j]# man exports 2 ...
- 配置ssm 时， web.xml 文件无 # 自动代码提示
环境:STS 版本:spring-tool-suite-3.8.1.RELEASE-e4.6-win32-x86_64 配置ssm 时, web.xml 文件无 如下图蓝色圈范围内的提示 问题与 链接 ...
- python摸爬滚打之day8---文件操作
1.文件读写的两种方式 1, f = open("文件位置",mode = "r", encoding = "utf-8") conten ...
- install python in wine
wget http://www.kegel.com/wine/winetricks chmod +x winetricks ./winetricks 钩选msxml3就可以了. ___________ ...