欢迎光临我的博客[http://poetize.cn]，前端使用Vue2，聊天室使用Vue3，后台使用Spring Boot
js箭头函数
x => x * x
相当于:
function (x) {
return x * x;
}
两个参数:
(x, y) => x * x + y * y
无参数:
() => 3.14
this:
匿名函数的执行环境是全局的，this 在匿名函数中找不到，从全局中找。
es6 箭头函数里的 this 指的是定义这个函数时外层代码的 this:
var obj = {
birth: 2000,
getAge: function () {
var age = () => new Date().getFullYear() - this.birth; //this指向obj对象
return age;
}
};
obj.getAge();
list.splice()
splice() 方法可删除从 index 处开始的零个或多个元素:
arr.splice(2,1) //删除index为2的元素
arr.splice(2,1,"ld") //替换index为2的元素
arr.splice(2,3,"ld") //替换index为2，3，4的元素
arr.splice(2,0,"ld") //在index为2的位置插入元素
ES6 Template String 模板字符串( ` )
模板字符串(Template String)是增强版的字符串，用反引号( ` )标识，
它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。
`${fullYear}-${month}-${day} ${hours}:${minutes}:${seconds}`;
过滤器
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。
过滤器可以用在两个地方：
双花括号插值和 v-bind 表达式。
<!-- 在双花括号中 -->
{{ message | format }}
<!-- 在 v-bind 中 -->
<div v-bind:id="rawId | format"></div>
过滤器可以串联：
{{ message | filterA | filterB }}
过滤器是 JavaScript 函数，因此可以接收参数：
{{ message | filterA('普通字符串', arg2) }}
私有过滤器：只能在当前 VM 对象所控制的 View 区域进行使用
filters: {
dataFormat1(input, pattern = "") { //在参数列表中通过 pattern="" 来指定形参默认值，防止报错
},
dataFormat2(input, pattern = "") {
}
}
全局过滤器：
Vue.filter('dataFormat', function (input, pattern = '') {});
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，
即：局部过滤器优先于全局过滤器被调用！
动态操作 Vue data数据
在Vue中，实现了数据的双向绑定，
每当我们修改了 data 中的数据，Vue会默认监听到数据的改动，自动把最新的数据，应用到页面上。
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌</h3>
</div>
<div class="panel-body form-inline">
<label>
Id：
<input type="text" class="form-control" v-model="id">
</label>
<label>
姓名：
<input type="text" class="form-control" v-model="name">
</label>
<label>
年龄：
<input type="text" class="form-control" v-model="age">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add"/>
<label>
搜索关键字：
<input type="text" class="form-control" v-model="keywords">
</label>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<td>Id</td>
<td>姓名</td>
<td>年龄</td>
<td>创建时间</td>
<td>操作</td>
</tr>
</thead>
<tr v-for="user in search(keywords)">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.date | format() }}</td>
<td>
<input type="button" value="删除" class="btn btn-primary" @click="del(user.id)"/>
</td>
</tr>
</table>
</div>
</div>
</body>
<script>
/**
* 全局过滤器
*/
Vue.filter('format', function (date) {
var d = new Date(date);
var fullYear = d.getFullYear();
var month = d.getMonth() + 1;
var day = d.getDay();
var hours = d.getHours();
var minutes = d.getMinutes();
var seconds = d.getSeconds();
return `${fullYear}-${month}-${day} ${hours}:${minutes}:${seconds}`;
});
/**
* 创建Vue实例
*
* app对象即是 MVVM 中的 VM 调度者
*/
var app = new Vue({
el: '#app', //控制的区域
data: { //保存的数据
id: '',
name: '',
age: '',
keywords: '',
list: []
},
methods: { //方法
add() { //添加
var flag = false;
this.list.forEach(user => {
if (user.id == this.id) {
flag = true;
return;
}
});
if (!flag) {
this.list.push({id: this.id, name: this.name, age: this.age, date: new Date()});
}
},
del(id) { //删除
var index = this.list.findIndex(user => {
if (user.id == id) {
return user;
}
});
this.list.splice(index, 1);
},
search(keywords) { //查找
return this.list.filter(user => {
if (user.name.includes(keywords)) {
return user;
}
});
}
}
});
</script>
