1、 Vue中局部过滤器
使用语法:{{要传入的参数 | 过滤器的名字}}
局部过滤器无法作用到全局
// 局部过滤器
filters:{
RMBformat(value){
return '¥' + value.toFixed(2) + '元'
}
},
2、 Vue中全局过滤器
全局的都是依赖Vue的某一个方法来实现的
全局过滤器语法:Vue.filter(‘过滤器的名字’,参数 => {})
3、 自定义指令
局部自定义指令语法:
‘自定义指令的名字(不要v-)’:{
// 当元素绑定了这个指令的时候执行,只执行一次
bind(el,binding){
el:元素对象
binding:一些信息 binding.value
},
update(el, binding){
当绑定指令的节点有更新时执行此处代码
}
}
全局自定义指令语法:
Vue.directive(‘自定义指令名字’,{
inserted(el,binding){
当有元素插入父节点中的时候执行此处代码(页面一打开就执行了)
}
})
4、 localStorage永久存储
添加:localStorage.setItem(‘key’,value)
获取:localStorage.getItem(‘key’)
删除:localStorage.removeItem(‘key’)
清空:localStorage.clear()
5、 sessionStorage临时会话存储
临时绘画存储,浏览器一旦关闭就会自动删除
存:sessionStorage.setItem(‘key’,value)
取:sessionStorage.getItem(‘key’)
6、 Object.defineProperty方法中的get和set
// Object.defineProperty()方法中的get和set方法
let obj = {
name:'沐沐'
}
// 声明一个变量来表示这个属性的值
let val = 123
Object.defineProperty(obj,'age',{
get(){
// 获取该属性时执行此处代码,return后面的值决定该属性的值
console.log('执行了get方法');
return val
},
set(newVal){
// 更改该属性值时执行此处代码
console.log('执行了set方法',newVal);
// 将修改之后的值赋值给val
val = newVal
}
})
// 改变属性值,执行set方法
obj.age = 10
console.log(obj);
7、 使用Object.defineProperty()方法实现数据的双向绑定
<input type="text" id="ipt">
<p id="op"></p>
// 1、设置一个空对象模拟VUe中的data
let obj = {}
let val = '初始值'
// 2、给这个空对象添加属性(Object.defineProperty())
Object.defineProperty(obj,'txtVal',{
get(){
// 获取这个属性值的时候执行
return val
},
set(newVal){
// 4、修改get中return的值
val = newVal
// 5、将页面上用到newVal的地方给页面元素添加新的值
op.innerHTML = newVal
}
})
// 3、修改文本框的值,需要绑定事件(输入事件)
ipt.addEventListener('input',function(e){
// 3.1、将输入的内容赋值给这个对象的属性值(修改txtVal触发set方法)
obj.txtVal = e.target.value
})
// 1.1 给页面元素添加默认值
ipt.value = obj.txtVal
op.innerHTML = obj.txtVal
8、 key属性
作用:减少DOM更新,提高渲染效率
一般搭配v-for使用
<li v-for="item,index in list" :key="item.id">{{item.name}}</li>
9、 Object.defineProperty
语法:Object.defineProperty(对象名,‘属性名’,{一些属性的描述})
Object.defineProperty(obj,'gender',{
// 属性值
value:'女',
// 是否可以修改属性值
writable:true,
// 是否可以删除属性
configurable:true,
// 枚举性设置(是否可以遍历)
enumerable:true
})
以上仅包含今日所学知识点,大家酌情看哦~