【Vue】Vue基础入门

       📝个人主页:五敷有你      
 🔥系列专栏:Vue
⛺️稳重求进,晒太阳

Vue概念

  • 是一个用于构建用户界面的渐进式框架
  • 优点:大大提高开发效率
  • 缺点:需要理解记忆规则

创建Vue实例

步骤:

  1. 准备容器
  2. 引包
  3. 创建Vue实例new Vue()
  4. 指定配置项el data=>渲染数据
  • el指定挂载点,选择器指定控制的是哪个盒子
  • data:提供数据

插值表达式

插值表达式是一种Vue的模板语法

  1. 作用:利用表达式进行插值,渲染到页面
    1. 表达式:可以被求值的代码,js会算出一个结果
  2. 语法:{{表达式}}
  3. 注意点
    1. 使用的数据必须存在
    2. 支持的式表达式而非语法
    3. 不能在标签属性中使用{{}}插值

Vue的核心特征:响应式

数据改变,视图自动更新

访问数据:实例.属性名

修改数据:实例.属性名=“值”

开发者工具:

在拓展中搜索VueDevtools下载安装

给他权限

OK

Vue指令

Vue会根据不同的指令,针对标签实现不同的功能

指令:带有v-前缀的特殊标签属性

v-html

v-html="表达式" ->动态设置元素innerHTML

v-if(条件渲染)

作用:控制元素显示隐藏(条件渲染)

语法:v-if="表达式" 表达式值:true 显示,flase 隐藏

原理:根据条件判断,是否创建或移除元素节点

场景:不频繁切换的场景

v-show(显示隐藏)

作用:控制元素显示隐藏

语法:v-show="表达式"

原理:切换display:none

场景:频繁切换显示隐藏场景

v-if v-else v-else-if

作用:复制v-if进行判断渲染

语法:v-else v-else-if="表达式"

注意:需要紧挨着v-if一起使用

v-on

  1. 作用:注册事件=添加监听+提供处理逻辑
  2. 语法:
  • v-on:事件名="内联语句"
 <button v-on:click="count++">+</button>//简写<button @click="count++">+</button>

v-on:事件名="methods中的函数名"

  1. 注意:
  • 内联语句可以直接拿data中的数据
  • method中是不能直接访问到data中的数据的,需要的是app.属性
  • 在methods中的函数,this都是指向当前实例
  1. 调用传参
    1. 可以额外传参
 <button @click="func(10)">+10</button> /.../methods:{func(num){app.count=app.count+num;}}

v-bind

作用:动态的设置html的标签属性 ->src url title

语法:v-bind:属性名="表达式" 简写::属性名="表达式"

<div v-else> <img v-bind:src="imageUrl[page]" /> </div>

v-for

作用:基于数据循环,多次渲染整个元素 →数组、对象、数字

语法:v-for="(item,index) in 数组" (item每一项,index下标)

<li v-for="(item,index) in list"> {{item}} </li>

v-for中的key

<ul> <li v-for="(item,index) in book" :key="item.id "> <span>{{item.id}}</span><span>{{item.name}}</span><span>{{item.author}}</span><button @click="fun1(index)">删除</button> </li> </ul>

加key相当于每一列加了名字

不加v-for的默认行为会尝试原地修改元素(就地复用)

v-model

作用:给表单元素使用,双向数据绑定--->可以快速获取或设置表单元素内容

语法:v-model="变量"

 <input type="text" name="" id="username"v-model="username"><br><input type="password" id="password" v-model="password"><br>

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

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

相关文章

SpringBoot-基础篇03

之前搭建了整个开发环境实现了登录注册&#xff0c;springBoot整合mybatis完成增删改查&#xff0c;今天完成分页查询&#xff0c;使用阿里云oss存储照片等资源&#xff0c;后期会尝试自己搭建分布式文件系统来实现。 一&#xff0c;SpringBootMybatis完成分页查询 1&#xff…

npm 上传一个自己的应用(3) 在项目中导入及使用自己上传到NPM的工具

上文 npm 上传一个自己的应用(2) 创建一个JavaScript函数 并发布到NPM 我们创建了一个函数 并发上了npm 最后 我们这里 我们可以看到它的安装指令 这里 我们可以打开一个vue项目 终端输入 我们的安装指令 npm i 自己的包 如下代码 npm i grtest我们在 node_modules目录 下…

【Linux】构建模块

&#x1f525;博客主页&#xff1a;PannLZ &#x1f38b;系列专栏&#xff1a;《Linux系统之路》 &#x1f94a;不要让自己再留有遗憾&#xff0c;加油吧&#xff01; 文章目录 构建第一个模块1模块的makefile2内核树内构建3内核树外构建 构建第一个模块 可以在两个地方构建模…

【Spring】Spring 对 Ioc 的实现

一、Ioc 控制反转 控制反转是一种思想 控制反转是为了降低程序耦合度&#xff0c;提高程序扩展力&#xff0c;达到 OCP 原则&#xff0c;达到 DIP 原则 控制反转&#xff0c;反转的是什么&#xff1f; 将对象的创建权利交出去&#xff0c;交给第三方容器负责 将对象和对象之…

Windows下搭建Redis Sentinel

下载安装程序 下载Redis关于Windows安装程序&#xff0c;下载地址 下载成功后进行解压&#xff0c;解压如下&#xff1a; 配置redis和sentinel 首先复制三份redis.windows.conf&#xff0c;分别命名为&#xff1a;redis.6379.conf、redis.6380.conf、redis.6381.conf&…

C++笔记之regex(正则表达式)

