Vue基础

（掌握）本地存储

1、localStorage永久存储

// 添加数据；setItem的value值是字符串类型的数据
localStorage.setItem('name','张三')；

// 获取数据
localStorage.getItem('name'); // 张三
// 清空
localStorage.clear();

注意

除非是主动删除，不然是不会自动删除的
一般浏览器存储的大小是5M

2、sessionStorage临时会话存储

// 添加数据；setItem的value值是字符串类型的数据
sessionStorage.setItem('name','张三')；
// 获取数据
sessionStorage.getItem('name'); // 张三
// 清空
sessionStorage.clear();

3. cookie 状态保持

cookie:

网站中，http请求是无状态的。也就是第一次登陆成功（发送请求），第二次请求服务器依然不知道是哪一个用户。这时候的cookie就是解决这个问题的，第一次登陆后服务器返回数据（cookie）给浏览器，然后浏览器保存在本地，当该用户发送第二次请求，浏览器自动会把上次请求存储的cookie数据自动带上给服务器，服务器根据客户端的cookie来判断当前是哪一个用户。cookie存储有大小限制，不同浏览器不一样，一般是4kb，所以cookie只能存储小量数据。 4kb = 4 * 1024 byte (字节) = 4 * 1024 * 8 bit（位）
token: 用户登录凭证，服务端返回给浏览器（前后端分离项目，基本都是发送ajax请求）
2. session：
session和cookie的作用有点类似，也是存储用户相关信息。不同的是cookie存储在浏览器，而session存储在服务器。

Vue指令

vue框架特点：双向数据绑定与组件化开发

1、(重点) 深入双向数据绑定原理

(重点) 借助Object.defineProperty()对数据进行劫持，并结合发布-订阅者模式，来实现双向数据绑定

语法：
Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 属性描述符 数据属性：
通过Object.defineProperty()为对象定义属性，有两种形式，分别为数据描述符，存取描述符，下面分别描述两者的区别：
value 表示它的默认值
writable 如果为true标识可以被修改，如果为false标识不能被修改（默认值为false）
configurable 描述属性是否配置，以及可否删除，可以认为是总开关默认值 false（不可删除）
enumerable 描述属性是否出现在for in 或者 Object.keys()的遍历中默认值false(不能遍历)

  let obj = {};
  Object.defineProperty(obj, 'name', {
    value: '张三',
    writable: true,
    configurable: true,
    enumerable: true
  })
  obj.name = '李四'
  // delete obj.name
  console.log(obj.name) // 李四
  console.log(Object.keys(obj)) // ['name']

Object.defineProperty() get() 和 set() 的格式

        let obj = {}
        let val = "Vue"
        Object.defineProperty(obj, "name",{
            get(){
                // 什么时候执行这里的代码？？ 
                // 获取name属性值的时候，就执行这里的代码

                // ！！！  obj.name的值到底是多少？？ 就是return后面的这个值
                console.log("执行了get方法");
                return val
            },
            set(newVal){   // newVal接收新的值
                // 对象劫持 数据劫持 setter
                console.log("执行了set方法！！！",newVal);
                val = newVal
            }
        })

        console.log(obj.name);
        obj.name = "Vue3"   // 触发set方法,在set方法中修改val
        console.log(obj.name);

2、自定义指令

全局自定义指令格式：

// 注册一个全局自定义指令 v-demo
Vue.directive('demo', {
	inserted: function (el, binding) {
		
		console.log(el, binding);
	},
    update(el, binding){}
})

局部自定义指令格式：

// 组件中注册局部指令
new Vue({
	el: '#app',
	data: {},
	directives: {
		demo: {
			inserted: function (el, binding) {
				cosnole.log(el, binding);
			}
		}
	}
})

自定义指令的使用：

// 在模板中使用自定义指令
<div v-demo>
    
</div>

3、过滤器

过滤器，用来处理数据的格式
RMBFormat 是过滤器名字

局部过滤器

{{数据 | 过滤器}}

        <div id='app'>
        <p>总价: {{ total | RMBFormat }}</p>
        </div>
        
        // 定义一个过滤器
        new Vue({
            el: '#app',
            data: {
                total: 99
            },
            filters: {
                // 定义一个过滤器
                RMBFormat(value) { // value接收   | 前面的total
                    return "¥" + value + "元"
                }
            }
        })

全局过滤器

        <div id='app'>
            <!-- RMBFormat 是过滤器名字 
                {{数据 | 过滤器}}
            -->
            <p>总价: {{ total | RMBFormat }}</p>
        </div>
        
        // 定义全局过滤器
        Vue.filter("RMBFormat", value => {
            return "¥" + value + "元"
        })

        new Vue({
            el: '#app',
            data: {
                total: 99
            }
        });

4、v-for的key属性

key 是Vue内部用来判断这个节点需不需要更新的一个依据
key属性的作用：
减少不必要的DOM更新，提高节点的更新效率(高效更新虚拟DOM)

key什么时候写？？写v-for的时候，就需要写key属性
key属性的值要写什么？可以的话书写id值
key属性的类型只能是 string 或者 number

虚拟DOM 一个js模拟出来的对象

        let ulDom = {
            name:"ul",
            props:{
                title:"xxx"
            },
            children:[
                {
                    name:"li",
                    props:{
                        xxx
                    },
                    children:[{
                        name:"span"
                    }]
                }
            ]
        }

Vue基础-第三篇