vue高级

最新推荐文章于 2024-07-01 09:51:03 发布

yukicm

最新推荐文章于 2024-07-01 09:51:03 发布

阅读量196

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/yukicm/article/details/93916748

版权

slot 作用域插槽

旧： slot-scope

使用流程

在组件的模板中书写slot插槽，并将当前组件的数据通过 v-bind 绑定在 slot标签上
在组件使用时，通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据
通过 slotProp.xxx 就可以进行使用了

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    <body>
      <div id="app">
        <Hello>
          <template slot = "default" slot-scope = "slotProp">
            <p> {{ slotProp.msg }} </p>
          </template>
        </Hello>
      </div>
      <template id="hello">
        <div>
          <slot name = "default" :msg = "msg"></slot>
        </div>
      </template>
    </body>
    <script src="../../lib/vue.js"></script>
    <script>
      Vue.component('Hello',{
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      })
      new Vue({
        el: '#app'
      })
    </script>
    </html>

新： v-slot

  <div id="app">
    <Hello>
      <template v-slot:default = "slotProp">
        {{ slotProp.msg }}
      </template>
    </Hello>
  </div>
  <template id="hello">
    <div>
      <slot name = "default" :msg = "msg"></slot>
    </div>
  </template>

  new Vue({
    components: {
      'Hello': {
        template: '#hello',
        data () {
          return {
            msg: 'hello'
          }
        }
      }
    }
  }).$mount('#app')

属性验证

案例：价格的增加，拿到的数据必须做验证 309 + 10 319 30910

props: [ ‘msg’ ] 没有进行验证，知识单纯的接收了一个父组件传递来的数据
props: { attr: attrType } 进行普通属性验证
props: { type: typeType, default: value } 这里的default是为这个属性设置初始值
props: { validator ( val ) { return boolean }} 可以进行一个条件的比较

注意：除了以上形式的属性验证以外，还有第三方封装的类库 vue-validate vee-validate …

<body>
  <div id="app">
    <Father></Father>
  </div>

  <template id="father">
    <div>
      <h3> 这里是父组件 </h3>
      <Son :money = "money" :n = "n"></Son>
    </div>
  </template>
  <template id="son">
    <div>
      <h3> 这里是子组件 </h3>
      <p> 父亲给了我  {{ money + 100}}  钱  </p>
      <p> num: {{ num }} </p>
    </div>
  </template>

</body>

<script>
  /* 
    父子组件通信会使用到 props 
  */

  Vue.component('Father',{
    template: '#father',
    data () {
      return {
        money: 1000,
        n: 400
      }
    }
  })

  Vue.component('Son',{
    template: '#son',
    props: {
      // key: value   key就是我们接收的属性    value就是我们想要的这个属性的数据类型
      'money': Number, // String   Boolean       Object...
      'n': {
        validator ( val ) { //属性验证函数，一般常用于条件的比较
          // val 就是我们得到的数据
          return  val > 300 //返回值是一个布尔值
        }
      },
      'num': {
        type: Number,
        default:200
      }
    }
  })

  new Vue({
    el: '#app'
  })
</script>

过渡效果 && 动画

使用形式
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css 【要求】
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js

      beforeEnter: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      enter: function (el, done) {
        // ...
        done()
      },
      afterEnter: function (el) {
        // ...
      },
      enterCancelled: function (el) {
        // ...
      },
       // --------
      // 离开时
      // --------

      beforeLeave: function (el) {
        // ...
      },
      // 当与 CSS 结合使用时
      // 回调函数 done 是可选的
      leave: function (el, done) {
        // ...
        done()
      },
      afterLeave: function (el) {
        // ...
      },
      // leaveCancelled 只用于 v-show 中
      leaveCancelled: function (el) {
        // ...
      }

过渡模式 mode
1. in-out 先进入在离开
2. out-in 先离开在进入

生命周期

什么是生命周期？

vue中的生命周期指的是组件从创建到销毁一个过程，在这个过程中，我们在每一个特定的阶段会触发一些方法（这些方法具备一些功能），我们给这些方法起了个名字叫做（生命周期钩子函数/ 组件钩子）

为什么要了解生命周期？

因为我们想在生命周期钩子中实现项目功能，那么我们必须知道每一个钩子函数的具体用途

这个生命周期是谁的生命周期？

组件

项目中生命周期如何书写（功能）

