vue2知识点1 ———— (vue指令,vue的响应式基础)

vue2的知识点,更多前端知识在主页,还有其他知识会持续更新

Vue 指令

Vue指令是Vue.js中的一个重要概念,用于向DOM元素添加特定行为或功能。Vue指令以v-开头,例如v-bindv-ifv-for等。

v-bind

动态绑定属性

用法: v-bind:属性名=“vue变量” 简写 :属性名=“vue变量”

<img v-bind:src="imageSrc">

v-on

给元素绑定事件监听器

用法:v-on:已定义的函数方法(实参) 简写 : @事件名=“函数”

修饰符:.stop:阻止事件冒泡   .prevent 阻止默认行为  .once 程序运行期间,只触发一次

<button v-on:click="handleClick">点击我</button>

v-model 在表单输入元素或组件上创建双向绑定

用于实现双向数据绑定,将表单元素的值与Vue实例中的数据进行关联。例如,将输入框的值与message数据进行双向绑定:

范围:<input>   <select>  <txttrea>  <components>

用法:<input v-model="属性名">  // 复选框的值为数组  单选值为布尔值

修饰符:.lazy 编辑完成后才更新数据     .number 将字符串数字转成number数字   .trim 消除字符两端的空格

<input type="text" v-model="message">

v-text 插值表达式 用于设置元素的部分内容

用法: <span v-text="span"></span>  = <span>{{span}}</span> 

容使用后在其中插值 无视所插的值

v-html 与v-text意义相同

用法:<div v-html="html"></div>   html可以是HTML格式 可以自动编译

同样无视所插入的值

v-show  改变display css属性来工作   ps:频繁切换使用

用法:<div v-show="属性名"></div>    

与v-if不同之处:v-show 会在dom渲染中保留该元素 仅切换了元素上display

v-show 不支持在 <template> 元素上使用 也不能喝 v-else 搭配使用

v-if  直接从dom上移除

用法:<div v-if="vue变量"></div>

<div v-if="isShow">显示内容</div>
<div v-show="isShow">显示内容</div>

v-for 基于基础数据多次渲染元素或模块

用法:<div v-for="(item,key) in 数据" key="key"></div>

数据绑定类型:Array | object | Number | Iterable

<ul><li v-for="item in items">{{ item }}</li>
</ul>

vue的响应式基础

Vue2的响应式基础是指Vue框架中实现数据双向绑定的核心机制。在Vue2中,当数据发生变化时,视图会自动更新,反之亦然。这种实现是通过Vue的响应式系统来实现的。

Vue2的响应式基础主要包括以下几个方面:

  1. 数据劫持:Vue2通过Object.defineProperty()方法来劫持数据对象的属性,使得当属性被读取或修改时,可以触发相应的更新操作。

  2. 依赖追踪:Vue2通过Watcher对象来追踪数据对象的依赖关系,当数据发生变化时,会通知相关的Watcher对象进行更新操作。

  3. 派发更新:当数据发生变化时,Vue2会通过触发更新函数来更新相关的视图。

  4. 异步更新:Vue2通过nextTick()方法实现异步更新,将多个数据变化合并为一次更新操作,提高性能。

总的来说,Vue2的响应式基础通过数据劫持、依赖追踪、派发更新和异步更新等机制实现了数据与视图的双向绑定,使得开发者可以更加方便地管理和操作数据,提高了开发效率和用户体验。

选用选项式API时,会用 data 选项来声明组件的响应状态。此选项的值返回一个对象函数

vue将在创建新组件实例的时候调用此函数

声明属性

这些实例上的属性仅在实例首次创建时添加

声明方法

Methods 是一个包含所有方法的对象,在此你可以定义方法

不能用监听函数,vue自动为methods 中的方法绑定永远指向组件实例的this

DOM更新时机

当你改变响应式状态,DOM也会自动更新,然而,你得注意DOM的更新并不是同步的,无论你进行了多少次声明,每个组件都只需要更新一次

若要等待一个状态改变的dom跟新完成,可以使用nextTick()这个全局API

vue的计算属性

在Vue中,计算属性是指在模板中可以直接使用的属性,它们的值是通过对其他数据进行计算得到的。计算属性的值是基于它们的依赖缓存的,只有在依赖发生变化时才会重新计算,这样可以提高性能。

计算属性的定义方式如下:

new Vue({data: {message: 'Hello, Vue!'},computed: {reversedMessage: function() {return this.message.split('').reverse().join('');}}
})

