VUE实例生命周期
- 概念
从vue实例创建，运行到销毁期间，总是伴随着各样的事件，这些事件统称为声明周期钩子（生命周期钩子=生命周期函数=生命周期事件）
- 分类
- 创建生命周期的函数
- beforeCreate：实例刚在内存中被创建出来会执行，还没有初始化data和methods属性（beforeCreate中无法获取data和methods中的值）；
- created：实例已经在内存中内创建OK（包括data和methods），此时还没有编译模板（初始化数据在crate中执行）
- beforeMount：已经完成模板的编译，但是没有挂载到页面中；
- mounted：将编译好的模板挂载到页面中（此时实例已经完全被创建完毕创建阶段执行完毕，操作页面上节点在此钩子函数中执行。）
- 运行期间的生命周期函数
- beforeUpdate：状态更新之前执行此函数，此时data值是最新的，但是页面上的值还没有更新
- updated：实例更新完毕后调用此函数，data和页面上显示的值已经完成更新，页面渲染完毕（根据data是否改变决定是否运行）
- 销毁期间的声明周期函数
- beforeDeatory：实例销毁之前调用，此时实例仍然可用；
- destoryed:Vue实例销毁后调用，vue实例指示的所有内容会解除绑定，所有时间监听器会被移除，所有的子实例也会被销毁
- 创建生命周期的函数
Demo
- findIndex：找出复合条件的索引；
- forEach：遍历数组每一项；
- filter：筛选出满足条件的数组；
- some：遍历数组每一项，可以被终止；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue-2.4.0.js"></script>
<link rel="stylesheet" href="./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"></label>
<input type="button" value="添加" class="btn-primary" @click="add">
<label>搜索名称或关键字:<input type="text" class="form-control" v-model="keyword"></label>
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<td>Id</td>
<td>Name</td>
<td>Ctime</td>
<td>Option</td>
</thead>
<tbody>
<tr v-for="item in search(keyword)" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.ctime}}</td>
<td>
<a href="" @click.prevent.stop="del(item.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{ id: 1, name: '奔驰', ctime: new Date() },
{ id: 2, name: '宝马', ctime: new Date() }
],
id: "",
name: "",
keyword: ""
},
methods: {
add() {
this.list.push({ id: this.id, name: this.name, ctime: new Date() }),
this.id = this.name = ""
},
del(id) {
//some方法对数组的每一项进行循环
//当return ture时结束后续循环
// this.list.some((item,i)=>{
// if(item.id==id){
// this.list.splice(i,1)
// return true;
// }
// })
var index = this.list.findIndex(item => {
if (item.id == id) {
return true;
}
})
console.log(index)
this.list.splice(index, 1)
},
search(keyword) {
// 方法1 使用forEach遍历每一项
// var newList=[];
// this.list.forEach(element => {
// if(element.name.indexOf(keyword)!=-1){
// newList.push(element)
// }
// });
// return newList;
// 方法2 使用filter，返回一个数组
return this.list.filter(item => {
if (item.name.includes(keyword)) {
return item;
}
})
}
}
})
</script>
</body>
</html>过滤器
作用：常见文本的格式化，只能用在mustattach插值和v-bind表达式。在要过滤的文本后添加管道符，再加上过滤器
//全局过滤器
<body>
<div id="app">
//过滤器可以传递过个参数
//可以串联多个过滤器
<p>{{ msg | msgFilter('狂人') | second }}</p>
</div>
<script>
//filter第一项为过滤器名称
//function内第一个参数为msg，第二个为要替换的值
Vue.filter('msgFilter', function (msg,arg) {
return msg.replace(/人/g, arg)
}),
Vue.filter('second', function (msg) {
return msg+'============'
})
var vm = new Vue({
el: '#app',
data: {
msg: "我是一个人,人"
},
methods: {
}
})
</script>
</body>
-----------------------------------------------------
//私有过滤器,定义在vue中
//过滤器使用时根据就近原则，优先使用私有
<body>
<div id="app">
<p>{{ msg | msgFilter('狂人') | second }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: "我是一个人,人"
},
methods: {},
filters:{
//msgFilter为过滤器名称
//function为处理函数名称（msg为要过滤的内容，arg为传递的参数）
msgFilter:function(msg,arg){
return msg.replace(/人/g, arg)
}
}
})
</script>
</body>按键修饰符
//点击enter键后触发add方法
<input type="text" class="form-control" v-model="name" @keyup.enter='add'>
//也可以使用键盘码
<input type="text" class="form-control" v-model="name" @keyup.113='add'>
//在全局自定义按键修饰符
Vue.config.keyCodes.名称=按键值自定义指令
//自定义全局指令
Vue.directive('focus', {
// bind当指令绑定到元素上的时候会执行bind函数，仅执行一次
// 第一个参数永远是el，表示被绑定的元素，是一个原生的js对象(DOM对象)
//在元素绑定了指令的时候，还没有插入到DOM中的时候调用。
// 此时调用focus方法没有作用，元素只有在插入DOM内才能获取焦点
//和样式相关的操作可以放在bind中执行
// bind: function (el) {
// el.focus()
// },
// 元素插入到DOM中的时候执行inserted函数，触发一次
//和js相关的操作最好放在inserted中执行
inserted: function (el) {
el.focus()
},
// v-node更新时执行
updated:function(el){
}
})
//自定义指令获取传递的值
//在第二个参数内接收元素自定义指令传递的值
Vue.directive("color",{
bind:function(el,binding){
console.log(binding.value)
el.style.color=binding.value
}
})
---------------------------------------------------------------------------------------
//自定义局部指令
directives:{
'fontweight1':{
bind:function(el,binding){
console.log(binding.value)
el.style.fontWeight=binding.value
}
}
}
//自定义局部简写
// 相当于在bind和update中都有一份
'fontweight1':function(el,binding){
el.style.fontWeight=binding.value
}
发送请求（vue-resource）
- 导入依赖
<script src="./vue-2.4.0.js"></script>
<!-- vue-resource依赖vue，所以先导入vue -->
<!-- 在vue上挂载this.$http.get/post -->
<script src="./vue-resource-1.3.4.js"></script>- 发送请求
methods: {
getInfo(){
//成功回调必传
//失败回调可选
// this.$http.get('url',[options]).then(successCallback,errorCallBck)
this.$http.post('url',{},{}).then(result=>{
console.log(result.body)
})
}JSONP
- 实现原理
由于浏览器安全限制，不允许ajax访问。浏览器认为跨域请求（协议不同，域名不同，端口号不同）不安全。而script标签src属性中的链接却可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。
1263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
