[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> 标签还有另外一种实现方 ...
随机推荐
- python3之枚举
枚举 li = ['a','b','c','d'] for index,i in enumerate(li): #for index,i in enumerate(li,100): print(ind ...
- 7.8CSS部分的学习!
<!DOCTYPE html> <html> <head> <title>CSS元素选择器</title> <style type=& ...
- A - Fire Net
Suppose that we have a square city with straight streets. A map of a city is a square board with n r ...
- saltstack安装配置使用记录
安装 参考 http://docs.saltstack.cn/topics/installation/index.html#installation 选择对应的OS 配置 环境如下: master:1 ...
- FW--tomcat bi-laternal https and keytool
说明:按照本文中以下内容配置https,猫server.xml中clientAuth=false,单向验证的时候,网页中可以访问:当clientAuth=true进行双向验证的时候,网页中不可以访问: ...
- DOM节点的基础操作
1.寻找节点 //寻找节点 id方法 document.getElementById(); //标准 //寻找节点层次方法 parentNode().firstChild()和lastChild(): ...
- MonkeyRunner_运行脚本(一)
前提:环境已部署, 使用数据线连接上真机 一.使用cmd窗口单步执行monkeyrunner命令 打开cmd窗口,输入monkeyrunner (前提设置好环境变量):然后按照monkeyrunne ...
- 实验四 Android程序设计
20155224 实验四 Android程序设计 实验报告 实验报告封面: 课程:Java程序设计 班级:1652班 姓名:王高源 学号:20165225 指导教师:娄嘉鹏 实验日期:2018年5月1 ...
- js 正则判断字符串下划线的长度
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- java 字符转换流
package cn.sasa.demo4; import java.io.FileInputStream; import java.io.FileOutputStream; import java. ...