VUE笔记01

Escape同学
141 阅读4分钟

组件

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

每个 Vue 应用都是通过用 Vue 函数（类）创建一个新的 Vue 实例开始的。一般的 UI 组件是需要有 html、css 去展示对应的界面（视图）的。所以，我们需要给这种组件设置模板。

data：因为 vue 根节点,在整个vue单页面实例中,它有且只有一个,所以 data 可以设置成一个 Object{}；但是子组件可能会多次实例化和调用,所以为了确保子组件的数据的独立性和隔离性,需要使用 data(){return{}}的方法.每次返回一个新的对象。

可复用组件的 data 必须是函数，且该函数必须返回一个对象作为组件最终的 data。

Props：通过props属性来声明一个自己的属性，然后父组件就可以往里面传递数据。props是子组件访问父组件数据的唯一接口，props是单向绑定的；

  • 如果传入的 props 值为一个表达式，则必须使用 v-bind

  • 组件中的 data 和 props 数据都可以通过组件实例进行直接访问

  • data 中的 key 与 props 中的 key 不能冲突

    父组件到子组件内部的数据传递：

    父组件通过上述提到的 props 向一个子组件内部传递数据。

    子组件内部到外部的数据传递

    vue 为每个组件对象提供了一个内置方法 $emit ，它等同于自定义事件中的 new Event,trigger 等

    this.$emit('自定义事件名称', 事件数据)

    • 事件数据就是中触发事件的同时携带传递的数据 - event

    • 父级在使用该组件的过程中，可以通过 @事件名称 来注册绑定事件函数

    • 事件函数的第一个参数就是事件数据

    ref 与 $refs

    ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。

    $refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定

指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute，Vue 会对它进行解析，影响当前DOM。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

在 vue 中，指令是一个带有 v- 前缀的属性，与普通属性不一样的地方在于，指令的值是引号括起来的 表达式，不同的指令有不同的作用，vue 内置了一些常用的指令，后期我们还可以自定义属于自己的指令。

  • 指令值中不能使用 {{}}

内置指令的一些分类：

  • 内容输出

    • v-text：数据绑定标签，将vue对象data中的属性绑定给对应的标签作为内容显示出来，类似js的text属性；

    • v-html：类似v-text标签，他是将data的属性作为html语法输出，类似js中的innerHtml属性；

  • 循环

    v-for：可以用来遍历数组/对象，它可以根据data中数据的更新动态刷新视图；

    可以循环的数据：Array | Object | number | string | Iterable (2.6 新增)；

    v-for 中也可以使用 of 语法，在 vue 中两者没有什么区别；

  • 逻辑

    • v-if：v-if和v-show功能差不多，都是用来控制dom的显隐，用法也一样，只是原理不同，根据表达式的值（布尔值），创建或销毁元素，当v-if="false"时，dom被直接删除掉；为true时，又重新渲染此dom；适用于状态切换不频繁的情况；

    • v-else：用来表示v-if=""的else情况；

  • 属性绑定

    v-bind：用于将vue的值绑定给对应dom的属性值；

    <div v-bind:参数="值/表达式"></div>，这里的参数就是指定的属性名称；

    v-bind 对应的缩写为：:

  • 事件

    v-on：给dom添加一个事件监听；v-on 缩写 @ ；

    <组件 v-on:事件名称="表达式" />
<组件 @事件名称="表达式" />

  • 其它

    v-show：根据表达式的真假来切换所绑定的dom的display属性；v-show用于控制dom的显隐，实际是控制了dom的css的display属性；适用于状态切换比较频繁的情况；

    v-modle：建立双向数据绑定；

    ⚠️：不是所有元素组件都支持 v-model 的，默认情况下，input、select 等可交互的表单元素支持。

    v-model修饰符：

    • v-model.lazy: 一般v-model绑定的数据都是实时同步的，加上这个修饰符可以等到change事件再同步另一个的值；
    • v-model.number: 自动将输入的值转为数值类型；
    • v-model.trim: 输入首尾空格过滤，自动trim；

    v-slot：取代了 slot 和 solt-scope 指令；v-slot在使用时，需要在template标签内；

    事件修饰符：

    .stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡

    .prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为

    .capture：与事件冒泡的方向相反，事件捕获由外到内

    .self：只会触发自己范围内的事件，不包含子元素

    .once：只会触发一次

    .passive：是不拦截默认事件

    :key 属性

    默认情况下，在渲染 DOM 过程中使用 原地复用 ，这样一般情况下会比较高效，但是对于循环列表，特别是依赖某种状态的列表，会有一些问题，我们可以通过 :key 属性，来给每个循环节点添加一个标识。