Vue的生命周期分为三个阶段，分别为：初始化，运行中，销毁，一共8个钩子函数
注意：生命周期钩子函数不允许写成箭头函数

Vue的销毁有两种形式
1. 通过开关的形式
2. 通过调用 $destroy 方法

以下示例HTML部分代码

<body>
  <div id="app">
    <Hello></Hello>
  </div>
  <template id="hello">
    <div>
      <p> {{ msg }} </p>
    </div>
  </template>
</body>

初始化：

beforeCreate ------------ 相亲准备前（爸妈准备，你根本是局外人,一般不使用)

组件创建前触发，目的是为了组件的生命周期和组件中的事件做准备
数据没有获得，真实dom也没有渲染出来
可以进行数据请求，提供了一次数据修改的机会
执行一次

示例

 Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
    beforeCreate () {
      console.log('1-beforeCreate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    },
 })
 new Vue({
    el: '#app'
  })

输出结果

1-beforeCreate
11-lifecircle.html:119 data undefined
11-lifecircle.html:120 真实dom null

created ------------ 爸妈告诉你了，这边有几个备选，选一个吧

组件创建结束
数据得到了，真实dom没有渲染出来
可以进行数据请求，提供了一次数据修改的机会

执行了一次

示例

 Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
    created () {
      console.log('2-created')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    },
 })
 new Vue({
    el: '#app'
  })

输出结果

2-created
11-lifecircle.html:131 data hello 相亲了
11-lifecircle.html:132 真实dom null

beforeMount ----------- 互相加一个微信，先聊天

组件挂载前
任务：判断el 判断 template

如果el没有，那么我们需要手动挂载，如果有，那么判断template
如果template有，那么进行render函数
如果template没有，那么通过 outerHTML 手动书写模板
数据可以获得，但是真实dom还没有渲染
以进行数据请求，也提供了一次数据修改的机会

执行一次

示例

 Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
  beforeMount () {
      console.log('3-beforeMount')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    },
 })
 new Vue({
    el: '#app'
  })

输出结果

3-beforeMount
11-lifecircle.html:140 data hello 相亲了
11-lifecircle.html:141 真实dom null

mounted ------------ 见面

组件挂载结束
数据获得了，真实dom也获得了
可以进行数据请求，也就可以修改数据
执行了一次

可以进行真实dom的操作了（可以进行第三方库的实例化了）\

示例

 Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
  mounted () {
      console.log('4-mounted')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
      fetch('./data.json')
      .then( res => res.json())
      .then( data => this.msg = data )
      .catch( error => console.log( error ))
    },
 })
 new Vue({
    el: '#app'
  })

输出结果

4-mounted
11-lifecircle.html:151 data hello 相亲了
11-lifecircle.html:152 真实dom <p> {
  "ret": true,
  "name": "Gabriel Yan"
} </p>

总结

数据请求一般写在created里面
第三方库实例化我们一般会往mounted中写

运行中: 触发条件：数据更新

beforeUpdate

更新前
重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
这个钩子函数更多的是内部进行一些操作，我们就不在多干预了

可以触发多次

示例

Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
 beforeUpdate () {
      console.log('beforeUpdate')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    },
 })
 new Vue({
    el: '#app'
  })

输出结果

5-beforeUpdate
11-lifecircle.html:161 data {__ob__: Observer}
11-lifecircle.html:162 真实dom <p> {
  "ret": true,
  "name": "Gabriel Yan"
} </p>

updated

更新结束
真实dom得到了，数据也得到了（更新后的）

动态数据获取（第三方库实例化）

示例

Vue.component('Hello',{
    template: '#hello',
    data () {
      return {
        msg: 'hello 相亲了'
      }
    },
updated () {
      console.log('6-updated')
      console.log('data',this.msg)
      console.log('真实dom',document.querySelector('p'))
    }
 })
 new Vue({
    el: '#app'
  })

输出结果

6-updated
11-lifecircle.html:166 data {__ob__: Observer}
11-lifecircle.html:167 真实dom <p> {
  "ret": true,
  "name": "Gabriel Yan"
} </p>

vue生命周期的销毁阶段

触发条件：当组件销毁时：
beforeDestroy

destroyed

 统一讲两个钩子
这两个钩子功能一致的，没有太大的区别

作用：
用来做善后的,比如计时器的关闭第三方实例的删除

配置项写在生命周期钩子函数的上

对比：内部销毁 vs 外部销毁

