Vue从零到实战

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。



非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
 

前言

本栏目是根据黑马程序员的网课来整理的笔记,也会结合我的一些个人见解,来记录自己学习Vue的过程,俗话说,好记性不如烂笔头,小郑喜欢在学习的过程中记笔记,记下自己在学习过程中难以理解的知识点,反复练习,加深印象,小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目,希望广大网友一起监督学习,互相进步!

目录

什么是Vue?

创建Vue实例

插值表达式 {{}}

语法

错误用法

Vue中的常用指令

v-text(类似innerText)

v-html(类似 innerHTML)

v-show

v-if

v-else 和 v-else-if

v-on

v-bind

v-for

v-on


什么是Vue?

Vue 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。Vue 是一个框架,也是一个生态。其功能覆盖了大部分前端开发常见的需求。

创建Vue实例

核心步骤(4步):

  1. 准备容器

  2. 引包(官网) — 开发版本/生产版本

  3. 创建Vue实例 new Vue()

  4. 指定配置项,渲染数据

    1. el:指定挂载点

    2. data提供数据

<div id="app">{{ message }}
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {message: 'hello world'}})
</script>

插值表达式 {{}}

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

我们可以用插值表达式渲染出Vue提供的数据

语法

<h3>{{title}}<h3><p>{{nickName.toUpperCase()}}</p><p>{{age >= 18 ? '成年':'未成年'}}</p><p>{{obj.name}}</p><p>{{fn()}}</p>

错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错2.支持的是表达式,而非语句,比如:if   for ...
<p>{{if}}</p>3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)
<p title="{{username}}">我是P标签</p>

Vue中的常用指令

概念:指令(Directives)是 Vue 提供的带有 v- 前缀 的 特殊 标签属性

为啥要学:提高程序员操作 DOM 的效率。

vue 中的指令按照不同的用途可以分为如下 6 大类:

  • 内容渲染指令(v-html、v-text)

  • 条件渲染指令(v-show、v-if、v-else、v-else-if)

  • 事件绑定指令(v-on)

  • 属性绑定指令 (v-bind)

  • 双向绑定指令(v-model)

  • 列表渲染指令(v-for)

  • v-text(类似innerText)

    • 使用语法:<p v-text="uname">hello</p>,意思是将 uame 值渲染到 p 标签中

    • 类似 innerText,使用该语法,会覆盖 p 标签原有内容

  • v-html(类似 innerHTML)

    • 使用语法:<p v-html="intro">hello</p>,意思是将 intro 值渲染到 p 标签中

    • 类似 innerHTML,使用该语法,会覆盖 p 标签原有内容

    • 类似 innerHTML,使用该语法,能够将HTML标签的样式呈现出来。

  • v-show

  • 作用: 控制元素显示隐藏

  • 语法: v-show = "表达式" 表达式值为 true 显示, false 隐藏

  • 原理: 切换 display:none 控制显示隐藏

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

  • v-if

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

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

  • 原理: 基于条件判断,是否创建 或 移除元素节点

  • 场景: 要么显示,要么隐藏,不频繁切换的场景

  • v-else 和 v-else-if

    1. 作用:辅助v-if进行判断渲染

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

    3. 需要紧接着v-if使用

此语法也可以遍历对象和数字

作用:表单元素(input、radio、select)使用,双向绑定数据,可以快速 获取设置 表单元素内容

语法:v-model="变量"

  • v-on

  • 使用Vue时,如需为DOM注册事件,及其的简单,语法如下:

  • <button v-on:事件名="内联语句">按钮</button>

  • <button v-on:事件名="处理函数">按钮</button>

  • <button v-on:事件名="处理函数(实参)">按钮</button>

  • v-on: 简写为 @

  • 事件处理函数

    注意:

    • 事件处理函数应该写到一个跟data同级的配置项(methods)中

    • methods中的函数内部的this都指向Vue实例

    • v-bind

    • 作用:动态设置html的标签属性 比如:src、url、title

    • 语法v-bind:属性名=“表达式”

    • v-bind:可以简写成 => :

    • 比如,有一个图片,它的 src 属性值,是一个图片地址。这个地址在数据 data 中存储。

      则可以这样设置属性值:

    • <img v-bind:src="url" />

    • <img :src="url" /> (v-bind可以省略)

  • v-for

  • v-for 指令需要使用 (item, index) in arr 形式的特殊语法,其中:

  • item 是数组中的每一项

  • index 是每一项的索引,不需要可以省略

  • v-on

  • 所谓双向绑定就是:

  • 数据改变后,呈现的页面结果会更新

  • 页面结果更新后,数据也会随之而变

