vue学习笔记-2
一、v-for
<tr v-for="item in list" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.ctime }}</td> <td> <a href="">删除</a> </td> </tr> var vm = new Vue({ el: '#app', data:{ list:[ { id: 1, name: '奔驰', ctime: new Date()}, { id: 2, name: '宝马', ctime: new Date()} ] } });
二、添加
xx.push()
三、数组中的查找
xx.some(参数1)
在.some()中，如果return true，就会终止这个数组的后续循环
.findIndex() 快速找到索引
forEach（）循环
forEach smoe filter findIndex 这些都是属于数组的新方法、都会对数组中的每一项进行遍历，执行相关操作
forEach 没有办法被终止 some findIndex 可以通过return true 来终止
filter 可以把查询到的组成一个新数组
.includes(要包含的字符串) 如果包含返回true 不包含返回false
四、过滤器
过滤器只能在 插值表达式 和 v-bind 中使用
过滤器调用时的格式 {{ name（原内容） | nameope（过滤的表达式） }} ==》过滤后的内容
定义过滤器 Vue.filter('过滤器的名称',function(){要对传过来的数据做什么处理})
Vue.filter('msgFormat',function(data){ return data.replace('i','you') }) <p> {{ msg | msgFormat }} </p>
定义私有过滤器
filters: { //定义私有过滤器
dateFormat: function(dateStr,pattern){
var dt = new Date(dateStr);
var y = dt.getFullYear()
var m = dt.getMonth() + 1
var d = dt.getDate()
return `${y}-${m}-${d}`
}
}
五、定义指令
1.定义全局指令
Vue.directive（‘xx’，{}） 参数2是个对象，这个对象身上有一些指令相关的函数
使用指令时要用 v-xx
Vue.directive('focus',{
bind:function(el){ //在内存中调用
// 在每个函数中第一个参数永远是el ，表示被绑定的指令的元素
}, //每当指令绑定到元素上的时候，会立即执行这个 bind 函数 只执行一次 el为绑定的元素
inserted:function(){ //在页面中调用
el.focus()
}, //表示元素插入到 dom 中的时候 会执行
updated:function(){} //当 vnode 更新的时候，会执行，可能会触发多次
})
2.钩子函数参数
el：所绑定的元素
binding:
name:指令名称
value: 指令的绑定值
oldValue:
expression: 绑定值的字符串形式
arg: 传给指令的参数
modifiers:
vnode:
oldVnode:
3.私有指令
directives:{
'fontweight': {
bind: function(el,binding){
el.style.fontWeight = binding.value
}
}
}
4、函数简写
如果执行操作只需要在 bind 和 update 中执行 可以用函数简写
六、vue实例的生命周期
生命周期钩子：相当于生命周期函数、生命周期事件
生命周期函数分类：
创建期间的生命周期函数：
beforeCreate(){
// 这是我们遇到的第一个生命周期函数，表示实例被完全创造出来会执行他
// 在beforecreate 生命周期执行的时候， date 和 methods 中的数据 都还没初始化
},
created(){
// 这是我们遇到的第二个生命周期函数
// 这是 date 和 methods 已经初始化
},
beforeMount(){
// 这是遇到的第三个生命周期函数，表示 模板已经在内存中完成了，但是还未把 模板渲染到页面中去
// 在 beforemount 执行的时候，页面的元素，还没有被真正的替换过来，只是之前写的一些模板字符串
},
mounted(){
// 这是遇到的第四个生命周期函数，表示 内存中的模板，已经真实的挂到页面中去，用户已经可以看到渲染好的页面
// mounted 是实例创建期间的最好一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其他操作的话，这个实例就静静的躺在内存中一动不动
//如果要通过某些插件操作页面上的dom节点，最早要在 mounted 中进行
//主要执行完了 mounted 就表示整个vue 实例已经初始化完毕，此时，组建已经脱离初始化阶段，进入到运行阶段
}
运行期间的生命周期函数：
运行期间的生命周期函数只有 beforUpdate 和 updated。这两个事件，会根据 date 数据的改变，有选择的 触发 0次 到 多次
beforeUpdate(){
// 这时候，表示 我们的界面还没有被更新，数据肯定被更新了
// 当执行 beforeUpdate 的时候，页面中显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和最新数据保持同步
},
updated(){
// 事件执行时，页面和 date 数据已经保持同步了
}
销毁期间的生命周期函数：
当执行 beforeDestroy 钩子函数的时候，vue实例就已经从运行阶段，进入到了销毁阶段
当执行 beforeDestroy 的时候，实例身上所有的 data 和所有的 methods 已经过滤器 、指令 都处于可用状态，此时还没有真正执行销毁过程
当执行 destroyed 函数的时候，组件已经完全销毁
七、vue中发送ajax请求
除了 vue-resource 之外，还可以使用 axios 的第三方包 实现数据的请求
引入 vue-resource.js 需放在vue.js之后
1.this.$http.get(url，[option]).then(successCallback,errorCallback)
2.this.$http.post(url,[body(发送给服务器的数据)],[options]).then(successCallback,errorCallback) 手动发起的post 默认没有表单格式
通过 post 方法的第三个参数，设置 提交的内容类型 为普通表单数据格式 emulateJSON:true
3.this.$http.jsonp('url').then()
jsonp 由于浏览器的安全性限制，不允许跨域请求
原理：动态创建 script 标签 script 标签不受端口限制
