Vue基础3

朴灿烈づ我的快乐病毒、 2021-08-19 17:17 333阅读 0赞

3.1 axios && fetch  
目的： 是在框架中使用数据请求  
回顾：  
封装ajax  
jquery 【  . g e t .get .get .post  . a j a x .ajax .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. h t t p . g e t t h i s . http.get 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.  作用
        
         *  是对已经有的数据做数据格式化
 *  1.  使用格式
        
         *  已有数据 | 过滤器名称(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?
         *  1.  VDOM为什么可以优化Vue ？
         *  1.  VDOM渲染流程
         *  1.  JSX语法
         *  1.  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 )