自定义指令

使用 Vue.directive 创建一个全局指令并为其命名，如：

Vue.directive('指令名称', {指令配置});

局部指令注册：

new Vue({
  el: '#app',
  directives: {
    '指令名称': {指令配置}
  }
});

在使用指令的时候，需要使用 v-指令名称 的方式来调用，注册的时候不需要。

过滤器

过滤器是一个使用在 双大括号插值 和 v-bind 中，用于过滤输出内容的函数

假设有一个用于把内容转为大写的过滤器函数 toUpperCase

{{content|toUpperCase}}

  • | : 管道符，表示数据从左至右通过管道符进行传递

  • 过滤器可以有多个，执行顺序从左至右，过滤器函数第一个参数的值就是其管道符前一个的结果

  • 注册过滤器

    全局过滤器

    Vue.filter('过滤器名称', 过滤器函数);

    局部过滤器

    Vue.component('组件', {
  ...,
  filters: {
  	'过滤器名称': 过滤器函数	
	}
})

生命周期

  1. 组件生命周期指的是组件从创建到销毁的过程，在这个过程中的一些不同的阶段，vue 会调用指定的一些组件方法。

    基本生命周期函数有下面几个阶段：

    • 创建阶段

      beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。初始化阶段，应用不多。

      created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el property 目前尚不可用。

      **created：**进行ajax请求异步数据的获取、初始化数据

    • 挂载阶段

      beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。

      mounted：该阶段执行完了模板解析，以及挂载。同时组件根组件元素被赋给了 $el 属性，该阶段可以通过 DOM 操作来对组件内部元素进行处理了。

      **mounted：**挂载元素dom节点的获取

    • 更新阶段

      beforeUpdate：数据更新时调用，但是还没有对视图进行重新渲染，这个时候，可以获取视图更新之前的状态。

      updated：由于数据的变更导致的视图重新渲染，可以通过 DOM 操作来获取视图的最新状态。

      **updated：**任何数据的更新

    • 卸载阶段

      beforeDestroy：实例销毁之前调用，移除一些不必要的冗余数据，比如定时器。

      destroyed：Vue 实例销毁后调用。

    • 其它

      .$nextTick()

      将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

      与 updated 有些类似，this.$nextTick() 可以用作局部的数据更新后DOM更新结束后的操作，全局的可以用 updated 生命周期函数。

      **$nextTick：**针对单一事件更新数据后立即操作dom

      errorCaptured()

      当捕获一个来自子孙组件的错误时被调用，此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

    Computed

    computed 选项是一个对象，每一个 key 对应一个属性，且该属性是通过 getter/setter 的方式来进行定义的，对绑定到view的数据进行处理。

    • computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

    • computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择；

    • 计算属性的值依赖计算函数中依赖的其它响应式数据，如果依赖的其它响应式数据没有发生变化，计算属性的值可以缓存，得到结果是最近一次变化产生的值。

      watch

      watch是一个观察的动作。

      • watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，但是我们不能类似这样监控;

      • watch一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据

      • 多层监听

        对于多层数据的监听，可以使用字符串+点语法。

        watch: {
  'a.b.c': function() {
    //...
  }
}

      • 深度监听

        默认情况下，watch 只对当前指定的值进行一层监听，如果需要对对象进行深度监听，可以使用下面的形式：

        watch: {
  a: {
    handler() {
      console.log('a deep');
    },
    deep: true
  }
}

      • 使用场景

        • 一对多的数据更新

        • 异步任务

        • 与数据更新无关的其它任务

avatar
文章
阅读
粉丝