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;方便的接入已有监测系统。 传感器状态 专用指示灯方…

web服务器

dns域名 网络是基于tcp/ip协议进行通信和连接的。 IP地址&#xff1a;每一台主机的唯一标识&#xff08;固定的IP地址&#xff09;&#xff0c;用于区分用户和计算机。 由于IP地址是由32位二进制数组成的&#xff0c;不方便记忆。所以一般将IP地址转为域名使用。 dns解析&a…

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

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

【前端面试手撕题】call、bind、new、freeze、浅拷贝

FED11 _call函数 描述 请补全JavaScript代码&#xff0c;要求实现Function.call函数的功能且该新函数命名为"_call"。 <!DOCTYPE html> <html><head><meta charset"UTF-8"><style>/* 填写样式 */</style> </head…

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

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

Oracle多行数据合并为一行数据,并将列数据转为字段名

Oracle多行数据合并为一行数据 实现查询效果原数据 方式一&#xff1a;MAX()数据效果SQL 方式二&#xff1a;LISTAGG()数据效果 方式三&#xff1a;WM_CONCAT()数据效果 实现查询效果 原数据 FZPROJECTVALUE1电脑$16001手机$121导管$12电脑$22手机$22 方式一&#xff1a;MAX…

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;相同列名会合…

HTTP 劫持、DNS 劫持与 XSS

HTTP 劫持、DNS 劫持与 XSS http 劫持是指攻击者在客户端和服务器之间同时建立了连接通道&#xff0c;通过某种方式&#xff0c;让客户端请求发送到自己的服务器&#xff0c;然后自己就拥有了控制响应内容的能力&#xff0c;从而给客户端展示错误的信息&#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;对主机上的文件信息以及重要资产…

java并行流的介绍

什么是并行流&#xff1f; 在介绍并行流之前&#xff0c;我们首先需要了解Stream API是什么。Stream API允许我们以声明性的方式对数据进行操作&#xff0c;例如过滤、映射、排序等&#xff0c;而无需编写繁琐的迭代和循环代码。这不仅提高了代码的可读性&#xff0c;还可以帮…

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

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

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

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

leetcode算法题--圆圈中最后剩下的数字

原题链接&#xff1a;https://leetcode.cn/problems/yuan-quan-zhong-zui-hou-sheng-xia-de-shu-zi-lcof/description/?envTypestudy-plan-v2&envIdcoding-interviews 模拟&#xff0c;会超时 func lastRemaining(n int, m int) int {cnt : make([]int, n)for i : range…

RabbitMQ 事务

事务简介 就像我们了解的MySQL中的事务一样&#xff0c;RabbiMQ的事务也具备原子性和一致性&#xff0c;并且RabbiMQ的事务是针对消息从生产者发送到RabbitMQ中提供的支持&#xff0c;因此不同事务可以同时给同一个队列发送信息。   可通过channel.txSelect&#xff0c;chann…

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

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