❤️❤️❤️小郑是普通学生水平,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄

💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍

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

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

相关文章

WEB前端03-CSS3基础

CSS3基础 1.CSS基本概念 CSS是Cascading Style Sheets&#xff08;层叠样式表&#xff09;的缩写&#xff0c;它是一种对Web文档添加样式的简单机制&#xff0c;是一种表现HTML或XML等文件外观样式的计算机语言&#xff0c;是一种网页排版和布局设计的技术。 CSS的特点 纯C…

在HTML中使用JavaScript

在 HTML 中使用 JavaScript 有以下几种常见的方式&#xff1a; 一、内联脚本 &#xff08;一&#xff09;基本语法 内联脚本是将 JavaScript 代码直接嵌入到 HTML 文件的 <script> 标签内部。 <!DOCTYPE html> <html lang"en"> <head> <…

R语言安装devtools包失败过程总结

R语言安装devtools包时&#xff0c;遇到usethis包总是安装失败&#xff0c;现总结如下方法&#xff0c;亲测可有效 一、usethis包及cli包安装问题 首先&#xff0c;Install.packages("usethis")出现如下错误&#xff0c;定位到是这个cli包出现问题 载入需要的程辑包…

深层神经网络示例

输出层采用sigmoid&#xff0c;隐藏层采用tanh import numpy as np # 设置一些画图相关的参数 import matplotlib.pyplot as pltplt.rcParams[figure.figsize] (5.0, 4.0) plt.rcParams[image.interpolation] nearest plt.rcParams[image.cmap] gray from project_03.utils…

Oracle 19c和23ai都有哪些变化

Oracle版本新特性 Oracle 19c和Oracle 23ai&#xff0c;最为官方长期支持的两个版本&#xff0c;一个是目前生产环境使用最多的新版本&#xff08;笔者运维环境&#xff09;&#xff0c;一个是目前官方发布的最新版本数据库&#xff0c;两者在各自版本的功能和特性方面都有着比…

护网HW面试—apacheiisnginx中间件解析漏洞篇

参考&#xff1a;Apache/IIS/Nginx中间件解析漏洞_分别说出iis、apache、nginx解析漏洞原理-CSDN博客 一、apache 1、Apache HTTPD 换行解析漏洞 Apache HTTPD是一款HTTP服务器&#xff0c;它可以通过mod_php来运行PHP网页。 其2.4.0~2.4.29版本中存在一个解析漏洞。 在解…

永磁同步电机控制算法--基于 SVM 的无磁链环 DTC

永磁同步电机无磁链环 DTC 通过控制定子磁链交轴分量来直接控制转矩&#xff0c;不再要求控制磁链幅值恒定&#xff0c;省去了传统 DTC 中的磁链环&#xff0c;不仅转矩响应更快&#xff0c;有效抑制了转矩脉动&#xff0c;而且提高了电机功率因数。但无磁链环 DTC 方案仍采用传…

TCPDump协议分析工具

TCPDump协议分析工具 TCPDump是一个强大的命令行工具&#xff0c;用于捕获和分析网络数据包。它能够实时监控和记录网络流量&#xff0c;帮助网络管理员和安全专家排查网络问题、分析流量和检测网络攻击。以下是TCPDump的详细介绍&#xff0c;包括其安装、基本使用、过滤规则和…

YOWOv2(yowov2)动作识别+Fastreid身份识别 详细安装与实现

首先yowov2是一款简单且实时的时空动作检测方案&#xff0c;fastreid是行人重识别&#xff08;身份识别&#xff09; yowov2介绍链接直达fastreid链接直达为时空动作检测任务设计实时框架仍然是一个挑战。YOWOv2 提出了一种新颖的实时动作检测框架&#xff0c;利用三维骨干和二…

Python|OpenCV-实现人物的姿态识别检测以及实时计数(18)

前言 本文是该专栏的第20篇,后面将持续分享OpenCV计算机视觉的干货知识,记得关注。 本文将基于OpenCV以及MediaPipe,来实现视频与摄像头中的人物,进行仰卧起坐的动态检测以及实时计数(本文进行人物的姿态识别,仅以人物的仰卧起坐的动态动作为例)。 具体细节部分以及完…