外部销毁不仅能销毁组件，也能销毁该组件的dom结构
内部销毁只能销毁组件，不能销毁组件的dom结构

<body>
  <div id="app">
    <button @click = "flag = !flag"> 切换 </button>
    <Hello v-if = "flag"></Hello>
  </div>
  <template id="hello">
    <div>
      hello
    </div>
  </template>
</body>

<script>

  Vue.component('Hello',{
    template: '#hello',
    mounted () {
      this.time = setInterval ( () => {
        console.log( '1903' )
      },1000)
    },
    beforeDestroy () {
      console.log('beforeDestroy')
      clearInterval( this.time )
    },
    destroyed () {
      console.log('destroyed')
    }
  })
  new Vue({
    el: '#app',
    data: {
      flag: true
    }
  })
</script>

过滤器

什么是过滤器？用来格式化数据的一个函数 $ 10 ‘$’ + price 日期的格式化

vue 1.x 版本借鉴了 angular , 提供 10 个过滤器，包括有：日期小数点位数保留货币大小写等

Vue 2.x 废弃了这 10个过滤器，但是它提供了自定义过滤器的方式

使用方式

全局定义过滤器\

 <p> {{ time | timeFilter('/)}} </p>

   Vue.filter('timeFilter',function ( val,type ) {
     console.log( val )
     //val 就是我们获得的数据
     // return newVal   return 的结果就是格式化之后的新数据  return的结果就是页面呈现的结果

     var date = new Date ( val )

     // 2019-6-26

     return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
   })

局部定义过滤器

    new Vue({
      el: '#app',
      data: {
        time: Date.now()
      },
      filters: { //过滤器的配置项
        'timeFilter': function ( val,type ){
          var date = new Date ( val )
          return date.getFullYear() + type + ( date.getMonth() + 1 ) + type + date.getDate()
        }
      }
    })

过滤器要想获得我们的数据，要通过一个叫做 ‘管道符 | ’ 来获取数据
过滤器是对已经有的数据进行格式化，也就是必须先有数据，在去格式化

swiper

作用：用来实现移动端，pc端滑动操作

swiper是一个第三方的库

vue中swiper实现

静态数据的第三方库实例化，我们写在mounted中
2. 动态数据的第三方库实例化，我们写在updated中
3. 优化：
3. 做判断条件
4. 异步队列
1. setTimout
2. nextTick

有的开发者，也会使用 vue-swiper 这个第三方的库来实现轮播

自定义指令

v-html

v-text

v-for

v-if

v-else-if

v-else

v-show

v-on

v-bind

v-model

以上指令可以不够用户使用，所以vue给开发者提供了自定义指令的方式

举例：比如说我想要有一个指令，来实现一个自动获得input焦点，或是一个轮播。。。

有两种自定义指令的使用形式：

全局定义 ---- vue.directive()
局部定义

directives: {}
指令的钩子函数
- bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
- update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind：只调用一次，指令与元素解绑时调用（指令绑定的元素被删除）。
自定义指令钩子的参数
- el：指令所绑定的元素，可以用来直接操作 DOM 。
- binding
  
  ：一个对象，包含以下属性：
  - name：指令名，不包括 v- 前缀。
  - value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
  - oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  - expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
  - arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
  - modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
- vnode：Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。
- oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

作业：结合上午的swiper使用 + 下午的自定义指令，自定义一个叫做 v-banner 的指令来实现轮播

cli

什么是cli?

cli是vue提供的一个用来快速构建项目环境的一个工具，底层使用的是webpack
cli目前有哪些版本？

cli2 cli3

cli3对电脑的配置有一定要求
cli如何使用？
1. cli的安装
  npm/cnpm/yarn 都可以使用
  1. $ yarn add @vue/cli global 这个是cli3的版本
    如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
  2. $ yarn add @vue/cli-init global
  如果有的同学安装3失败了，
  那么你可以使用cnpm继续安装 @vue/cli @vue/cli-init
  1. $ cnpm i @vue/cli -g 这个是cli3的版本
  如果我们还想使用cli2的脚手架，那么我们可以在安装一个包
  1. $ cnpm i @vue/cli-init -g
  
  如果还有问题：
  那么你就不要使用cli3了，你可以单独安装cli2
```
 `$ cnpm i vue-cli -g`
```
2. 验证是否安装成功
  命令行输入： $ vue 看是否有东西输出，如果输出命令提示，证明安装成功
3. 创建项目
  
  cli3版本创建
  1. 命令创建【推荐】
    $ vue create project
    - 手动选择配置
    - 如果安装node-sass出问题，如何解决：
      - 先切换成npm源 nrm use npm
      - 使用cnpm 安装 cnpm i node-sass sass-loader -D
  2. 图形界面创建
    $ vue ui
    cli2
  3. 标准版
    $ vue init webpack project
  4. 简易版
    $ vue init webpack-simple project
4. please pick a preset( user arrow keys ) 使用键盘上下键来选择一个配置
  1. default 默认配置
  2. Manually select features 手动选择配置
    
    配置指的是配置webpack
    
    babel 优雅降级 es6 —> es5
    
    eslint js语法检测
    
    CSS Pre-processors css 预处理语言 less sass/scss stylus
    
    Linter / Formatter eslint / jslint
    
    Unit Testing 单元测试
    
    E2E Testing 端到端的测试
    
    In dedicated config files 将所选的每一个选项用一个文件来保存（配置）
  PWA (web app ) 在浏览器中使用的app
Save this as a preset for future projects? 将上面所选的配置保存下来，以备将来的项目使用

我们cli3 使用的包管理器器建议是 yarn 大家一定要记得配置国内镜像源

4.分析几个版本的目录

cli3

node_modules 项目的依赖包
- cli3webpack配置放在node_modules中
public 静态资源目录（生产环境）【这个目录下的静态资源不会被webpack 编译】
- img
- js
- css
- favicon.ico 项目标题的logo
- index.html 根实例组件的模板，也是整个项目的容器
src 源代码开发目录（也是开发者主要开发的目录文件夹）
- assets 开发环境的静态资源目录（这个目录中的资源会被webpack编译）
  - assets中如果图片的大小 > 4k 我们就原样拷贝到dist目录
  - assets中如果图片的小小 < 4K 我们就将这个图片转化成 base64
  - base64它是我们前端处理图片的一种形式，将图片路径进行编码，它可以减少一次ajax请求，达到前端性能优化的一个方案，但是base64有一个弊端，这个弊端就是会污染html结构
- components 组件存储目录
  - xxx.vue文件单文件组件一个vue文件就是一个组件
    - 组成部分
      - template模板（必须写的）
      - script脚本（可写可不写）
      - style样式（可写可不写）
        scoped 作用是可以减少命名冲突，规定一个样式的作用域
.gitignore git上传忽略文件配置
babel.config.js 优雅降级配置文件用来将es6 --> es5
package.json 整个项目的依赖配置文件
README.md 整个项目启动的说明性文件
yarn.lock 真个项目的依赖性文件的信息
postcss.config.js 项目css预处理的配置
.browserslistrc 浏览器版本的支持

cli2 标准版

build webpack配置

config webpack配置

node_modules

src

static 静态资源配置

css

img

.babelrc 优雅降级配置文件

.postcssrc css预处理配置文件

.editorconfig 编辑器配置文件

cli2 简易版

src 源代码开发目录

webpack.config.js webpack配置文件

5.cli 它是 webpack + es6模块化来集中实现的

es6模块化

模块的定义
```
const obj = {}
const fn = function(){}
```

模块的导出

// 模块的导出有两种形式
export default //默认导出一个

//export // 批量导出，导出多个

模块的引入

// 如果是export  default 导出
import xxx from '../xxx.xx'

// 如果是export 导出

improt  { xx } from '../xx.xx'  || import * as xx from '../xx.xx'

vue高级

slot 作用域插槽

属性验证

过渡效果 && 动画

生命周期

什么是生命周期？

为什么要了解生命周期？

这个生命周期是谁的生命周期？

项目中生命周期如何书写（ 功能 ）

初始化：

beforeCreate ------------ 相亲准备前（ 爸妈准备， 你根本是局外人,一般不使用)

created ------------ 爸妈告诉你了，这边有几个备选， 选一个吧

beforeMount ----------- 互相加一个微信，先聊天

mounted ------------ 见面

总结

运行中: 触发条件：数据更新

beforeUpdate

updated

vue生命周期的销毁阶段

过滤器

swiper

自定义指令

cli

项目中生命周期如何书写（功能）

beforeCreate ------------ 相亲准备前（爸妈准备，你根本是局外人,一般不使用)

created ------------ 爸妈告诉你了，这边有几个备选，选一个吧