C++笔记之regex(正则表达式) ——2024-02-10 ——《C++标准库》(第2版,侯捷译) Page 717 code review! 文章目录 C++笔记之regex(正则表达式)例1:使用正则表达式进行搜索(`std::regex_search`)例2:使用正则表达式进行全文匹配(`std::regex_match`)例3:使用正则表达式…

01-Spring实现重试和降级机制

主要用于在模块调用中&#xff0c;出现失败、异常情况下&#xff0c;仍需要进行重复调用。并且在最终调用失败时&#xff0c;可以采用降级措施&#xff0c;返回一般结果。 1、重试机制 我们采用spring 提供的retry 插件&#xff0c;其原理采用aop机制&#xff0c;所以需要额外…

分享3款开源免费好用的Docker可视化管理工具安装部署教程

文章目录 1.前言2.Docker Desktop3.Portainer3.1 Portainer默认英文版本安装3.2 Portainer汉化版本安装3.3官方镜像说明3.3.1ssl访问3.3.2Nginx反代3.3.3Nginx反代设置子目录3.3.4docker-compose部署 3.4登录 4.DockerUI4.1简介4.2项目地址4.3部署启动命令4.4登录4.5首页 5.总结…

vue day06

1、路由模块封装 2、声明式导航 实现导航高亮效果 直接通过这两个类名对相应标签设置样式 点击a链接进入my页面时&#xff0c;a链接 我的音乐高亮&#xff0c;同时my下的a、b页面中的 我的音乐也有router-link-active类&#xff0c;但没有精确匹配的类&#xff08;只有my页…

Android 粒子喷泉动效

一、前言&#xff1a; 在学习open gl es实现动效的时候&#xff0c;打算回顾了一下用普通的2D坐标系实现粒子效果和 open gl 3d 坐标系的区别&#xff0c;以及难易程度&#xff0c;因此本篇以Canvas 2D坐标系实现了一个简单的demo。 粒子动效原理&#xff1a; 粒子动效本质上…

读完《王志纲谈生涯规划》后感

(点击即可收听) 经常在短视频刷到,这位王志钢老师,在微信读书里面也看到过,于是拜读了一下,这是一本生涯规划书,但更多的是他个人经历的一个描述 有大道理&#xff0c;有些话还是值得认可的 比如&#xff1a;他谈到,想要减少个人乃至社会的悲剧&#xff0c;最好的办法就是尽自己…

svg基础(八)滤镜-feTurbulence(湍流)

feTurbulence&#xff1a;湍流滤镜 湍流滤镜&#xff0c;不稳定气流&#xff0c;能够实现半透明的烟熏或波状图像。 通常用于实现一些特殊的纹理。滤镜利用 Perlin 噪声函数创建了一个图像。噪声在模拟云雾效果时非常有用&#xff0c;能产生非常复杂的质感&#xff0c;利用它可…

【Unity】QFramework通用背包系统优化:使用Odin优化编辑器

前言 在学习凉鞋老师的课程《QFramework系统设计&#xff1a;通用背包系统》第四章时&#xff0c;笔者使用了Odin插件&#xff0c;对Item和ItemDatabase的SO文件进行了一些优化&#xff0c;使物品页面更加紧凑、更易拓展。 核心逻辑和功能没有改动&#xff0c;整体代码量减少…

[C++] 如何使用Visual Studio 2022 + QT6创建桌面应用

安装Visual Studio 2022和C环境 [Visual Studio] 基础教程 - Window10下如何安装VS 2022社区版_visual studio 2022 社区版-CSDN博客 安装QT6开源版 下载开源版本QT Try Qt | 开发应用程序和嵌入式系统 | Qt Open Source Development | Open Source License | Qt 下载完成&…

springboot原理

springboot是基于Spring Framework升级的框架从而更加高效的开发主要体现在依赖配置的简化 springboot的起步依赖通过maven依赖传递包含了开发需要的依赖

【Linux】学习-基础IO—下

Linux基础IO—上 重定向 通过上篇的学习&#xff0c;我们了解了文件描述符的分配规则是遍历指针数组&#xff0c;用没有被使用的最小下标作为新的文件描述符&#xff0c;也就是我们可以通过关闭三个标准流文件并使用他们原先所占用的0&#xff0c;1&#xff0c;2描述符。 那…

探索设计模式的魅力:代理模式揭秘-软件世界的“幕后黑手”

设计模式专栏&#xff1a;http://t.csdnimg.cn/U54zu 目录 引言 一、魔法世界 1.1 定义与核心思想 1.2 静态代理 1.3 动态代理 1.4 虚拟代理 1.5 代理模式结构图 1.6 实例展示如何工作&#xff08;场景案例&#xff09; 不使用模式实现 有何问题 使用模式重构示例 二、…

车载电子电器架构 —— 电子电气系统车载功能子系统

车载电子电器架构 —— 电子电气系统车载功能子系统 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 本就是小人物&#xff0c;输了就是输了&#xff0c…

osg模型的平移、缩放、旋转

加载2个模型&#xff0c;其中一个向上移动28个单位&#xff1b; 加载2个模型&#xff0c;其中一个缩放0.5倍&#xff0c;向下移动22个单位&#xff1b; 加载2个模型&#xff0c;其中一个缩放0.5倍、旋转45度、向右向下移动几个单位&#xff1b; 都是用矩阵实现的&#xff1b; …

【笔记】Harmony学习:下载安装 DevEco Studio 开发工具IDE

IDE 安装 从官网下载DevEco Studio 安装包后进行安装&#xff0c; 安装完毕后&#xff0c;本地环境可能要配置相关工具&#xff0c;可以通过下面的诊断检测一下本地环境&#xff0c;通过蓝色“Set it up now” 可以快速安装。 1. Node.js (for ohpm) 2. ohpm 下载op的包管理&a…