vue学习笔记

  • vue学习笔记已关闭评论
  • 13 次浏览
  • A+
所属分类:Web前端
摘要

vue指令vue的生命周期挂钩双大括号{{}}表示这是一个变量v-if和v-for的优先级:当他们存在同一个节点时,v-for的优先级更高,这意味着在每次v-for中进行v-if,可以进行只渲染部分数据的活动

  1. vue指令

    指令名 指令含义 修饰符
    v-model 提供了input和form数据之间或两个组件之间的双向数据绑定 .lazy:减少同步的次数
    .number:格式化字符串为数字
    .trim去除首尾空格
    v-bind 单向绑定。可以缩写为:符号
    v-html 将数据解释为原始html
    v-if 条件渲染指令,根据if后的值动态显示
    v-else 紧接v-if、v-show使用
    v-show 同样是有条件的显示。与v-if不同的是,一个v-show的元素将一直保留在dom中,v-show的实质是切换css的display属性。不能在<template>使用
    v-on 监听dom事件,例如v-on:click、v-on:submit。可以缩写为@符号
    v-for 用数组将元素映射到元素,类似于java的加强for。在v-for内部,可以完全访问父范围属性。v-for第二个参数可以获得当前索引。v-for也可以迭代对象中的数据。在后面加上:key可以重新排序现有元素。v-for也可以取整数,代表多次重复该模板(从1开始)
    v-link 输出html纯文本
    v-once 定义它的元素或组件只渲染一次,包括子节点。视为静态内容。实际业务中应用很好,优化性能时可能会用到
    • v-model默认在input事件中同步输入的数据,使用.lazy修饰符会转变为在change事件(失焦或按回车)中同步
  2. vue的生命周期挂钩

    名称 含义
    created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
    mounted 在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
    updated 由于data改变导致页面重新渲染,会调用此钩子
    destroyed 实例被销毁后调用

    vue学习笔记

  3. 双大括号{{}}表示这是一个变量

    <div id="app">   {{ message }} </div>  new Vue({     el:'#app',     data: {         message:'Hello World!'     } }); 
  4. v-if和v-for的优先级:当他们存在同一个节点时,v-for的优先级更高,这意味着在每次v-for中进行v-if,可以进行只渲染部分数据的活动

  5. props:每个组件都有其独立的范围,相互之间数据是分隔的。props用于从父组件传递信息到子组件,子组件需要使用props选项显式的声明期望收到的数据。

    Vue.component('child', {   // declare the props   props: ['message'],   // like data, the prop can be used inside templates and   // is also made available in the vm as this.message   template: '<span>{{ message }}</span>' }) 
  6. 节点,树和虚拟DOM

    当浏览器读取html代码时,它会构建一个dom节点树,以跟踪左右内容。每个元素都是一个节点(element)

    vue学习笔记

  7. select选择器

    el-select的属性含义:

    • v-model :值为被选中的el-option的value属性值。如设置了多选则为选中值组成的数组
    • disabled :设置了则整个选择器不可用
    • multiple :设置为多选
    • filterable :启用搜索功能

    el-option的属性含义:

    • :label :选项外显的名字。不设置的话默认和value相同
    • :value :选择选项时选中的值
    • :key :选项的索引
    • :disables :默认为false,设定为true,可禁用该选项
  8. 数组更新检测

    • 变异方法:会改变被这些方法调用的原始数组,会触发视图更新
      • push()
      • pop()
      • shift()
      • unshift()
      • splice()
      • sort()
      • reverse()
    • 非变异方法:不会改变原始数组,总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
      • filter()
      • concat()
      • slice()

    由于js的限制,vue不能检测以下变动的数组:(可以使用其他方法替代)

    • 利用索引直接设置一个项时
    • 直接修改数组的长度
  9. vue在渲染元素时,会尽可能的复用已有的元素而非重新渲染。定义了key属性可以不这么做。

  10. 使用props传递数据

    组件之间需要进行通信,通常父组件模板包含子组件,父组件正向的向子组件传递数据和参数,子组件再进行不同操作,这个数据传递的过程就是通过props来实现的

  • props可以是字符串数组,也可以是对象
  • 有时候传递的数据并不是写死的,而是来自父级的动态数据,这时可以使用v-vind来动态绑定props的值。当父组件的数据发生变化时,也会传递给子组件
  • 当传递的是数字、布尔值、数组、对象时,如果不使用v-bind,数据都会变成字符串格式
  • 在js中对象和数组是引用类型,指向同一个内存空间,所以props是数组和对象时,在子组件改变是会影响父组件的
  1. 数据验证

    当组件需要传递数据时,推荐进行数据验证。当传输的数据类型和要求不一致时,会在控制台弹出警告。

    Vue.compoent('my-component', {     props: {         // 必须是数字类型         propA: Number,         // 必须是数字类型或者字符串类型         propB: [String, Number],         // 布尔值,如果没定义默认值,默认为true         propC: {             type: Boolean,             default: true         },         // 数字,且必传         propD: {             type: Number,             required: true         },         // 必须是数组或对象,默认值必须是一个函数来返回         propE: {             type: Array,             default: function () {                 return [];             }         },         // 自定义验证器         propF: {             validator: function (value) {                 return value > 10;             }         }     } });