【Js】导出 HTML 为 Word 文档

在 Web 开发中&#xff0c;有时我们希望用户能够将网页上的 HTML 内容保存为 Word 文档&#xff0c;以便更方便地分享和打印。 html样式 word文档 工具准备 1、 html-docx-js - npm html-docx-js是一个 JavaScript 库&#xff0c;用于将 HTML 内容转换为 Word 文档的格式。它…

在Linux系统实现瑞芯微RK3588部署rknntoolkit2进行模型转换

一、首先要先安装一个虚拟的环境 安装Miniconda包 Miniconda的官网链接:Minidonda官网 下载好放在要操作的linux系统,我用的是远程服务器的linux系统,我放在whl这个文件夹里面,这个文件夹是我自己创建的 运行安装 安装的操作都是yes就可以了 检查是否安装成功,输入下面…

【CEEMDAN-VMD-CNN-LSTM】双重分解+卷积神经网络+长短期记忆神经网络多变量回归预测,多变量输入模型

双重分解&#xff08;Dual Decomposition&#xff09;、卷积神经网络&#xff08;Convolutional Neural Network&#xff0c;CNN&#xff09;和长短期记忆神经网络&#xff08;Long Short-Term Memory&#xff0c;LSTM&#xff09;结合的多变量回归预测需要详细的实现和数据情况…

【香菇带你学Linux】Linux环境下gcc编译安装【建议收藏】

文章目录 0. 前言1. 安装前准备工作1.1 创建weihu用户1.2 安装依赖包1.2.1 安装 GMP1.2.2 安装MPFR1.2.3 安装MPC 2. gcc10.0.1版本安装3. 报错解决3. 1. wget下载报错 4. 参考文档 0. 前言 gcc&#xff08;GNU Compiler Collection&#xff09;是GNU项目的一部分&#xff0c;…

在unity的ECS框架中SystemAPI.Time.DeltaTime的值如何确定

在Unity的ECS&#xff08;Entity Component System&#xff09;框架中&#xff0c;SystemAPI.Time.DeltaTime 是一个用于获取上一帧所花费时间的值。这个值是通过Unity的 Time.deltaTime 来确定的&#xff0c;但在ECS框架中&#xff0c;它被封装在 SystemAPI.Time 命名空间下&a…

埋点系统如何统计用户的平均停留时长?

Hello&#xff0c;大家好&#xff0c;欢迎使用Webfunny前端监控和埋点系统。 今天&#xff0c;我们将介绍webfunny的埋点系统如何统计用户的平均停留时长 一、页面beforeLeave事件 当你页面离开的时候&#xff0c;会触发一个心跳检测&#xff0c;但是这个可能不是100%触发&am…

C# Static的一些理解

静态类 一、静态类   静态类与非静态类的重要区别在于静态类不能实例化&#xff0c;也就是说&#xff0c;不能使用 new 关键字创建静态类类型的变量。在声明一个类时使用static关键字&#xff0c;具有两个方面的意义&#xff1a;首先&#xff0c;它防止程序员写代码来实例化…

各向异性含水层中地下水三维流基本微分方程的推导(二)

各向异性含水层中地下水三维流基本微分方程的推导 参考文献&#xff1a; [1] 刘欣怡,付小莉.论连续性方程的推导及几种形式转换的方法[J].力学与实践,2023,45(02):469-474. 书接上回&#xff1a; 我们能得到三个方向的流入流出平衡方程&#xff1a; ∂ ρ u x ∂ x d x d y d…

Linux 下 redis 集群部署

目录 1. redis下载 2. 环境准备 3. redis部署 3.1 修改系统配置文件 3.2 开放端口 3.3 安装 redis 3.4 验证 本文将以三台服务器为例&#xff0c;介绍在 linux 系统下redis的部署方式。 1. redis下载 下载地址&#xff1a;Index of /releases/ 选择需要的介质下载&am…

MUX-VLAN基本概述

1&#xff09;技术背景&#xff1a; 在企业网络中&#xff0c;各个部门之间网络需要相互独立&#xff0c;通常使用VLAN技术可以实现这一要求。如果企业规模很大&#xff0c;且拥有大量的合作伙伴&#xff0c;要求各个合作伙伴之间能够访问公司服务器&#xff0c;但是不能相互访…