VUE-2.X学习笔记day8

数据存储

localStorage

1. 什么时候存
   每个步骤,多选框,单选框等
2. 什么时候读
   一打开就应该去读取
3. 存的什么东西
   存储的是字符传
4. 需要用到深度监视 watch

遇到问题

1. Unexpected token o in JSON at position 1
   这个问题是你的json转换错误
   解决方法: 清除你的存储或者重新设置

自定义事件

vue的第二种组件间通讯
$on(eventName, optionalPylon) 事件监听
$emit(eventName, optionalPylon) 触发事件
父组件 @事件名="事件名"
子组件 this.$emit("事件名",data)

消息订阅及发布

安装插件

npm install --save pubsub-js
npm info pubsub-js

pubsub.js

 // 订阅消息
    PubSub.subscribe('deleteTodo', (msg, index) => {
      this.deleteTodo(index)
    })

 // 发布消息
        PubSub.publish('deleteTodo', index)

slot(通信标签)(其他的是通信数据)

传递的是标签,需要提前占位,未传数据就不展示
相关方法也需要放到设置标签得对应文件中

 <todo-food>
        <input type="checkbox" v-model="isAllSelect" slot="checkAll"/>
        <span slot="count">已完成{{overNumber}} / 全部{{todos.length}}</span>
        <button slot="deleteAll" class="btn btn-danger" v:show="overNumber" @click="deleteCompleteTodos">清除已完成任务</button>
 </todo-food>

<slot name="checkAll"></slot>
<slot name="count"></slot>
<slot name="deleteAll"></slot>

数据存储优化

1. 函数-->一个功能
2. 对象-->多个功能
具体需要看,你需要向外暴露一个功能还是多个功能
*/
const TODOS_KEY = 'todos_key'
export default {
  saveTodos (todos) {
    window.localStorage.setItem(TODOS_KEY, JSON.stringify(todos))
  },
  readTodos () {
    return JSON.parse(window.localStorage.getItem(TODOS_KEY) || '[]')
  }
}

AJAX请求

1.vue-resource

vue的一个插件,非官方的,在vue1.x的时候使用比较广泛

1. 下载
   npm install vue-resource --save

2. axios

通用的ajax请求库,官方推荐的,vue2.0使用广泛

1. 下载
   npm install axios -save