vue学习笔记（二）
1.bootstrap
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。
<link rel='stylesheet' href="./lib/bootstrap-3.3.7.css">
2.品牌列表信息管理界面
目录：code02/01.品牌信息列表管理界面.html
- 实现界面
- 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel='stylesheet' href="./lib/bootstrap-3.3.7.css">
</head>
<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>
name:
<input type="text" class="form-control" v-model='name' @keyup.f2="add">
</label>
<input type="button" value="添加" class="btn btn-primary" @click="add">
<label>
查找的关键字:
<input type="text" class="form-control" v-model='keywords' v-focus >
</label>
</div>
</div>
<!--引用bootstrap模板渲染列表-->
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Ctime</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<!--对检索不同的关键字渲染结果，通过函数返回值来限定-->
<tr v-for="item in search(keywords)" :key='item.id'>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime | timeFormat('yyyy-mm-dd') }}</td>
<!--使用.prevent阻止a标签刷新页面行为-->
<td><a href="" @click.prevent='del(item.id)' >删除</a></td>
</tr>
</tbody>
</table>
<p v-fontweight='900' v-fontsize="30">这是自定义组件fontweight和fontsize的使用</p>
</div>
<script>
//定义全局过滤器 根据type参数返回不同的时间格式，这里赋值是为了防止unfind导致后续判断的无法进行
Vue.filter('timeFormat',(data,type='')=>{
//将获取到的字符串数据改成时间格式
var dl = new Date(data);
//截取到日期的具体信息
var y = dl.getFullYear();
var m = (dl.getMonth() + 1).toString().padStart(2,"0");
var d = dl.getDate().toString().padStart(2,"0");
var hh = dl.getHours().toString().padStart(2,"0");
var mm = dl.getMinutes().toString().padStart(2,"0");
var ss = dl.getSeconds().toString().padStart(2,"0");
//将type转换为小写
if(type.toLocaleLowerCase() ==='yyyy-mm-dd'){
return `${y}-${m}-${d}`
}else{
return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
}
})
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
//自定义全局指令 使用时用 v-focus 获取焦点
//参数二是一个对象，对象上有一些指令相关的函数，这些函数可以在特定的阶段执行相关操作
Vue.directive('focus',{
//函数中的第一个参数是绑定元素的原生JS对象 el ，可以执行DOM操作
bind:function(el){//当指令绑定到元素上的时候，会立即执行这个bind函数，只执行一次
el.style.color ='red';
},
inserted:function(el){//当元素插入到DOM中的时候，会执行inserted函数,只执行一次
//操作dom元素的方法获取焦点
el.focus();
},
update:function(el){//当VNode更新的时候，会执行updated函数，可能会触发多次
},
componentUpdated:function(el){
},
unbind:function(el){
},
})
//定义vm实例
var vm = new Vue({
el:"#app",
data:{
id:"",
name:"",
keywords:'',
list:[
{id:1,name:"张三",ctime:new Date()},
{id:2,name:"李四",ctime:new Date()},
{id:3,name:"王五",ctime:new Date()},
]
},
methods:{
del(id){//删除数据方法
//通过传参的形式获取到数据的id号
//查找到list数组中的数据并删除
this.list.some((item,i)=>{
//如果找到list数组的数据
if(item.id == id){
this.list.splice(i,1);
return true;
}
});
//第二种查找方式 检索数组返回数据在数组中的位置，从0开始
// var index = this.list.findIndex((item)=>{
// if(item.id == id){
// return true;
// }
// });
// console.log(index);
//第三种方式
// this.list.forEach((item,index)=>{
// if(item.id == id){
// this.list.splice(index,1);
// }
// });
},
add(){//新增数据方法
//1.构建新数据对象
var car = {id:this.id,name:this.name,ctime:new Date()};
//2.向list数组中添加数据，vm会自动实现数据的双向绑定
this.list.push(car);
//3.格式化变量
this.id=this.name='';
},
search(keywords){
//方法一：
// var newlist = [];
// this.list.forEach((item,i)=>{
// //如果keywords在数组list中存在，如果keywords为空，则将list中的数据都放入newlist中去了
// if(item.name.indexOf(keywords) != -1){
// newlist.push(item);
// }
// });
// return newlist;
//方法二： filter会返回所有符合条件的数组
return this.list.filter(item=>{
//includes方法会检测keywords是否包含在item.name中
if(item.name.includes(keywords) == true){
return item
}
})
}
},
filters:{ //定义局部过滤器 若局部过滤器和全局过滤器重名，则优先显示局部过滤器
timeFormat:function(data,type){
//将获取到的字符串数据改成时间格式
var dl = new Date(data);
//截取到日期的具体信息
var y = dl.getFullYear();
var m = (dl.getMonth() + 1).toString().padStart(2,"0");
var d = dl.getDate().toString().padStart(2,"0");
var hh = dl.getHours().toString().padStart(2,"0");
var mm = dl.getMinutes().toString().padStart(2,"0");
var ss = dl.getSeconds().toString().padStart(2,"0");
//将type转换为小写
if(type.toLocaleLowerCase() ==='yyyy-mm-dd'){
return `${y}-${m}-${d}-----`
}else{
return `${y}-${m}-${d} ${hh}:${mm}:${ss}----`
}
}
},
directives:{//定义局部指令
'fontweight':{
bind:function(el,binding){
el.style.fontWeight = binding.value;
}
},
'fontsize':function(el,binding){ //钩子函数的缩写，相对于在bind和update函数中编写了语句
el.style.fontSize = parseInt(binding.value)+'px';
}
}
});
</script>
</body>
</html>
3.过滤器
目录：/code02/02.过滤器的基本使用
vue.js允许使用自定义过滤器，可被用作常见文本的格式化，可用在插值表达式和v-bind表达式中，过滤器放在JavaScript表达式尾部，由"管道"符指示；
定义全局过滤器：
定义局部过滤器：
4.自定义按键修饰符
vue中的 @keyup事件可以监听按键
vue中包含有：
.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右
参考js事件中按键的键码来对应命名配置
地址：js事件中按键的键码
自定义按键修饰符：
//文本框中可选择按键来执行添加操作
<input type="text" class="form-control" v-model='name' @keyup.f2="add">
<input type="text" class="form-control" v-model='name' @keyup.113="add">
//自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113;
5.自定义指令
目录：code02/品牌列表信息管理界面.html
vue中提供自定义指令，以v-开头
样式相关的指令放在bind函数中执行，行为相关的指令放在inserted函数中执行
Vue.directive的第二个参数是一个对象，对象里有一些钩子函数，
钩子函数有很多参数
定义全局指令：
定义局部指令（含缩写）：
6.vue的生命周期
目录：code02/03.生命周期函数.html
vue的生命周期是指VM从创建，运行到销毁的过程，中间有若干生命周期函数。
- 主要的生命周期函数分类：
- 创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
7.vue-resource
目录：code02/vue-resource的基本使用
安装：
<script src="./lib/vue-2.4.0.js"></script>
<!--vue-resource必须在vue包导入之后-->
<script src="./lib/vue-resource-1.3.4.js"></script>
使用方法：
8. JSONP的实现原理
目录：code02/jsonp客户端,code02/app.js
- 由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口，浏览器认为这种访问不安全；
- 可以通过动态创建script标签的形式，把script标签的src属性，指向数据接口的地址，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP（注意：根据JSONP的实现原理，知晓，JSONP只支持Get请求）；
- 具体实现过程：
- 先在客户端定义一个回调方法，预定义对数据的操作；
- 再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口；
- 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行；
- 客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了；
服务器端：
客户端：
