Vue前端框架入门

news2024/12/24 8:55:37

文章目录

  • 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-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.coloradmin.cn/o/817456.html

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

相关文章

热度升温 SSOT上海国际智慧办公展览会精彩预告福利放送

上海国际智慧办公展览会&#xff08;SSOT&#xff09;是智慧办公及商用空间智能化解决方案及技术应用的专业平台&#xff0c;本届展会除了将“智联”智能行业&#xff0c;同时会以“智越”为题&#xff0c;与行业共建跨越行业界限之桥梁。 展会将融合应用智慧办公、智慧地产、智…

Flask中flask-session

Flask中flask-session Flask-Session是一个为Flask应用程序开发的工具&#xff0c;允许您轻松处理服务器端会话。会话是存储和追踪用户特定数据的方式。例如&#xff0c;当用户登录到应用程序时&#xff0c;他们的状态&#xff08;即登录状态&#xff09;可以保存在会话中&…

搞清楚 Windows C/C++ 编程中各种编码

最近编写程序,中文乱码问题让很多同学很头疼,那么今天黄老师来帮大家剖析一下: 以 “好人“ 两个字为例: 等会我们使用代码跟踪内存,来查看字节的编码: 先上代码: #include<stdio.h> #include<stdlib.h> #include<windows.h>char * ConvertUT…

PHP-Mysql好运图书管理系统--【白嫖项目】

强撸项目系列总目录在000集 PHP要怎么学–【思维导图知识范围】 文章目录 本系列校训本项目使用技术 首页必要的项目知识ThinkPHP的MVCThinkTemplateThinkPHP 6和ThinkPHP 5 phpStudy 设置导数据库前台展示页面后台的管理界面数据库表结构项目目录如图&#xff1a;代码部分&a…

模型法在初中物理中的实例与应用

摘要&#xff1a;模型法是初中物理解题的重要方法&#xff0c;它的优点有方便快捷&#xff0c;易于理解等。文章通过列举模型法在初中物理解题时应用的例子&#xff0c;与模型法在学习与生活中的实际应用&#xff0c;说明了模型法可用性高&#xff0c;易于理解&#xff0c;能让…

UNIX网络编程卷一 学习笔记 第二十六章 线程

在传统UNIX模式中&#xff0c;当一个进程需要另一个实体完成某事时&#xff0c;它就fork一个子进程&#xff0c;并让子进程去执行处理&#xff0c;Unix上大多网络服务器程序就是这么写的。 这种范式多年来一直用得很好&#xff0c;但fork调用存在一些问题&#xff1a; 1.fork调…

揭秘电脑上的几大流氓软件,查看你的设备是否中招?

当我们使用电脑时&#xff0c;不可避免地会接触到各种软件。有些软件为我们提供了便利和安全保障&#xff0c;而另一些则隐藏着不良企图。这些被称为"流氓软件"的程序&#xff0c;可能给我们的电脑带来麻烦、干扰甚至威胁我们的数据安全。让我们一起盘点一下电脑上的…

基于Ko-time的Springboot单体化调用链追踪实践

目录 前言 一、关于Ko-Time 1、是什么&#xff1f; 2、ko-time更新时间线 二、Ko-time怎么用&#xff1f; 1、依赖引入 2、配置集成 3、权限放行 三、链路追踪 1、系统运行 2、链路追踪 3、长时间调用模拟 总结 前言 熟悉微服务的老司机一定了解&#xff0c;在微服务模…

Java - 多态的使用

多态 多态基本介绍 方法或对象具有多种形态。是面向对象的三大特征&#xff0c;多态是建立在封装和继承基础之上的。 多态的具体体现 1、方法的多态&#xff1a; 重写和重载就能体现多态。 2、对象的多态&#xff1a;【背下来&#xff0c;记住】 一个对象的编译类型和运行…

快应用编译前如何统一替换字符串

假设你有一个需求&#xff0c;要把代码里的ad-button替换为div&#xff0c;因为是mi看ad-button不爽。 这还不简单么&#xff0c;webpack有那么多成熟的plugins和loaders&#xff0c;本身我对webpack也只是略知一二&#xff0c;随便一搜网上的解决方案&#xff0c; string-re…

