【Vue】二

②一定要在可信的内容上使用v-html，永远不要用在用户的提交上

解决： 后端使用HTTPOnly，即只有Http传输能读取到这些cookie

v-cloak 防止网速慢导致未经解析的模板加载到页面


如上图，由于js没有加载导致vue也不能加载，页面会显示容器中未曾解析的{{name}}，但是加上v-cloak后，根据css样式会隐藏属性为v-cloak的节点，而v-cloak的特性是vue加载时会自动删掉，因此解析后的模板就会显示了。

v-once

v-once所在节点在初次动态渲染之后，就被视为静态内容了

以后的数据的改变也不会引起v-once所在结构的更新，可以用于优化性能

v-pre

v-pre可以让vue跳过所在节点的编译过程

可以利用它跳过没有使用指令、差值语法的节点，会加快编译

自定义指令

Vue生命周期

浏览器本地存储

localStorage

保存

        let person = {
            name: 'gravce',
            sex: 'male'
        }
        function SaveData() {
            localStorage.setItem('msg', 'hello')
            localStorage.setItem('msg1', 123)
            localStorage.setItem('person', JSON.stringify(person))
        }

数据保存会以字符串形式，对象应该使用json

获取

        function GetData() {
            document.getElementById('output').value =
                             localStorage.getItem('person')
        }

删除

        function DeleteData() {
            localStorage.removeItem('person')
        }

清空

        function ClearData() {
            localStorage.clear()
        }

SessionStorage

LocalStorage是保存在用户磁盘上的，浏览器关闭会话结束后不会消失，而SessionStorage会

使用浏览器本地存储保存Todolist结果

只需使用一个监视属性即可解决

    data() {
      return {
          todos: JSON.parse(localStorage.getItem('todos')) || []
      }
    },
    watch: {
      todos(val) {
        localStorage.setItem('todos', JSON.stringify(val))
      }
    },

注意代码中的"|| []"，这是为了防止localStorage为空时，导致JSON解析为null，进而导致todos拿到的不是空数组而是null进而引起的后续错误

意料之外的bug

上面的代码在刷新页面之后不能显示做没做完，原因是没有开启深度监视

    watch: {
      todos: {
        handler(val) {
          localStorage.setItem('todos', JSON.stringify(val))
        },
        deep: true
      }
    },

组件自定义事件

绑定事件

给组件绑定一个hikaru自定义事件，当Student组件中触发该事件时，demo就会被调用

绑定的简写

组件事件的触发 $emit

        methods: {
            getName() {
                // 触发Student组件身hikaru事件
                this.$emit('hikaru')
            }
        },

在App.vue中使用mounted、$on 延迟事件的触发

mounted() {
  setTimeout(()=>{
    this.$refs.stu.$on('hikaru', this.demo)
  }, 3000)
},

解绑自定义事件 $off

methods: {
    getName() {
        // 触发Student组件身上的getName事件
        this.$emit('hikaru')
    },
    unbind() {
        this.$off('hikaru')
    }
},

解绑多个事件：this.$off(['hikaru', 'xxx'])

解绑所有事件：this.$off()

全局事件总线 实现任意组件之间的通信

分析：全局事件总线，实质是创建一个中间组件或者vue实体，所有的其他组件都能在这个中间体上绑定事件并通过触发事件获取数据，因此，此中间体需要满足两个条件：

①所有组件都能看见它

②它可以调用$on、$off、$emit方法

定义方式一：通过VueComponent

1 在main.js安装事件总线

const vc = Vue.extend({})
Vue.prototype.bus = new vc()

2 在事件总线上绑定事件

    mounted() {
      let items = this.$refs.list.$refs.item
      items.forEach(item => {
        item.$on('checkTodo', this.checkTodo)
        item.$on('deleteOne', this.deleteOne)
      });

      this.bus.$on('hikaru', this.hikaru)
    }

3 其他组件在时间总线上触发事件

hikaru

定义方式一：通过VM

vm本身就可以作为原型对象，不需要在创建vue

在main.js安装事件总线

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.bus = this
  }
}).$mount('#app')

需要注意总线bus的赋值时机，在vm创建之前的话vm没有生成，而在之后的话vm已经执行完了mounted挂载，因此需要放在beforeCreate钩子中

全局事件总线的使用场景


消息订阅与发布

动画效果

过渡实现动画效果

    /* 进入的起点 */
    .hello-enter, .hello-leave-to{
        transform: translateX(-100%);
    }
    /* 进入的重点 */
    .hello-enter-to, .hello-leave{
        transform: translateX(0);
    }
    /* 进入离开动画 */
    .hello-enter-active, .hello-leave-active {
        transition: 1s ;
    }

多个元素过渡

        
            

                
 
                

                    Hello
                
            

            

                
 
                

                    Hello
                
            
        

多个元素过渡需要使用transition-group，并且需要在元素上添加key值

集成第三方动画库

https://animate.style/

        
            

                
 
                

                    Hello
                
            
        

(1) 安装并导入

$ npm install animate.css --save

(2) 配置name、进入离开动画

group必须配置key

配置代理 解决ajax请求跨域问题

几种Ajax

① xhr（原生js实现）

xhr = new XMLHTTPRequest()

xhr.open() 配置请求信息

xhr.send() 发送请求

② JQuery

$.get $.post

③ axios（最常用）

④ fetch

②③都是对xhr进行二次封装，fetch和xhr都是原生的js实现

fetch获取响应需要两层then，且兼容性不好

使用axios获取学生信息

        methods: {
            getStuInfo() {
                axios.get('http://localhost:5000/students').then(
                    response => {
                        console.log(response.data)
                    },
                    error => {
                        console.log(error.message)
                    }
                )
            }
        }

存在的跨域问题

跨域：违背了同源策略，即协议名、主机名、端口号必须一致。


如图所示，浏览器端口号8080与服务器5000不一致导致跨域问题，需要注意的是跨域问题并不是没有发送响应请求，而是在服务器响应给浏览器时，浏览器发现跨域而将数据隐藏了起来

解决跨域的策略

1 cors

大致思路：服务器在响应给浏览器数据时会在响应体中携带一些特殊的响应头，以告知浏览器可以无视跨域问题。

但是在开发中响应头是不能随便修改的，而且这种策略需要完全由后端进行

2 jsonp

大致思路：利用script标签的src属性不受同源跨域问题影响的特性

但是需要前后端同时进行修改，而且只能处理get请求

3 使用代理服务器（常用）


如此一来，8080端口的浏览器端和8080代理服务器通过ajax请求通信就不存在跨域问题，而且同时服务器和代理服务器是通过http通信，更不存在跨域问题

代理服务器的配置 方式一

vue.config.js

module.exports = {
  pages: {
    index: {
      entry: 'src/main.js'
    }
  },
  devServer: {
    proxy: 'http://localhost:5000'
  }
  }

同时修改前端页面的请求端口号为代理服务器的8080

Test2.vue

    export default {
        name: 'Test2',
        methods: {
            getStuInfo() {
                axios.get('http://localhost:8080/students').then(
                    response => {
                        console.log(response.data)
                    },
                    error => {
                        console.log(error.message)
                    }
                )
            }
        }
    }

但是这样存在两个个问题：请求会首先在8080端口号下查找student资源，当发现没有的时候才去向代理服务器发送请求；另一个问题是只能给一台服务器转发请求

代理服务器的配置 方式二

  devServer: {
    proxy: {
      '/hikaru': {
        target: "http://localhost:5000",
        pathRewrite: {'^/hikaru':''},
        ws: true,
        changeOrign: true
      }
    }
  }