Vue中 v-on绑定事件的时候，传参是函数名，加不加括号的区别
下面是一个table表单实例，支持数据的增删查，具体效果如下图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> <!--vue.js 库-->
<script type="text/javascript" src="./lib/jquery.min.js"></script> <!--jquery 库 因为bootstrap依赖于JQuery-->
<link rel="stylesheet" type="text/css" href="./lib/bootstrap.min.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Add Info</h3>
</div>
<div class="panel-body form-inline">
<label>
Id:
<input type="text" name="" class="form-control" v-model="id">
</label>
<label>
Name:
<input type="text" name="" class="form-control" v-model="name">
</label>
<input type="button" value="Add" class="btn btn-primary" v-on:click="add()">
<label>
搜索关键字名称:
<input type="text" name="" class="form-control" v-model="keywords">
</label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Time</th>
<th>Opreation</th>
</tr>
</thead>
<tbody>
<!-- 直接遍历list中的元素 -->
<!-- <tr v-for='ele in list' v-bind:key="ele.id"> -->
<!-- 定义一个search方法，把要查找的关键字以传参的方式传入，search具体实现相应的筛选，但一定要返回一个list -->
<tr v-for='ele in search(keywords)' v-bind:key="ele.id">
<th>{{ele.id}}</th>
<th v-text='ele.name'>{{ele.name}}</th>
<th>{{ele.ctime}}</th>
<th><a href="" v-on:click.prevent="del(ele.id)">Delete</a></th>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: "",
name: "",
keywords: "",
list: [
{id: 1, name: 'dongxingwang', ctime: new Date()},
{id: 2, name: 'dongyanlin', ctime: new Date()},
{id: 3, name: 'jinyuzhen', ctime: new Date()},
{id: 4, name: 'xiaoxiaohan', ctime: new Date()},
]
},
//注意： 遍历list的四种方法：
// forEach 、
// some -- 找到第一个符合条件的元素就停止遍历 、
// filter - 过滤,会返回符合条件的item组成的list 、
// findIndex -- 返回满足条件的第一个元素的index索引值
methods: {
add(){
this.list.push({id: this.id, name: this.name, ctime: new Date()})
console.log('ok')
this.id = this.name = "" //插入完成之后清楚输入框中的内容
},
del(id){
//第一种方法，用list的some()方法，找到相应的元素就会自动跳出循环
this.list.some( (item, i) =>
{
if (item.id == id){
this.list.splice(i, 1)
return true
}
})
//第二种实现方法 findIndex
// var index = this.list.findIndex(item => { //注意：此处的item是循环遍历list时的元素
// if(item.id == id){ return true }
// })
// console.log(index)
// this.list.splice(index, 1) //拼接函数，以index为起点，删除第二个参数个数的元素，并用第三个元素的值替代
},
search(keywords){
//第一种方法： 用forEach方法
// var ans = []
// this.list.forEach(item =>
// {
// if (item.name.indexOf(keywords) != -1) //不等于-1说明keywords 包含在 name中
// {
// ans.push(item)
// }
// })
// return ans
// 第二种方式 用filter -- 返回满足条件的list，注意：JQuery中也有一个contains的方法具有相同的功能
var mid_list = this.list.filter(item =>
{
//ES6 为字符串提供的新方法 String.prototype.includes('key_string'), 若key_string在原字符串中则返回true
if (item.name.includes(keywords))
{
return item
}
})
return mid_list
}
}
})
</script>
</body>
</html>
过滤器filter -- 分为全局过滤器 和 私有过滤器
全局 -- Vue.filter('obj', function(){})
私有 -- 直接在相应的app对象的data对象中 创建filters对象
注意 padStart() 和padEnd()的用法 -- 在字符串的首尾填充字符
键盘事件： keydown，keypress，keyup
顺序为：keydown -> keypress ->keyup
1）用户按下键盘上的字符键时
- 首先会触发
keydown事件 - 然后紧接着触发
keypress事件 - 最后触发
keyup事件 - 如果用户按下了一个字符键不放，就会重复触发
keydown和keypress事件，直到用户松开该键为止
2）当用户按下非字符键时
- 首先会触发
keydown事件 - 然后就触发
keyup事件 - 如果用户按下了一个非字符键不放，就会重复触发
keydown事件，直到用户松开该键为止
3）在keyup 事件中无法阻止浏览器默认事件，因为在keypress时，浏览器默认行为已经完成，即将文字输入文本框（尽管这时还没显示），这个时候不管是preventDefault还是returnValue = false，都不能阻止在文本框中输入文字的行为，如要阻止默认行为，必须在keydown或keypress时阻止
4）发生keypress事件意味着按下的键会影响到屏幕中文本的显示，即在所有浏览器中，按下能够插入或删除字符的键都会触发keypress事件
按钮点击（click）事件 转化为 文本框输入完成后的回车（enter）事件
vue中的键值（按键）修饰符，类似于事件修饰符（如阻止默认行为 -- .prevent）
这里是用v-on绑定keyup事件下的方法
也可以自动以
Vue指令 - directive 可以自定义新的指令（除 v-model 、v-on 、 v-bind等内置指令之外的指令）
如：下面是自定义focus指令 -- 获取初始时的焦点
注意：下图function中的 el 指的是当前的dom元素，即要对其进行绑定创建的指令的元素。 当然这种操作也可用JQuery实现。
具体在相应的元素中添加id=‘this_dom’，然后在script元素中 添加如下代码
<script>
document。getElementById('this_dom').focus();
</script>但是Vue中不提倡直接操纵DOM元素。可以用directive 创建相应指令（指令中添加钩子函数实现具体功能）实现绑定
钩子函数
注意：钩子函数bind 和 inserted 的不同之处； bind的执行时机要早于inserted
-- bind是在内存中调用的 --> 和样式相关的操作可以在bind中设置
-- inserted是在内存中元素渲染到页面时调用的 --> 一般和行为相关的在inserted中设置
如下面的设置字体颜色的 指令
自定义颜色
注意 value 和 expression的区别
定义成全局的指令之后 任何Vue实例都可以使用
私有指令directive
指令的简写形式
Vue实例 的 生命周期
921
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
