Vue基础3

3.1 axios && fetch
目的： 是在框架中使用数据请求
回顾：
封装ajax
jquery 【 $$.get$$ .post $$.ajax$$ .load 】
框架：
数据请求
使用原生js提供的fetch
使用第三方封装库： axios
Vue中可以统一对axios进行挂载
Vue.prototype.$http = axios
fetch vs axios
axios 对已获得的数据进行了一层封装 XSRF
axios底层自动对数据进行了格式化
fetch并没有进行封装，拿到就是格式化后的数据
fetch进行了多一层的格式化
res.json()
res.blob() 格式化二进制
res.text()
Axios总结
1.get方法

A: 无参数
    axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
B: 有参数
    axios({
        url: 'http://xxx',
        method: 'get' //默认就是get,这个可以省略，
        params: {
            key: value
        }
    })

2.post
    注意： axios中post请求如果你直接使用npmjs.com官网文档， 会有坑
    解决步骤： 
            1. 先设置请求头 
            2. 实例化 URLSearchParams的构造器函数得到params对象
            3. 使用params对象身上的append方法进行数据的传参

// 统一设置请求头
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
let params = new URLSearchParams()

// params.append(key,value)

params.append(‘a’,1)
params.append(‘b’,2)

axios({
url: ‘http://localhost/post.php’,
method: ‘post’,
data: params，
headers: { //单个请求设置请求头
‘Content-Type’: “application/x-www-form-urlencoded”
}
})
.then(res => {
console.log( res )
})
.catch( error => {
if( error ){
throw error
}
})

Fetch
1.get

