Vue学习笔记（二）

一. 数据请求

1. fetch

why

XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，
而且基于事件的异步模型写起来不友好。
兼容性不好

polyfill

//https://github.com/camsong/fetch-ie8


    //get
        fetch("**").then(res=>res.json()).then(res=>{console.log(res)})
        fetch("**").then(res=>res.text()).then(res=>{console.log(res)})
    //post
        fetch("**",{
              method:'post',
              headers: {
                        "Content-Type": "application/x-www-form-urlencoded"
                       },
              body: "name=kerwin&age=100"
        }).then(res=>res.json()).then(res=>{console.log(res)});
        fetch("/users",{
            
              method:'post',
              // credentials: 'include',
              headers: {
                        "Content-Type": "application/json"
                       },
              body: JSON.stringify({
                name:"kerwin",
                age:100
              })
        }).then(res=>res.json()).then(res=>{console.log(res)});

注意

Fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})

2.axios

axios.get("") 
   axios.post("") 
   axios.put("")
   axios.delete("")

   axios({
    url:"",
    headers:{
      'X-Client-Info': '{"a":"3000","ch":"1002","v":"1.0.0","e":"1"}',
      'X-Host': 'mall.cfg.common-banner'
    }
   }).then(res=>{
    console.log(res.data);
   })

   返回的数据会被包装

    {
      *:*
      data:真实后端数据
    }

二. 组件

1. 虚拟dom与diff算法 key的作用

（1）把树按照层级分解

(2) 同key值对比

(3) 同组件对比

2. 为什么组件化

扩展 HTML 元素，封装可重用的代码

3. 组件注册方式

a.全局组件

b.局部组件

4. 组件编写方式与Vue实例的区别

自定义组件需要有一个root element
父子组件的data是无法共享
组件可以有data，methods,computed....,但是data 必须是一个函数

5. 组件通信

i. 父子组件传值 (props down, events up)

ii. 属性验证

props:{name:Number} Number,String,Boolean,Array,Object,Function,null(不限制类型)

iii. 事件机制

a.使用 $on(eventName) 监听事件

b.使用 $emit(eventName) 触发事件

iv. Ref

this.$refs.mytext

v. 事件总线

var bus = new Vue();

mounted生命周期中进行监听

6. 动态组件

元素，动态地绑定多个组件到它的 is 属性
保留状态，避免重新渲染

7. slot插槽 (内容分发)

混合父组件的内容与子组件自己的模板-->内容分发
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

a. 单个slot

b. 具名slot

注意 v-slot 只能添加在 template 上, 文本节点也可以当具名插槽内容插入

8. transition过渡

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

(1)单元素/组件过渡

css过渡
css动画
结合animate.css动画库

(2) 多个元素过渡(设置key)

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

mode:in-out ; out-in

(3)多个组件过渡

(4)列表过渡(设置key)

不同于 transition，它会以一个真实元素呈现：默认为一个。你也可以通过 tag 特性更换为其他元素。

提供唯一的 key 属性值

9. 生命周期

i. 生命周期各个阶段

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

ii. 生命周期钩子函数的触发条件与作用

10. swiper学习

https://www.swiper.com.cn/

11. 自定义组件的封装

自定义封装swiper组件（基于swiper）

注意：防止swipe初始化过早

三. 指令

1. 自定义指令

(1)自定义指令介绍 directives - 对普通 DOM 元素进行底层操作

(2)钩子函数

参数 el,binding,vnode,oldvnode
bind,inserted,update,componentUpdated,unbind

(3)函数简写

(4)自定义指令-轮播

inserted 插入最后一个元素时初始化swiper

2. nextTick

this.$nextTick()

四.过滤器

https://cn.vuejs.org/v2/guide/filters.html

全局写法

局部写法

可以串联

过滤器是 JavaScript 函数，因此可以接收参数

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 'arg1' 作为第二个参数，表达式 arg2 的值作为第三个参数。

五、.单文件组件

1.写法

https://cn.vuejs.org/v2/guide/single-file-components.html

2.vue-cli3.0的使用

npm install -g @vue/cli (一次安装)

vue create myapp

npm run serve 开发环境构建
npm run build 生产环境构建
npm run lint 代码检测工具

style标签加上scoped属性，css局部生效 style标签加上lang="scss"，支持scss

3. Vue.config.js的配置

(1) proxy代理

https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE

   devServer: {
       port:8000, //随便改端口号
       proxy: {
            '/api': {
                target: 'https://*.*.com',
                host: '*.*.com',
                changeOrigin:true
            }
      }
     }

(2) alias别名配置

@ is an alias to /src

(3) vue.config.js 中配置 publicPath: './'

(4)关闭eslint

vue.config.js lintOnSave: false

.eslintrc 删除 '@vue/standard' （对于某个规则关闭， no-new:"off" ）

4. 利用vue cli进行组件化开发

迁移todolist、swiper案例到vue cli中

六. 路由开发

1. SPA概念

2.vue-router

开始

动态路由匹配
嵌套路由
编程式导航 (js跳转) vs 声明式导航
命名路由
重定向和别名

HTML5 History模式

vue支持两种模式

a. hash #/home

b. history /home

路由守卫&路由拦截

全局拦截

单个拦截

路由懒加载

3. 路由原理

(1)hash路由 ==> location.hash 切换

window.onhashchange 监听路径的切换

(2)history路由==> history.pushState 切换

window.onpopstate 监听路径的切换

4. 项目

(1) 启动案例项目开发

(2) 利用vue-router搭建项目SPA结构