一、vue2的基础语法巩固

news2024/11/20 1:27:51

一、定义:是一个渐进式的JavaScript框架

二、特点:

  • 减少了大量的DOM操作编写 ,可以更专注于逻辑操作
  • 分离数据和界面的呈现,降低了代码耦合度(前端端分离)
  • 支持组件化开发,更利于中大型项目的代码组织

vue2核心功能:

响应式数据与差值表达式:

先实例化vue,在内部设置el(选择器,这个vm实例对谁生效),data 声明响应式数据,return()方法来写,插值表达式使用{{}},method封装方法(与data同级)

计算属性 computed

当对象定义,当属性使用。具有缓存性

使用场景:结果不变,但需要多次运算的时候

缓存性:运算一次之后将结果存储在本地,下次远行的时候直接从本地获取数据

注意:使用的时候不能加括号,可以视为一个属性来使用

侦听器 watch(adeventlisenter)

参与响应式的过程,响应式数据发生改变时触发

使用场景:当修改页面数据的时候再改点别的

指令

v-html、v-text innerHTML/innerText

v-on、v-bind、v-if(销毁/创建)、v-show(隐藏/显示)、v-model、v-for

遍历数组时,key就是index--索引;

遍历对象时,key就是属性名,index是索引,item是属性值

v-if切换开销更高、v-show初始化开销更高

v-bind 简写 : v-bind指令主要用于响应式的更新html属性

  • 属性指令 用来做一些属性绑定 可配合响应式数据

v-on 简写 :

  • 事件指令 可代替操作DOM绑定事件 可配合methods里自定义的方法使用

v-model专门适应于表单的数据绑定

  • 修饰符 实现与指令之间的相关操作 可简化代码和DOM操作 添加在指令后面

比如:.trim 去除空格 v-model.trim

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1035488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

NIO简单介绍

一、什么是NIO 1、Java NIO全称java non-blocking IO, 是指JDK提供的新API。从JDK1.4开始,Java提供了一系列改进的输入/输出的新特性,被统称为NIO(即New IO),是同步非阻塞的 2、NIO有三大核心部分: Channel(通道), Buf…

2023-9-23 区间覆盖

题目链接&#xff1a;区间覆盖 #include <iostream> #include <algorithm>using namespace std;const int N 100010;int n; struct Range {int l, r;bool operator< (const Range &W) const{return l < W.l;} }range[N];int main() {int st, ed;cin >…

Mybatis-Flex框架初体验

本篇文章内容主要包括&#xff1a; MyBatis-Flex 介绍 MyBatis-Flex 是一个优雅的 MyBatis 增强框架&#xff0c;它非常轻量、同时拥有极高的性能与灵活性。我们可以轻松的使用Mybaits-Flex链接任何数据库&#xff0c;其内置的QueryWrapper亮点帮助我们极大的减少了SQL编写的工…

SpringBoot3项目中配置JDK17

概述 SpringBoot3需要JDK17的支持&#xff0c;不再支持JDK8。 如果要运行SpringBoot3的项目&#xff0c;根据使用的IDE&#xff0c;需要的配置不同。 配置说明 1. SpringToolSuite4 如果使用的是SpringToolSuite4&#xff08;STS&#xff09;&#xff0c;比较简单&#xf…

Linux 链表示例 LIST_INIT LIST_INSERT_HEAD

list(3) — Linux manual page 用Visual Studio 2022创建CMake项目 * CmakeLists.txt # CMakeList.txt : Top-level CMake project file, do global configuration # and include sub-projects here. # cmake_minimum_required (VERSION 3.12)project ("llist")# I…

法线贴图的视线原理

在上一篇文章中详细介绍了位移贴图的相关知识&#xff0c;在本章中我们继续讲述法线贴图的相关概念&#xff0c;文章后面继续用GLTF 编辑器 来演示下法线贴图的模型渲染效果。 1、什么是法线贴图 法线贴图&#xff08;Normal Map&#xff09;是一种纹理映射技术&#xff0c;用…

Vivado 综合属性之use_dsp48

use_dsp48综合属性提示综合工具如何处理算术运算的实现结构&#xff1b;在默认的情况下&#xff0c;如下的算术类型结构会综合成DSP48E资源&#xff1b; MultMult-add&Mult-subMult-accumulate 而adders&#xff0c;subtracters&#xff0c;与accumulators在默认情况下会使…

安装Linux虚拟机——以ubuntukylin-16.04.7-desktop-amd64.iso为例