fetch(‘http://localhost/get.php?a=1&b=2’)
.then(res=> res.text()) // 数据格式化 res.json() res.blob()
.then(data => {
console.log( data )
})
.catch(error => {
if( error ){
throw error
}
})

注意事项：
A: fetch 的 get 请求的参数是直接连接在url上的， 我们可以使用Node.js提供的url或是qureystring模块来将
Object --> String
B: fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个， 第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据
格式化处理方式有
fetch(’./data.json’)
.then(res=>{
res.json() //res.text() res.blob()
})
.then( data => console.log(data))
.catch( error => console.log( error ))

2.post
fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82

fetch项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975
历史
Vue1.0
Vue1.0数据请求我们使用的是一个第三方的封装库，这个封装库叫做 vue-resource
vue-resource现在已经淘汰了,它的作者也推荐我们使用axios
vue-resource使用形式和axios一样的
this.$http.getthis.$http.post
this.$http({})
vue-resource有jsonp方法,而axios是没有的
Vue2.0
axios [ 可以说是目前最好的数据请求的封装库 ]
fetch
3.2 计算属性
computed 是Vue中的一个选项
作用： ？
业务： 如果我想让一个字符串反向，如何实现？
分析： 反向 -> 数组【 reverse 】

3.2.1 侦听属性
watch 是Vue中一个选项
作用： ？
监听数据的变化，当数据发生改变时，我们完成一些操作
业务：
watch: {
firstName ( val ) {
this.fullName = val + this.lastName
},
lastName ( val ) {
this.fullName = this.firstName + val
},
num: {
deep: true, // 深度监听
handler ( val ) {
// 当num发生改变时，触发的方法
console.log( val )
}
}
}
总结： methods vs computed vs watch
项目中如何使用
事件处理程序： methods
watch
有大量数据交互和异步处理时进行
computed
有逻辑处理
V中像全局变量一样使用
3.3 混入 【 青铜 】
minxin
混入的形式
全局混入 【 不推荐 】
局部混入
混入的作用：
将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想
局部混入的使用
选项 minxins
全局混入
Vue.mixin({})
3.4 组件 【 王者 】
了解前端组件化发展历史
前后端耦合
前后端不分离项目
找后台搭建项目开发环境
寻找项目目录中的静态资源目录
js
img
css
同步修改css
前后端分离
前端团队合作项目的出现
组件化为了解决多人协作冲突问题
复用
组件的概念
组件是一个html 、 css 、js 、img 等的一个聚合体
Vue中的组件属于扩展性功能
通过 Vue.extend() 来扩展的
ƒ Vue (options) {
if (!(this instanceof Vue)
) {
warn(‘Vue is a constructor and should be called with the new keyword’);
}
this._init(options);
}
ƒ VueComponent (options) {
this._init(options);
}
VueComponet这个构造函数我们不进行new实例化，我们希望组件是以标签化的形式展示
-->

组件要想合法化，必须注册解析
组件的注册 【 创建 】
全局注册
局部注册
组件的规则
is属性 - 动态组件 - 动态缓存组件
template模板标签
直接子元素有且仅有一个
组件的嵌套
4.0 组件的通信 【 王者 】
为什么要进行组件通信？
组件是一个聚合体，将来项目要合并，那么必然各个组件之间需要建立联系，这个联系就是数据通信
分类
父子组件通信
理解： data选项为什么是一个函数？
组件是一个聚合体，也是一个整体，它需要一个独立的作用空间，也就是它的数据需要是独立的，目前js的最大特点是函数式编程，而函数恰好提供了一个独立作用域，所以我们data在出根组件外都是函数
理解： 为什么data函数需要返回一个返回值，返回值还是对象，不能是数组吗？
Vue通过es5的Object.definePerproty属性对一个对象进行getter和setter设置，而data选项是作为Vue深入响应式核心的选项
过程
父组件将自己的数据同 v-bind 绑定在 子组件身上
子组件通过 props属性接收

这里是father

​

这里是son

我收到了父亲给的 {{ money }}

​ props属性数据验证 验证数据类型 验证数据大小【 判断条件 】 // props: ['money'] // 数据验证 // props: { // 'money': Number // } props: { 'money': { validator ( val ) { // 验证函数 return val > 2000 } } } 工作中： 第三方验证 TypeScript [ TS ] 插件 vue-validator 等 子父组件通信 是通过自定义事件 事件的发布 通过绑定元素身上实现 事件的订阅 通过this.$emit触发 // html

这里是father

我现在有 {{ gk }}

4.1 slot

slot 插槽

​ 比如： 插卡游戏机

1. 分类

   • 普通插槽

   • 具名插槽

     • 给slot加一个name属性

       <slot name = "header"></slot>
       

   • 注意： 以上内容是 Vue 2.5.x的版本

   • Vue 2.6.x以上的版本将使用 v-slot指令来代替 2.5.x使用方式

2. v-slot指令

   • 作用：
     • 可以将组件的数据在组件的内容中使用

4.2 过渡效果

Vue框架使用css3过渡效果或是js动画

Vue内部提供了一个叫做transition的过渡组件

使用transition包裹过渡元素，那么会自动添加 6 个类名 8个钩子函数

• 默认 类名 开头 v
• 如果有name属性，那么使用 这个name属性值作为类名开头

1. 实现方式
   • 在 CSS 过渡和动画中自动应用 class 【 自己写 】
   • 可以配合使用第三方 CSS 动画库，如 Animate.css
   • 在过渡钩子函数中使用 JavaScript 直接操作 DOM
   • 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
2. 第一种 [ 在 CSS 过渡和动画中自动应用 class 【 自己写 】 ]
3. 第二种： animate.css 【 推荐 】
4. 第三种： Vue提供了8个javascript钩子，我们需要自定义js动画
5. 第四种： 使用第三方插件： Velocity.js

4.3 生命周期

4.4 swiper

swiper是一个实现滑动操作的一个第三方库，目前最好的滑动操作库

4.5 自定义指令

业务： 页面开启时自动获得 search 按钮焦点

• 定义形式

  • 全局定义

    // Vue.directive('focus',{
      //   // 5个javascript钩子     5个中掌握2个
      //   bind (el,binding,vnode,oldVnode) { // 当自定义指令和元素绑定时触发
      //     console.log( 'bind', )
      //   },
      //   inserted ( el,binding,vnode,oldVnode ) { // 当自定义指令绑定的元素插入到页面时触发
      //     console.log( 'el',el) 
      //     console.log( 'binding',binding)
      //     console.log( 'vnode',vnode)
      //     console.log( 'oldVnode',oldVnode)
      //     console.log('inserted')
    
      //     if ( binding.modifiers.a ) {
      //       el.style.background = 'red'
      //     } else {
      //       el.style.background = 'blue'
      //     }
    
      //     el.value = binding.expression
    
      //     el.focus()
    
      //   },
      //   updated () { // 当自定义指令的元素或是他的子元素发生变化式触发
    
      //   },
      //   componentUpdate () { //当自定义指令的元素或是他的虚拟子节点 发生变化式触发
    
      //   },
      //   unbind () { // 当自定义指令绑定的元素解绑时触发
    
      //   }
      // })
    

  • 局部定义

     new Vue({
        el: '#app',
        directives: {
          'focus': {
            bind () {
    
            },
            inserted ( el ) {
              el.focus()
            }
          }
        }
      })
    

4.6 过滤器

• 1. 作用
     • 是对已经有的数据做数据格式化

• 2. 使用格式

     • 已有数据 | 过滤器名称(arg1,arg2)

       <img 
            :src = "item.img | imgFilter "
            οnerrοr="this.style.visibility='hidden'"
            >
     

     • | 我们称之为 管道符

• 定义

  • 全局定义
    • Vue.filter
  • 局部定义
    • filters选项

  全局定义
  // Vue.filter('imgFilter',function ( val ) {
    //   //val就是需要格式化的数据
    //   // console.log('val',val)
    //   return val.replace( 'w.h', '128.180')
    // })
  
    new Vue({
      el: '#app',
      data: {
        lists: []
      },
      filters: { // 局部定义
        // 过滤器名称：function () {}
        'imgFilter': function ( val ) {
          return val.replace( 'w.h', '128.180')
        }
      },
      methods: {
        getList () {
          fetch('./data/list.json')
            .then( res => res.json())
            .then( data => {
              this.lists = data.movieList
            })
            .catch( error => console.log( error ))
        }
      }
    })
  

.1 todolist案例

• sui - ui库 + Vue + OOCSS

5.2 虚拟DOM & DIff算法

• 掌握程度： 了解

• 案例

  • 操作真实DOM越少越好，尽量的去操作数据
  • 所以总结出来虚拟dom，
  • 所以Vue利用VDOM的对象模型来模拟DOM结构
  • 但是当一个页面很复杂式，DOM结构的模拟就变的很复杂了，所以Vue使用了一个新的语法糖，叫做JSX

• jsx

  • javascript + xml 让我们可以在js中书写dom结构

      <template id="mask">
        <div class="mask-box">
          <div class="mask-bg"></div>
          <div class="mask-content">
            <p> 您确定要离开吗？ </p>
            <button 
              class="button button-warning button-fill pull-right"
              @click = "removeItem( activeIndex )"
            > 确定 </button>
          </div>
        </div>
      </template>
    

• render

  • （ createElement => VNode ）
  • 将 jsx 通过 render 方法解析为对象模型

• 流程

  • 第一次时

  • template模板使用jsx语法进行编辑

  • 通过render函数将jsx解析为 vdom 对象模型

  • 将VDOM对象模型渲染为真实DOM,然后挂载到页面中

  • 当我们的数据发生改变时

  • 重新生成VDOM

    [外链图片转存失败(img-slWGSji0-1567125416496)(E:\1906\2-Vue.js\note\vue笔记\img\VDOM.png)]

  • 总结：

    • 1. 为什么Vue中要使用VDOM?
    • 2. VDOM为什么可以优化Vue ？
    • 3. VDOM渲染流程
    • 4. JSX语法
    • 5. render函数

5.3 生命周期 [ 王者 ]

掌握程度

1. 会写
2. 会念
3. 明白和了解每一个钩子函数的作用和意义

特别注意：

​ 钩子函数不要写成箭头函数，箭头函数可能会改变this指向

• 理解： 为什么要有生命周期 ？

• Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能，方便我们更好的去控制组件

• 类比： 人

  • 出生 - 哭
  • 小学 - 小学
  • 中学
  • 高中
  • 大学 / 专科
  • 工作
  • 。。。

• Vue的生命周期分为三个阶段，8个钩子函数

  • 初始化

    自动执行

    研究方向

    ​ 数据

    ​ 真实DOM

    • beforeCreate

      组件创建前

      • 作用： 为整个生命周期做准备工作，初始化事件和自身或是子组件的生命周期做准备
      • 类比： 父母为子女的相亲做准备
      • 意义：
        • 数据拿不到
        • 真实dom拿不到
      • 项目中
        • 不常用

    • created

      组件创建结束

      • 作用： 初始化注入其他选项 和 激活 选项
      • 类比： 我们本人知道了父母准备给我们相亲这件事，父母通知你了
      • 意义：
        • 数据可以拿到
        • 真实dom拿不到
      • 项目中：
        • 数据请求，也可以修改一次数据

    • beforeMount

      组件挂载前

      ​ 挂载： 组件插入到页面

      • 类比：两人初步联系
      • 意义：
        • 数据可以拿到
        • 真实dom没有拿到
      • 在项目中
        • 数据请求，数据修改
        • 建议不要去使用它了，让它完成内部事务，不给加负担
      • 内部完成事务
        • 判断el选项 - new Vue 是否有 el
          • 有，继而判断是否有template选项，证明有子组件
            • 有template,那么我们通过render函数将jsx解析为VDOM对象模型
            • 无template,那么我们需要通过outerHTML手动渲染
              • outerHTML，元素外进行渲染，并且会代替原来的容器盒子，并且template在实例内会被解析，将来不会渲染到页面
          • 无： 那么我们需要手动挂载： new Vue().$mount(’#app’)

    • mounted

      组件挂载结束，也就是已经插入到页面中了

      • 类比： 两人约见面 【 奔现 】
      • 意义：
        • 数据可以拿到
        • 真实DOM也可以拿到
      • 项目中
        • 数据修改，数据请求
        • 真实DOM操作 【 不推荐 】
          • 理由： 我们要用数据驱动视图
          • 应该做的： 第三方实例化 【 静态数据 】

  • 运行中

    运行中触发条件是： 数据改变

    ​ 只要数据改变，就会触发这两个钩子函数

    • beforeUpdate

      组件更新前

      • 类比： 奔现失败后，再一次在一次进行
      • 意义：
        • 数据是可以拿到更新后的数据
        • 也可以拿到更新后的真实DOM
        • 兵哥解析：
          • 为在一次的更新准准备工作
          • 生成Virtual DOM
      • 项目中
        • 不常用

    • updated

      组件更新结束

      • 类比： 两人看对眼了 / 两人看不对眼
        • 看对眼： 相亲这件事就有一个结果
        • 看不对眼： 相亲这件事继续
      • 意义：
        • 可以拿到修改后的数据
        • 也可以拿到真实DOM
      • 在项目中：
        • 真实DOM操作 【 不推荐 】
        • 第三方库动态实例化 【 动态数据 】
      • 内部
        • VDOM重新渲染，然后通过render函数解析为VDOM对象模型，在通过Diff进行比对生成patch补丁对象，然后重新渲染为真实DOM
          • 只改变变化的部分，其他部分不改变

  • 销毁

    触发条件：组件被删除

    • 外部开关销毁
    • 内部调用$destroy()

    这两个钩子函数没有太大区别，所以我们统一说

    • beforeDestroy
    • destroyed
    • 外部销毁
      • 通过开关完成
        • DOM被删除了，组件也被删除了
    • 内部销毁
      • 通过调用$destroy()来完成
        • DOM没有被删除，但是组件被删除了
        • Dom需要手动删除
    • 项目中如何使用：
      • 善后
        • 比如： 计时器，比如滚动事件等

  5.4 生命周期案例

  • Swiper
    • 静态数据
    • 动态数据
      • updated中写式，会有重复实例化问题
        • 第一个解决方案： 加判断条件
        • 第二个解决方案： setTimout
          • 放在主线程后执行，异步队列中，保证真实DOM渲染完成
        • 第三种解决方案： 推荐 Vue内部提供的 nextTick
          • nextTick表示真实DOM渲染完成之后才执行
            • Vue.nextTick( callback )
            • this.$nextTick( callback )