[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> 标签还有另外一种实现方 ...
随机推荐
- Oracle Profile使用详解(转)
一.目的: Oracle系统中的profile可以用来对用户所能使用的数据库资源进行限制,使用Create Profile命令创建一个Profile,用它来实现对数据库资源的限制使用,如果把该prof ...
- 不用軟體解PPT密碼
解PPT密碼的軟體很多,最好用的是advanced office password recovery pro,論壇裡有,不多說了~ 但是軟體有時候在解PPT密碼時多顯無力,現介紹不用軟體就能解pptx ...
- Django框架详解
一.WSGI接口 WSGI服务网关接口:Web Server Gateway Interface缩写. WSGI是python定义的Web服务器和Web应用程序之间或框架之间的通用接口标准. WSGI ...
- sg函数的理解
sg,是用来判断博弈问题的输赢的,当sg值为0的时候,就是输,不为0就是赢: 在这之前,我们规定一个对于集合的操作mex,表示最小的不属于该集合的非负整数. 举几个栗子:mex{0,1,2}=3,me ...
- git提交出现这个界面怎么退出
默认git使用nano进行编辑提交的页面,退出方法为: Ctrl + X然后输入y再然后回车,就可以退出了 如果你想把默认编辑器换成别的: 在GIT配置中设置 core.editor: git con ...
- [Asp.net]Uploadify上传大文件，Http error 404 解决方案 - wolfy
引言 之前使用Uploadify做了一个上传图片并预览的功能,今天在项目中,要使用该插件上传大文件.之前弄过上传图片的demo,就使用该demo进行测试.可以查看我的这篇文章: [Asp.net]Up ...
- asp.net Ajax调用Aspx后台方法
Ajax调用的前提(以aspx文件为例:) 1.首先需要在aspx文件后台中引用using System.Web.Services; 2.需要调用的方法必须是公共的(public).静态的(stati ...
- [No000010C]Git5/9-远程仓库
到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了. 可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早就有了,没看出Gi ...
- 使用graalvm.js调用promise
前提 1.JDK1.8 2.引入jar包 <!--graalvm.js --> <dependency> <groupId>org.graalvm.js</g ...
- C常用的字符串函数实现
/** 查找字符串 source 中 是否有指定的子串出现,如果有返回第一个匹配的字符 @param source 源 @param chars 目标 @return 返回值 */ char *fin ...