【Java基础教程】(五十)JDBC篇:JDBC概念及操作步骤、主要类与接口解析、批处理与事务处理~

Java基础教程之JDBC &#x1f539;本章学习目标1️⃣ JDBC概念2️⃣ 连接数据库3️⃣ Statement 接口3.1 数据更新操作3.2 数据查询 4️⃣ PreparedStatement 接口4.1 Statement 接口问题4.2 PreparedStatement操作 5️⃣ 批处理与事务处理&#x1f33e; 总结 &#x1f539;本…

C++学习day--16 野指针和空指针

1、什么是野指针&#xff1f; 野指针就是指向的位置是不可知的&#xff08;随机的、不正确的、没有明确限制的&#xff09; 造成野指针的原因&#xff1a; 1、指针未初始化 2、指针越界 3、指针指向的空间被释放 规避野指针的方法&#xff1a; 1. 指针初始化 2. 小心指针越界…

【数据分享】2000—2022年250米分辨率逐月归一化植被指数(NDVI)数据(免费获取/全国/分省/分市)

NDVI&#xff0c;全名为Normalized Difference Vegetation Index&#xff0c;中文名称为归一化植被指数。这个指数可以用来定性和定量评价植被覆盖及其生长活力&#xff0c;我们也可以简单地将它理解为体现植被密度和健康状况的一个指标。 之前我们给大家分享过来源于MOD13A3数…

嵌入式面试常见题目收藏(超总结)

​ 这篇文章来自很多博客主和其他网站的作者&#xff0c;如有侵权&#xff0c;联系必删 文章出处标注&#xff1a; https://blog.csdn.net/qq_44330858/article/details/128947083 ***如需PDF或者原稿可私信 *** ***如需PDF或者原稿可私信 *** ***如需PDF或者原稿可私信 *** 1.…

AC+FIT(瘦AP)配置浅谈

FIT ensp实验材料 &#xff1a;pc、路由器、三层交换机、二层交换机、ac、ap 保证连通性&#xff1a; 根据ac与ap设计好的ip配置&#xff0c;使之可以通讯 ac与ap可以实现跨网段管理 1、设置三层交换机的vlan 与vlanif信息 dhcp enable //开启dhcp ip pool forap //…

Spring整合Mybatis、Spring整合JUnit

&#x1f40c;个人主页&#xff1a; &#x1f40c; 叶落闲庭 &#x1f4a8;我的专栏&#xff1a;&#x1f4a8; c语言 数据结构 javaweb 石可破也&#xff0c;而不可夺坚&#xff1b;丹可磨也&#xff0c;而不可夺赤。 Spring整合 一、Spring整合Mybatis1.1 整合Mybatis&#x…

链表刷题常用技巧——快慢指针

强大&#xff0c;不动如山的强大&#xff0c;不会输给自己的真正的强大。 往期回顾&#xff1a; 数据结构——单链表 单链表力扣刷题 文章目录 经典例题&#xff1a;链表的中间结点 题目分析及双指针思路引入 双指针图解 leetcode 核心代码 判断环形链表——快慢指针…

查看本地mysql账号密码

使用Navicat工具打开本地mysql&#xff0c;新建查询输入下面查询语句 SELECT user, authentication_string FROM mysql.user WHERE userroot将authentication_string 中的加密密码复制出来打开链接&#xff1a; Magic Data 5输入加密的密码&#xff0c;和验证码&#xff0c;点…

【目标检测】基于yolov5的水下垃圾检测(附代码和数据集,7684张图片)

写在前面: 首先感谢兄弟们的订阅,让我有创作的动力,在创作过程我会尽最大能力,保证作品的质量,如果有问题,可以私信我,让我们携手共进,共创辉煌。 路虽远,行则将至;事虽难,做则必成。只要有愚公移山的志气、滴水穿石的毅力,脚踏实地,埋头苦干,积跬步以至千里,就…

HDFS Erasure coding-纠删码介绍和原理

HDFS Erasure coding-纠删码介绍和原理 三副本策略弊端Erasure Coding&#xff08;EC&#xff09;简介Reed- Solomon&#xff08;RS&#xff09;码 EC架构 三副本策略弊端 为了提供容错能力&#xff0c;hdfs回根据replication factor&#xff08;复制因子&#xff09;在不同的…