学习笔记-DAY01-VUE

学习笔记-DAY01-VUE

---

前言

第一次尝试在网络上写笔记，不够成熟，暂时只为了以后能及时翻查而写

---

一、Vue中的钩子函数&监听&方法的调用时机？

• 钩子（create）：页面加载时发请求(刷新)
• 监听（watch）：是被监听的字段又发生改变的时候发送请求
• 方法（method）: 不发请求，而是等待被调用

二、点击上一页、下一页后刷新，页面依旧可以跳回当前页，而非首页

大致思路：在监听函数watch中记录当前的页数：page，把page放到地址栏，保证地址栏的值与searchParam（data中的参数，存储地址栏"?"后面的数据）是一致的:

searchParams: {
         key: "",
         page: 1,
         filterParams: {}
},

钩子函数

created(){
    //获取地址栏的key的值
    const key = ly.getUrlParam("key")
    //判断是否有搜索条件
    if(!key){
        alert("请求提供搜索条件！")
        return
    }
    //把key值赋值给searchParams中的key
    //this.searchParams.key = key

    //获取地址栏location的search
    const searchStr = location.search.substring(1)
    //将searchStr转成json对象
    const searchObj = ly.parse(searchStr)
    //判断searchObj中是否有page属性
    searchObj.page = searchObj.page || 1
    //判断searchObj中是否有filterParams属性
    searchObj.filterParams = searchObj.filterParams || {}
    //把searchObj对象值覆盖给searchParams
    this.searchParams = searchObj

    //向服务器发起请求
    this.loadSearchPage()
},

监听器

watch: {
	"searchParams.page": {
	    handler() {
	        //把page值放到地址栏，保证地址栏的值与searchParams是一致的
	        //将searchParams转成字符串
	        const searchStr = ly.stringify(this.searchParams)
	        //替换location的search，注意：只要location的search发生了变化，页面就会自动刷新
	        //location.search = searchStr
	
	        //指定新的地址栏url
	        const newUrl = location.origin+location.pathname+"?"+searchStr
	        //使用history修改地址栏，可以不刷新页面
	        window.history.replaceState(null, null, newUrl)
	
	        //向服务器发起请求
	        this.pageChange()
	    }
	},

上面的代码中特别注意一下的是：

1. window.history 代替了 location.search，因为使用后者页面会自动刷新一次，用户体验不好
2. const newUrl = location.origin+location.pathname+"?"+searchStr

三、点击筛选条件后，被点击的参数能够添加到地址栏中

在method中添加一个方法：

clickFilterParams(key, value){
    //先把filterParams对象赋值给另外一个地址的对象
    const {...newFilterParams} = this.searchParams.filterParams
    newFilterParams[key] = value
    this.searchParams.filterParams = newFilterParams

    //将searchParams转成字符串
    const searchStr = ly.stringify(this.searchParams)
    //指定新的地址栏url
    const newUrl = location.origin+location.pathname+"?"+searchStr
    //使用history修改地址栏，可以不刷新页面
    window.history.replaceState(null, null, newUrl)
}

这里需要注意我们用的是：

1. this.searchParams.filterParams[key] =
   value而不是this.searchParams.filterParams.key =
   value,用后面的写法将得不到我们想要的结果，因为key是一个变量，后面的写法相当于把key当做一个常量了。
2. List item
   const {…newFilterParams} 表示我们有可能需要多个参数，代表一个另外的一个地址， 如果直接写

 const {...newFilterParams} = this.searchParams.filterParams

表示的还是原来的地址。新的地址变化，即可触发监听事件

四、点击事件

@click="clickFilterParams(k, o.id || o)

<div class="fl value">
    <ul class="type-list">
        <li v-for="o in v" :key="o.i