在上面的例子中,reversedMessage是一个计算属性,它依赖于message属性。当message发生变化时,reversedMessage会重新计算并更新视图。

计算属性的特点包括:

  1. 缓存:计算属性的结果会被缓存,只有在它的依赖发生改变时才会重新计算。这样可以避免不必要的计算,提高性能。

  2. 响应性:计算属性会自动响应数据的变化,当依赖的数据发生改变时,计算属性会自动重新计算并更新相关的视图。

  3. 懒加载:计算属性只会在模板中使用时才会计算,如果没有使用则不会计算,这样可以节省性能。

  4. 可以依赖多个数据:计算属性可以依赖于多个数据,只要其中任何一个数据发生变化,计算属性就会重新计算。

总的来说,计算属性是Vue中一种非常方便的机制,可以帮助开发者简化模板中的逻辑,提高代码的可维护性和性能。通过合理使用计算属性,可以更加高效地处理数据和更新视图。

格式:

computed: {

    "计算属性名" () {

        return "值"

    }

}

可写式计算属性

computed: {

    "属性名": {

        set(值){

           

        },

        get() {

            return "值"

        }

    }

}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Springboot+Vue项目-基于Java+MySQL的在线视频教育平台系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

虚幻引擎源码版安装下载,点击GenerateProjectFiles.bat报错 error NU1101NuGet包问题解决参考方案

开发环境配置与源码安装使用 安装VS2022 按照官方文档安装需要的vs配置 虚幻引擎源代码下载 Epic里面下载的引擎与源代码引擎区别&#xff1a;Epic里面下载的引擎是已经编译过的它的源代码访问权限不完整&#xff0c;源代码版本提供比较完整引擎代码&#xff0c;并且可以修…

【LeetCode热题100】【回溯】单词搜索

题目链接&#xff1a;79. 单词搜索 - 力扣&#xff08;LeetCode&#xff09; 要在一个二维数组里面找到一条单词路径&#xff0c;可以先遍历二维数组找到单词入口&#xff0c;然后往上下左右深度遍历&#xff0c;访问过的元素直接修改成字符串结束符&#xff0c;访问完改回去 …

JVM 方法调用之方法分派

JVM 方法调用之方法分派 文章目录 JVM 方法调用之方法分派1.何为分派2.静态分派3.动态分派4.单分派与多分派5.动态分派的实现 1.何为分派 在上一篇文章《方法调用之解析调用》中讲到了解析调用&#xff0c;而解析调用是一个静态过程&#xff0c;在类加载的解析阶段就确定了方法…

Scala 02——Scala OOP

文章目录 Scala 02——Scala OOP前序类1. 类的基本结构2. 普通类和数据类的区别 继承1. extends2. override 抽象类抽象类的特点 单例对象1. 定义2. 场景3. 方法3.1 方法定义3.2 方法调用 特质1. 抽象类和特质的区别2. 强制混入语法3. 静态混入和动态混入 内部类Java和Scala内部…

大话设计模式之单例模式

单例模式是一种创建型设计模式&#xff0c;它确保类只有一个实例&#xff0c;并提供一个全局访问点来访问该实例。 单例模式通常在以下情况下使用&#xff1a; 当一个类只能有一个实例&#xff0c;并且客户端需要访问该实例时。当该唯一实例需要被公开访问&#xff0c;以便在…

用Skimage学习数字图像处理(021):图像特征提取之线检测(下)

本节是特征提取之线检测的下篇&#xff0c;讨论基于Hough变换的线检测方法。首先简要介绍Hough变换的基本原理&#xff0c;然后重点介绍Skimage中含有的基于Hough变换的直线和圆形检测到实现。 目录 10.4 Hough变换 10.4.1 原理 10.4.2 实现 10.4 Hough变换 Hough变换&…

WebGL 2.0相较于1.0有什么不同?

作者&#xff1a;STANCH 1.概述 WebGL 1.0自推出以来&#xff0c;已成为广泛支持的Web标准&#xff0c;既能跨平台&#xff0c;还免版税。它通过插件为Web浏览器带来高质量的3D图形&#xff0c;这是迄今为止市场上使用最广泛的Web图形&#xff0c;并得到Apple&#xff0c;Goog…

使用SpringBoot将中国地震台网数据保存PostGIS数据库实践

目录 前言 一、数据转换 1、Json转JavaBean 2、JavaBean与数据库字段映射 二、空间数据表设计 1、表结构设计 三、PostGIS数据保存 1、Mapper接口定义 2、Service逻辑层实现 3、数据入库 4、运行实例及结果 总结 前言 在上一篇博客中基于Java的XxlCrawler网络信息爬…

