Vue前端框架入门

文章目录

  • Vue
    • 快速入门
    • Vue指令
    • 生命周期

Vue

经过一小段时间学习
我认为vue就是在原js上进行的一个加强
简化JS中的DOM操作
在这里插入图片描述
vue是分两个层的
一个叫做视图层(View),你可以理解为展现出来的前端页面
一个叫数据模型层(Model),包含数据和一些数据的处理方法
MVVM就是实现这两层之间的数据的双向绑定

快速入门

{{}}是我们的插值表达式,用来展现我们的数据,里面是可以进行算数运算的
在这里插入图片描述

简而言之
对应el相当于一个id选择器,然后我们里面定义data是我们的数据模型
v-model是为表单元素进行数据绑定的指令
这是我们的程序
在这里插入图片描述
这里我们编写的视图,我们把message数据模型展示
我们可以通过input修改
这样的话,后面的数据也是会进行对应的修改,相当于你更改了message数据模型
展示数据是和数据模型层绑定的,所以会一起变
在这里插入图片描述

Vue指令

vue中带v-xxx就是vue中的指令

在这里插入图片描述
使用这些指令前提:JS标签中创建Vue对象,再定义数据层模型

v-bind为标签指定href,css样式等等,也是动态的绑定vue的数据层(单向绑定
v-model之前也演示过,主要是进行一个数据双向绑定的操作
在这里插入图片描述

这样写代码

在这里插入图片描述
这个跳转链接会根据你输入栏里的网址
刚刚跳转网址(因为都是一个数据)
在这里插入图片描述

v-bind与v-model的区别

v-on绑定事件指令
绑定一般都是method而不是data了
然后点击就会执行对应的函数
在这里插入图片描述
在这里插入图片描述
v-if、v-else-if、v-else以及v-show
在这里插入图片描述
两种都是根据条件进行渲染
v-if三件套是符合条件才渲染
v-show是全都渲染,然后判断条件,将不符合的diaplay属性(css样式修改)更改为none(即不显示)
对应使用方法
在这里插入图片描述
v-for就是适用于列表元素的遍历的一个指令

<v-for="(内部元素名,...) in 遍历数组(数据结构)名 ">
元素名自己定义随便写
数据结构对应技术我们data里面的 数组

在这里插入图片描述在这里插入图片描述

生命周期

概述
在这里插入图片描述

流程图
在这里插入图片描述
在不同生命周期,会执行对应的方法,我们可以定义对应的方法
来起到一个通知的作用
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

岩土工程仪器多通道振弦传感器信号转换器应用于隧道安全监测

岩土工程仪器多通道振弦传感器信号转换器应用于隧道安全监测 多通道振弦传感器信号转换器VTI104_DIN 是轨道安装式振弦传感器信号转换器&#xff0c;可将振弦、温度传感器信号转换为 RS485 数字信号和模拟信号输出&#xff0c;方便的接入已有监测系统。 传感器状态 专用指示灯方…

中兴服务器支持百度“文心一言”,助力AI产业发展

前段时间&#xff0c;中兴和百度正式对外宣布中兴服务器将会支持百度“文心一言”&#xff0c;为其提供更加强劲的算力支撑&#xff0c;从而加速“文心一言”的完事升级与更新迭代&#xff0c;助力AI产业化应用和生态的繁荣发展。   “文心一言”是百度基于文心大模型技术推出…

小成本大幅度增幅CNN鲁棒性,完美的结合GLCM+CNN

本文以实验为导向&#xff0c;使用vgg16GLCM实现一场精彩的新冠肺炎的分类识别&#xff0c;并且对比不加GLCM后的效果。在这之前&#xff0c;我们需要弄明白一些前缀知识和概念问题&#xff1a; GLCM&#xff08;Gray-Level Co-occurrence Matrix&#xff09;&#xff0c;中文称…

CAS之AtomicReference原理解析

如果你了解了AtomicInteger的工作原理&#xff0c;或者看了如下文章&#xff0c;知道了AtomicInteger只能对当个int类型共享变量做cas的缺点。 CAS之AtomicInteger原理解析_z275598733的博客-CSDN博客 那么AtomicReference就是来解决这个问题的。原理很类似&#xff0c;只是A…

SAS-数据集SQL水平合并

一、SQL水平合并基本语法 sql的合并有两步&#xff0c;step1&#xff1a;进行笛卡尔乘积运算&#xff0c;第一个表的每一行合并第二个表的每一行&#xff0c;即表a有3行&#xff0c;表b有3行&#xff0c;则合并后3*39行。笛卡尔过程包含源数据的所有列&#xff0c;相同列名会合…

怎么加密文件夹才更安全?安全文件夹加密软件推荐

文件夹加密可以让其中数据更加安全&#xff0c;但并非所有加密方式都能够提高极高的安全强度。那么&#xff0c;怎么加密文件夹才更安全呢&#xff1f;下面我们就来了解一下那些安全的文件夹加密软件。 文件夹加密超级大师 如果要评选最安全的文件夹加密软件&#xff0c;那么文…

STM32入门学习之定时器中断

1.STM32的通用定时器是可编程预分频驱动的16位自动装载计数器。 STM32 的通用定时器可以被用于&#xff1a;测量输入信号的脉冲长度 ( 输入捕获 ) 或者产生输出波 形 ( 输出比较和 PWM) 等。 使用定时器预分频器和 RCC 时钟控制器预分频器&#xff0c;脉冲长度和波形 周…

[BabysqliV3.0]phar反序列化

文章目录 [BabysqliV3.0]phar反序列化 [BabysqliV3.0]phar反序列化 开始以为是sql注入 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ST1jvadM-1691302941344)(https://raw.githubusercontent.com/leekosss/photoBed/master/202308032140269.png)…

LabVIEW开发3D颈动脉图像边缘检测

LabVIEW开发3D颈动脉图像边缘检测 近年来&#xff0c;超声图像在医学领域对疾病诊断具有重要意义。边缘检测是图像处理技术的重要组成部分。边缘包含图像信息。边缘检测的主要目的是根据强度和纹理等属性识别图像中均匀区域的边界。超声&#xff08;US&#xff09;图像存在视觉…

应急响应-勒索病毒的处理思路

0x00 关于勒索病毒的描述 勒索病毒入侵方式&#xff1a;服务弱口令&#xff0c;未授权&#xff0c;邮件钓鱼&#xff0c;程序木马植入&#xff0c;系统漏洞等 勒索病毒的危害&#xff1a;主机文件被加密&#xff0c;且几乎难以解密&#xff0c;对主机上的文件信息以及重要资产…

在政策+市场双轮驱动下,深眸科技助力机器视觉行业走向成熟

近年来&#xff0c;随着人工智能发展的不断提速&#xff0c;机器视觉作为其重要的前沿分支&#xff0c;凭借着机器代替人眼来做测量和判断的能力&#xff0c;广泛应用于工业领域的制造生产环节&#xff0c;用来保证产品质量、控制生产流程、感知环境等&#xff0c;并迸发出强劲…

【SOP】最佳实践之 TiDB 业务写变慢分析

作者&#xff1a; 李文杰_Jellybean 原文来源&#xff1a; https://tidb.net/blog/d3d4465f 前言 在日常业务使用或运维管理 TiDB 的过程中&#xff0c;每个开发人员或数据库管理员都或多或少遇到过 SQL 变慢的问题。这类问题大部分情况下都具有一定的规律可循&#xff0c;…

ES6基础知识十:你是怎么理解ES6中 Decorator 的?使用场景?

一、介绍 Decorator&#xff0c;即装饰器&#xff0c;从名字上很容易让我们联想到装饰者模式 简单来讲&#xff0c;装饰者模式就是一种在不改变原类和使用继承的情况下&#xff0c;动态地扩展对象功能的设计理论。 ES6中Decorator功能亦如此&#xff0c;其本质也不是什么高大…

eclipse was unable to locate its companion shared library

当转移或者Copy工程时&#xff0c; eclipse was unable to locate its companion shared library eclipse.ini 里面的路径配置错误导致 --launcher.library C:/Users/**/.p2/pool/plugins/org.eclipse.equinox. launcher.win32.win32.x86_64_1.2.700.v20221108-1024 -product …

Tomcat的介绍和安装配置、eclipse中动态web项目的创建和运行、使用IDEA创建web项目并运行

一、Tomcat的介绍和安装配置 安装tomcat&#xff1a; 环境变量的配置&#xff1a; 配置之后重启cmd&#xff0c;执行startup命令&#xff0c;启动tomcat 在localhost:8080&#xff0c;能进入tomcat主界面&#xff0c;说明配置成功 二、eclipse中动态web项目的创建和运行 tomca…

【雕爷学编程】Arduino动手做(180)---Seeeduino Lotus开发板2

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…

Linux下C/C++的gdb工具与Python的pdb工具常见用法之对比

1、gdb和pdb分别是什么&#xff1f; 1.1、gdb GDB&#xff08;GNU Debugger&#xff09;是一个功能强大的命令行调试工具&#xff0c;由GNU项目开发&#xff0c;用于调试C、C等编程语言的程序。它在多个操作系统中都可以使用&#xff0c;包括Linux、MacOS和Windows&#xff0…

【Spring Boot】Spring Boot 集成 RocketMQ 实现简单的消息发送和消费

文章目录 前言基本概念消息和主题相关发送普通消息 发送顺序消息RocketMQTemplate的API介绍参考资料&#xff1a; 前言 本文主要有以下内容&#xff1a; 简单消息的发送顺序消息的发送RocketMQTemplate的API介绍 环境搭建&#xff1a; RocketMQ的安装教程&#xff1a;在官网…

Qt下载慢/无法下载解决方式

文章目录 一. Qt在线安装下载二. 安装方式 一. Qt在线安装下载 官网下载&#xff1a;https://www.qt.io/download清华源下载&#xff1a;https://mirrors.tuna.tsinghua.edu.cn/qt/official_releases/online_installers/ 二. 安装方式 进入下载好的目录 在目录栏输入CMD&…

常州同和采购益高观光车提升服务品质

同和纺织机械制造有限公司坐落于江苏省常州市戚墅堰经济开发区,是中国纺织工业联合会常务理事单位、国家高新技术企业。公司占地面积30万平方米,现代化厂房建筑面积20万平方米。 随着公司发展,企业意识到通过提供高品质的客户接待服务来增强竞争力。为了满足这一需求,常州同和…