jjzjj

vue学习笔记

无明梦终醒 2023-03-28 原文
  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 实例被销毁后调用
  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)

  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;
                }
            }
        }
    });
    

有关vue学习笔记的更多相关文章

  1. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  2. CAN协议的学习与理解 - 2

    最近在学习CAN,记录一下,也供大家参考交流。推荐几个我觉得很好的CAN学习,本文也是在看了他们的好文之后做的笔记首先是瑞萨的CAN入门,真的通透;秀!靠这篇我竟然2天理解了CAN协议!实战STM32F4CAN!原文链接:https://blog.csdn.net/XiaoXiaoPengBo/article/details/116206252CAN详解(小白教程)原文链接:https://blog.csdn.net/xwwwj/article/details/105372234一篇易懂的CAN通讯协议指南1一篇易懂的CAN通讯协议指南1-知乎(zhihu.com)视频推荐CAN总线个人知识总

  3. 深度学习部署:Windows安装pycocotools报错解决方法 - 2

    深度学习部署:Windows安装pycocotools报错解决方法1.pycocotools库的简介2.pycocotools安装的坑3.解决办法更多Ai资讯:公主号AiCharm本系列是作者在跑一些深度学习实例时,遇到的各种各样的问题及解决办法,希望能够帮助到大家。ERROR:Commanderroredoutwithexitstatus1:'D:\Anaconda3\python.exe'-u-c'importsys,setuptools,tokenize;sys.argv[0]='"'"'C:\\Users\\46653\\AppData\\Local\\Temp\\pip-instal

  4. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  5. ruby - 我正在学习编程并选择了 Ruby。我应该升级到 Ruby 1.9 吗? - 2

    我完全不是程序员,正在学习使用Ruby和Rails框架进行编程。我目前正在使用Ruby1.8.7和Rails3.0.3,但我想知道我是否应该升级到Ruby1.9,因为我真的没有任何升级的“遗留”成本。缺点是什么?我是否会遇到与普通gem的兼容性问题,或者甚至其他我不太了解甚至无法预料的问题? 最佳答案 你应该升级。不要坚持从1.8.7开始。如果您发现不支持1.9.2的gem,请避免使用它们(因为它们很可能不被维护)。如果您对gem是否兼容1.9.2有任何疑问,您可以在以下位置查看:http://www.railsplugins.or

  6. ruby - 我如何学习 ruby​​ 的正则表达式? - 2

    如何学习ruby​​的正则表达式?(对于假人) 最佳答案 http://www.rubular.com/在Ruby中使用正则表达式时是一个很棒的工具,因为它可以立即将结果可视化。 关于ruby-我如何学习ruby​​的正则表达式?,我们在StackOverflow上找到一个类似的问题: https://stackoverflow.com/questions/1881231/

  7. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG(VisualGeometryGroup)是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军,定位竞赛冠军;VGG网络采用连续的小卷积核(3x3)和池化层构建深度神经网络,网络深度可以达到16层或19层,其中VGG16和VGG

  8. 机器学习——时间序列ARIMA模型(四):自相关函数ACF和偏自相关函数PACF用于判断ARIMA模型中p、q参数取值 - 2

    文章目录1、自相关函数ACF2、偏自相关函数PACF3、ARIMA(p,d,q)的阶数判断4、代码实现1、引入所需依赖2、数据读取与处理3、一阶差分与绘图4、ACF5、PACF1、自相关函数ACF自相关函数反映了同一序列在不同时序的取值之间的相关性。公式:ACF(k)=ρk=Cov(yt,yt−k)Var(yt)ACF(k)=\rho_{k}=\frac{Cov(y_{t},y_{t-k})}{Var(y_{t})}ACF(k)=ρk​=Var(yt​)Cov(yt​,yt−k​)​其中分子用于求协方差矩阵,分母用于计算样本方差。求出的ACF值为[-1,1]。但对于一个平稳的AR模型,求出其滞

  9. Unity Shader 学习笔记(5)Shader变体、Shader属性定义技巧、自定义材质面板 - 2

    写在之前Shader变体、Shader属性定义技巧、自定义材质面板,这三个知识点任何一个单拿出来都是一套知识体系,不能一概而论,本文章目的在于将学习和实际工作中遇见的问题进行总结,类似于网络笔记之用,方便后续回顾查看,如有以偏概全、不祥不尽之处,还望海涵。1、Shader变体先看一段代码......Properties{ [KeywordEnum(on,off)]USL_USE_COL("IsUseColorMixTex?",int)=0 [Toggle(IS_RED_ON)]_IsRed("IsRed?",int)=0}......//中间省略,后续会有完整代码 #pragmamulti_c

  10. (附源码)vue3.0+.NET6实现聊天室(实时聊天SignalR) - 2

    参考文章搭建文章gitte源码在线体验可以注册两个号来测试演示图:一.整体介绍  介绍SignalR一种通讯模型Hub(中心模型,或者叫集线器模型),调用这个模型写好的方法,去发送消息。  内容有:    ①:Hub模型的方法介绍    ②:服务器端代码介绍    ③:前端vue3安装并调用后端方法    ④:聊天室样例整体流程:1、进入网站->调用连接SignalR的方法2、与好友发送消息->调用SignalR的自定义方法 前端通过,signalR内置方法.invoke()  去请求接口3、监听接受方法(渲染消息)通过new signalR.HubConnectionBuilder().on

随机推荐