正文 安装VMware 重要提示 安装软件之前&#xff0c;请先退出360、电脑管家等安全类软件&#xff0c;这类软件会阻止我们安装的软件进行注册表注册&#xff0c;很可能导致安装失败。确认物理机&#xff08;也就是你自己使用的电脑&#xff09;的防火墙已经关闭。 下载 打开…

23062day4

制作一个简易圆形时钟 头文件&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPaintEvent> #include <QDebug> #include <QPainter> #include <QTimerEvent> #include <QTime> #include <QThread> …

vue重修002

文章目录 版权声明一 指令修饰符1. 什么是指令修饰符&#xff1f;2. 按键修饰符3. v-model修饰符4. 事件修饰符 二 v-bind对样式控制的增强-操作class1. 语法&#xff1a;2. 对象语法3. 数组语法4. 代码练习 三 京东秒杀-tab栏切换导航高亮四 v-bind对有样式控制的增强-操作sty…

同源策略和跨域问题的解决

跨域问题 跨域问题顾名思义是当浏览器对不同于当前域的一个域下的资源进行访问和操作而产生的一系列**问题。**这些限制问题的产生是因为浏览器出于安全考虑对同源请求放行&#xff0c;对异源请求限制的一种规则&#xff0c;这种规则就是同源策略&#xff0c;因此限制造成的开…

【AI视野·今日NLP 自然语言处理论文速览 第三十八期】Thu, 21 Sep 2023

AI视野今日CS.NLP 自然语言处理论文速览 Thu, 21 Sep 2023 Totally 57 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers Chain-of-Verification Reduces Hallucination in Large Language Models Authors Shehzaad Dhuliawala, Mojt…

基于springboot+vue的信息技术知识赛系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

计算机视觉与深度学习-循环神经网络与注意力机制-Attention(注意力机制)-【北邮鲁鹏】

目录 引出Attention定义Attention-based model通俗解释应用在图像领域图像字幕生成&#xff08;image caption generation&#xff09;视频处理 序列到序列学习&#xff1a;输入和输出都是长度不同的序列 引出Attention 传统的机器翻译是&#xff0c;将“机器学习”四个字都学…

Linux三大搜索指令的区别

find&#xff1a;可以在指定的路径下进行文件的搜索 —— 真的在磁盘文件中查找 例如find /usr/bin/ -name ls which 可以在指令路径下&#xff0c;/usr/bin,搜索指令文件 例如&#xff1a;which ls whereis:在系统特定的路径下查找&#xff0c;既可以找到可执行程序&#xff…

您的计算机已被.360勒索病毒感染?恢复您的数据的方法在这里!

导言&#xff1a; 在数字时代&#xff0c;威胁网络安全的恶意软件不断演化&#xff0c;而.360勒索病毒则是近年来备受关注的一种。这种勒索病毒以其高度复杂的加密技术和毒害性的行为而著称&#xff0c;威胁着用户的数据和隐私。本文91数据恢复将深入剖析.360勒索病毒&#xf…

三叠云电梯维保系统,全面提升电梯维保管理效率与质量

随着城市化进程的不断加速&#xff0c;电梯已成为现代建筑中不可或缺的交通工具。然而&#xff0c;电梯的安全和正常运行对于居民和物业公司来说至关重要&#xff0c;同时电梯维保一直是一个困扰物业管理公司和维保企业的难题。传统的维保方式因纸质记录的繁琐和错误频发&#…

【ArcGIS】土地利用变化分析详解(矢量篇)

土地利用变化分析详解-矢量篇 土地利用类型分类1 统计不同土地利用类型的面积/占比1.1 操作步骤Step1&#xff1a;Step2&#xff1a;计算面积Step3&#xff1a;计算占比 2 统计不同区域各类土地利用类型的面积2.1 操作步骤 3 土地利用变化转移矩阵3.1 研究思路3.2 操作步骤 4 分…

uniapp 运行到ios基座教程

请注意&#xff0c;要在 iOS 真机设备上运行 UniApp 项目&#xff0c;你需要使用有效的开发者证书和配置相关的签名设置。此外&#xff0c;还需要根据你的需求对项目进行调试和适配。 以下是一个基本的运行 UniApp 项目到 iOS 模拟器或设备的步骤。具体操作可能会因你的项目配置…

leetcode1516.移动N叉树的子树

题目 给定一棵没有重复值的 N 叉树的根节点 root ,以及其中的两个节点 p 和 q。 移动节点 p 及其子树,使节点 p 成为节点 q 的直接子节点。 如果 p 已经是 q 的直接子节点,则请勿改动任何节点。 节点 p 必须是节点 q 的子节点列表的最后一项。 返回改动后的树的根节点。 节点…