Resilience中的RateLimiter

Resilience中的RateLimiter 一、RateLimiter&#xff08;限流&#xff09;1.常见的限流算法漏桶算法&#xff08;Leaky Bucket&#xff09;令牌桶算法&#xff08;Token Bucket&#xff09;——Spring cloud 默认使用该算法滚动时间窗口&#xff08;tumbling time window&#…

GmSSL-3.1.1编译

1.源码下载&#xff1a; 下载地址&#xff1a;https://github.com/guanzhi/GmSSL/releases选择对应版本下载。 ​ 2.选择要下载的源码包&#xff1a; ​ 2.编译&#xff1a; 2.1 windows编译&#xff1a;打开vs命令行&#xff0c;选择想要编译的版本&#xff0c;x86或x64…

守望先锋2账号注册教程 战网国际服注册守望先锋2账号步骤

守望先锋2账号注册教程 战网国际服注册守望先锋2账号步骤 守望先锋2是一款由暴雪娱乐公司开发的多人第一人称射击游戏&#xff0c;是守望先锋的续作&#xff0c;故事发生在未来&#xff0c;各种英雄为保卫地球而战。守望先锋2是款不断进化的游戏&#xff0c;带来极致的射击体…

【网络】Burpsuite学习笔记

文章目录 1.介绍1.1 正常客户端与服务端通信&BurpSuite代理后1.2 下载激活参考地址1.3 代理设置1.4 Proxy SwitchyOmega 使用1.4.1 新建情景模式1.4.2 设置代理1.4.2 应用选项 1.5 FoxyProxy 使用1.6 安装证书1.6.1 方式一1.6.2 方式二1.6.3 浏览器安装证书1.6.4 或者直接双…

面试突击---MySQL索引

面试突击---MYSQL索引 面试表达技巧&#xff1a;1、谈一下你对于mysql索引的理解&#xff1f;&#xff08;为什么mysql要选择B树来存储索引&#xff09;2、索引有哪些分类&#xff1f;3、聚簇索引与非聚簇索引4、回表、索引覆盖、最左匹配原则、索引下推&#xff08;1&#xff…

MATLAB 点云体素滤波 (58)

MATLAB 体素滤波 (58) 一、基本原理二、算法实现1.代码数据的海量性始终是点云处理时需要面临的一个大问题,严重的时间消耗和内存占用影响了点云处理的发展,当然了,点云数量主要应该看项目的实际需求,若是对细节要求较高,那么点云数量不可过少,但是要求过低时,我们就可…

【NUCLEO-G071RB】003——GPIO-按键控制LED灯

NUCLEO-G071RB&#xff1a;003——GPIO-按键控制LED灯 设计目标电路原理图芯片配置程序修改 设计目标 用输入控制输出&#xff0c;即以蓝色按键B1的输入控制LED4灯的输出 细节&#xff1a; 若判定为按键按下中&#xff0c;则LED灭灯&#xff0c;否则亮灯按键按下和抬起的检查…

怎样将excel的科学计数法设置为指数形式?

对了&#xff0c;这个问题中所谓的“指数形式”是指数学上书写的右上标的指数格式&#xff0c;能不能通过单元格设置来做这个格式的转换呢&#xff1f; 一、几个尝试 以下&#xff0c;以数字123000为例来说明。 情况1.转换成数学上的书写方式&#xff0c;如下图的样子&#x…

Windows 任务计划程序 【不管用户是否登录都要运行】执行时不显示CMD或程序窗口

任务计划程序右侧可以导出xml 「只在用户登录时运行」LogonType&#xff1a;InteractiveToken。 「不管用户是否登录都要运行」LogonType&#xff1a;Password。 用管理员运行CMD &#xff1a;schtasks /change /it /tn "test" 「不管用户是否登录都要运行」Logon…

20240329-1-SVM面试题

SVM面试题 1. SVM直观解释 SVM&#xff0c;Support Vector Machine&#xff0c;它是一种二分类模型&#xff0c;其基本模型定义为特征空间上的间隔最大的线性分类器&#xff0c;间隔最大使它有别于感知机&#xff1b;其还包括核技巧&#xff0c;这使它成为实质上的非线性分类…

vue+element作用域插槽

作用域插槽的样式由父组件决定&#xff0c;内容却由子组件控制。 在el-table使用作用域插槽 <el-table><el-table-column slot-scope" { row, column, $index }"></el-table-column> </el-table>在el-tree使用作用域插槽 <el-tree>…