Vue基础（三）

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
        })

以上仅包含今日所学知识点，大家酌情看哦~