<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="lib/bootstrap-3.3.7.css"> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading">添加人员</div> <div class="panel-body form-inline"> <label>id: <input class="form-control" type="text" v-model="id"> </label> <label>name: <input class="form-control" type="text" v-model="name"> </label> <input type="button" value="提交" @click="add" class="btn btn-primary "> <label>搜索关键字： <input class="form-control" type="text" v-model="keywords"> </label> <table class="table table-bordered"> <thead> <tr> <th>id</th> <th>name</th> <th>date</th> <th>option</th> </tr> </thead> <tbody> <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 --> <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 --> <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 --> <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --> <tr v-for="item in search(keywords)" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td><a href="" @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div> </div> </div> <script src="lib/vue-2.4.0.js"></script> <script> var vm = new Vue({ el: "#app", data: { id: "", name: "", keywords: "", lst: [ {id: 1, name: "傻大个", ctime: new Date()}, {id: 2, name: "小不点", ctime: new Date()}, {id: 3, name: "隔壁家的二狗子", ctime: new Date()}, ] }, methods: { add() {// 添加的方法 // console.log('ok') // 分析： // 1. 获取到 id 和 name ,直接从 data 上面获取 // 2. 组织出一个对象 // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中 // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上； // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作； this.lst.push({id: this.id, name: this.name, ctime: new Date()}); this.id = this.name = "" }, del(id) { // 根据Id删除数据 // 分析： // 1. 如何根据Id，找到要删除这一项的索引 // 2. 如果找到索引了，直接调用 数组的 splice 方法 // some方法 // this.lst.some((item, i) => { // // if (item.id == id) { // this.lst.splice(i, 1); // return true; // } // }) var index = this.lst.findIndex(item => { if (item.id == id) { return true } }); this.lst.splice(index, 1); }, search(keywords) {// 根据关键字，进行数据的搜索 // var new_lst = []; // this.lst.forEach(item => { // if (item.name.indexOf(keywords) != -1) { // new_lst.push(item); // } // // }); // 注意： forEach some filter findIndex 这些都属于数组的新方法， // 都会对数组中的每一项，进行遍历，执行相关的操作； // return new_lst; // 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串') // 如果包含，则返回 true ，否则返回 false // contain return this.lst.filter(item => { if (item.name.includes(keywords)) { return item; } }) } } }) </script> </body> </html>
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式
过滤器示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{ msg | msgformat}}</h1> </div> <script src="lib/vue-2.4.0.js"></script> <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgformat Vue.filter('msgformat', function (msg) { // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 return msg.replace(/1/g, 0) }); var vm = new Vue({ el: "#app", data: { msg: "1234567891111111111111" }, methods: {} }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{ msg | msgFormat('天真','无邪') }}</h1> </div> <script src="lib/vue-2.4.0.js"></script> <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgformat Vue.filter('msgFormat', function (msg, arg1, arg2) { // 字符串的 replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则 return msg.replace(/单纯/g, arg1 + arg2) }); var vm = new Vue({ el: "#app", data: { msg: "曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人" }, methods: {} }) </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="lib/bootstrap-3.3.7.css"> </head> <body> <div id="app"> <div class="panel panel-primary"> <div class="panel-heading">添加名字</div> <div class="panel-body form-inline"> <label>id: <input class="form-control" type="text" v-model="id"> </label> <label>name: <input class="form-control" type="text" v-model="name"> </label> <input type="button" value="提交" @click="add" class="btn btn-primary "> <label>搜索关键字： <input class="form-control" type="text" v-model="keywords"> </label> <table class="table table-bordered"> <thead> <tr> <th>id</th> <th>name</th> <th>date</th> <th>option</th> </tr> </thead> <tbody> <!-- 之前， v-for 中的数据，都是直接从 data 上的list中直接渲染过来的 --> <!-- 现在， 我们自定义了一个 search 方法，同时，把 所有的关键字，通过传参的形式，传递给了 search 方法 --> <!-- 在 search 方法内部，通过 执行 for 循环， 把所有符合 搜索关键字的数据，保存到 一个新数组中，返回 --> <!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候，如果加了小括号，就可以给函数传参了 --> <tr v-for="item in search(keywords)" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime|dateFormat('') }}</td> <td><a href="" @click.prevent="del(item.id)">删除</a></td> </tr> </tbody> </table> </div> </div> </div> <div id="app2"> <h1>{{ msg|dateFormat }}</h1> </div> <script src="lib/vue-2.4.0.js"></script> <script> // 全局的过滤器， 进行时间的格式化 // 所谓的全局过滤器，就是所有的VM实例都共享的 Vue.filter('dateFormat', function (datestr, pattern) { // 根据给定的时间字符串，得到特定的时间 var date = new Date(datestr); var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}` } else { var h = date.getHours(); var M = date.getMinutes(); var s = date.getSeconds(); return `${y}-${m}-${d} ${h}:${M}:${s}` } }); // 如何自定义一个私有的过滤器（局部） var vm2 = new Vue({ el: "#app2", data: { msg: new Date() }, filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】 // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器 dateFormat: function (datestr, pattern = "") { var date = new Date(datestr); var y = date.getFullYear(); var m = date.getMonth() + 1; var d = date.getDate(); if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}` } else { var h = date.getHours(); var M = date.getMinutes(); var s = date.getSeconds(); return `${y}-${m}-${d} ${h}:${M}:${s}` } } } }); var vm = new Vue({ el: "#app", data: { id: "", name: "", keywords: "", lst: [ {id: 1, name: "傻大个", ctime: new Date()}, {id: 2, name: "小不点", ctime: new Date()}, {id: 3, name: "隔壁家二狗子", ctime: new Date()}, ] }, methods: { add() {// 添加的方法 // console.log('ok') // 分析： // 1. 获取到 id 和 name ,直接从 data 上面获取 // 2. 组织出一个对象 // 3. 把这个对象，调用 数组的 相关方法，添加到 当前 data 上的 list 中 // 4. 注意：在Vue中，已经实现了数据的双向绑定，每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上； // 5. 当我们意识到上面的第四步的时候，就证明大家已经入门Vue了，我们更多的是在进行 VM中 Model 数据的操作，同时，在操作Model数据的时候，指定的业务逻辑操作； this.lst.push({id: this.id, name: this.name, ctime: new Date()}); this.id = this.name = "" }, del(id) { // 根据Id删除数据 // 分析： // 1. 如何根据Id，找到要删除这一项的索引 // 2. 如果找到索引了，直接调用 数组的 splice 方法 // some方法 // this.lst.some((item, i) => { // // if (item.id == id) { // this.lst.splice(i, 1); // return true; // } // }) var index = this.lst.findIndex(item => { if (item.id == id) { return true } }); this.lst.splice(index, 1); }, search(keywords) {// 根据关键字，进行数据的搜索 // var new_lst = []; // this.lst.forEach(item => { // if (item.name.indexOf(keywords) != -1) { // new_lst.push(item); // } // // }); // 注意： forEach some filter findIndex 这些都属于数组的新方法， // 都会对数组中的每一项，进行遍历，执行相关的操作； // return new_lst; // 注意 ： ES6中，为字符串提供了一个新方法，叫做 String.prototype.includes('要包含的字符串') // 如果包含，则返回 true ，否则返回 false // contain return this.lst.filter(item => { if (item.name.includes(keywords)) { return item; } }) } } }) </script> </body> </html>
HTML部分代码
<td>{{item.ctime | dataFormat('yyyy-mm-dd')}}</td>
私有过滤器
filters: {
dateFormat: function (datestr, pattern) {
var date = new Date(datestr);
var y = date.getFullYear();
var m = (date.getMonth() + 1).toString().padStart(2,0);
var d = date.getDate().toString().padStart(2,0);
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var h = date.getHours().toString().padStart(2,0);
var M = date.getMinutes().toString().padStart(2,0);
var s = date.getSeconds().toString().padStart(2,0);
return `${y}-${m}-${d} ${h}:${M}:${s}`
}
}
}
全局过滤器
所谓的全局过滤器，就是所有的VM实例都共享的
Vue.filter('dateFormat', function (datestr, pattern) {
var date = new Date(datestr);
var y = date.getFullYear();
var m = (date.getMonth() + 1).toString().padStart(2,0);
var d = date.getDate().toString().padStart(2,0);
if (pattern.toLowerCase() === 'yyyy-mm-dd') {
return `${y}-${m}-${d}`
} else {
var h = date.getHours().toString().padStart(2,0);
var M = date.getMinutes().toString().padStart(2,0);
var s = date.getSeconds().toString().padStart(2,0);
return `${y}-${m}-${d} ${h}:${M}:${s}`
}
});
使用ES6中的字符串新方法 String.prototype.padStart(maxLength, fillString='') 或 String.prototype.padEnd(maxLength, fillString='')来填充字符串；
2.自定义键盘修饰符
Vue.config.keyCodes.f2 = 113;
使用自定义按键修饰符：
<input type="text" v-model="name" @keyup.f2="add">
自定义指令
https://cn.vuejs.org/v2/guide/custom-directive.html
自定义全局和局部的 自定义指令：
自定义全局指令
使用 Vue.directive() 定义全局的指令 v-focus
其中：参数1 ： 指令的名称，注意，在定义的时候，指令的名称前面，不需要加 v- 前缀,
但是： 在调用的时候，必须 在指令名称前 加上 v- 前缀来进行调用
参数2： 是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
Vue.directive('focus', {
bind: function (el) {
// 每当指令绑定到元素上的时候，会立即执行这个 bind 函数，只执行一次
// 注意： 在每个 函数中，第一个参数，永远是 el ，表示 被绑定了指令的那个元素，这个 el 参数，是一个原生的JS对象
// 在元素 刚绑定了指令的时候，还没有 插入到 DOM中去，这时候，调用 focus 方法没有作用
// 因为，一个元素，只有插入DOM之后，才能获取焦点
// el.focus()
},
inserted: function (el) { // inserted 表示元素 插入到DOM中的时候，会执行 inserted 函数【触发1次】
el.focus()
// 和JS行为有关的操作，最好在 inserted 中去执行，放置 JS行为不生效
},
updated: function (el) { // 当VNode更新的时候，会执行 updated， 可能会触发多次
}
})
调用指令
<input type="text" class="form-control" v-model="keywords" id="search" v-focus v-color="'green'">
自定义局部指令
directives: { // 自定义私有指令
'fontweight': { // 设置字体粗细的
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
简写：
directives: { // 自定义私有指令
'fontsize': function (el, binding) { // 注意：这个 function 等同于 把 代码写到了 bind 和 update 中去
el.style.fontSize = parseInt(binding.value) + 'px'
}
}