【vue2.0入门】vue基本语法

目录

  • 引言
  • 一、页面动态插值
    • 1. 一般用法
  • 二、计算属性computed
  • 三、动态class、style绑定
  • 四、条件渲染与列表渲染
  • 五、事件处理
  • 六、表单输入绑定
  • 七、总结

引言

本系列教程旨在帮助一些零基础的玩家快速上手前端开发。基于我自学的经验会删减部分使用频率不高的内容,并不代表这部分内容不重要,只是对于初学者来说没必要一开始就学的面面俱到。我希望可以先通过主干内容带大家入门前端,细节技巧性内容,可以在后续的开发工作中自行发现并掌握。

在上一篇 【vue2.0入门】vue单文件组件 中,我们已经对vue单文件各个部分做了解释,本篇将通过几个例子对常用vue语法进行讲解。

详细的vue语法内容参考:vue2语法教程


一、页面动态插值

在template中以 {{ 表达式 }} 的形式,将一个表达式的结果以文本形式动态插入页面标签中。

一般情况下,这个表达式可以是:

  • data中定义的变量
  • props中从父组件传入的属性
  • computed中对data变量或是props属性加工后的表达式

1. 一般用法

仍然使用 HelloWorld 组件,按照 【vue2.0入门】vue单文件组件 中介绍的vue2代码片段初始化一个vue组件模板。

<template><div class="container"><div class="item"><span>父组件传值</span><span>{{ msg }}</span></div><div class="item"><span>系统内存</span><span>{{ memorySize }} B</span></div><div class="item"><span>系统内存格式化方式1:</span><span>{{ (memorySize / 1024 / 1024 / 1024).toFixed(2) }} GB</span></div><div class="item"><span>系统内存格式化方式2:</span><span>{{ memorySizeFormat }} GB</span></div><div class="item"><span>引用类型属性为空:</span><span>{{ sysInfo.cpu || "AMD" }} </span></div><div class="item"><span>引用类型属性不存在:</span><span>{{ sysInfo.gpu || "NVIDIA" }} </span></div></div>
</template><script>
export default {props: {msg: {type: String,default: "hello world!",},},data() {return {memorySize: 8589935000,sysInfo: {cpu: "",},};},// 计算属性computed: {memorySizeFormat() {return (this.memorySize / 1024 / 1024 / 1024).toFixed(2);},},
};
// 其他代码
</script>

如上代码中:

  • 系统内存格式化方式1系统内存格式化方式2 的插值我用了两种方式,表达的意思是一样的。插值符号中可以利用变量编写表达式,最后呈现表达式执行结果的字符串形式,当表达式过于复杂时,可以考虑使用computed加工一下变量。computed就像是一个加工车间,输入的是data或是props的变量,输出一个表达式结果。 memorySizeFormat 就表示一条产品线,它等价于 (this.memorySize / 1024 / 1024 / 1024).toFixed(2) 这个生产过程的结果。当前组件的全局都可以通过 this.memorySizeFormat 访问到这个结果。
  • 当需要向template插入的值取自一个 sysInfo 的属性,然而这个属性值为空或是不存在时,可以使用 || 符号添加默认值,使页面位置不为空。

效果如下:

在这里插入图片描述


二、计算属性computed

在页面动态插值部分我们已经展示了computed的基础使用方法。

在一些特殊情况下,computed并不依赖于data变量或是props变量,而是接收一个传入的参数做计算,具体写法如下

  // 计算属性computed: {memorySizeParams(){return (params)=>{return (params / 1024 / 1024 / 1024).toFixed(2);}}},

我们在 template 中可以按照函数传参的方式来调用,这里把 memorySize 作为参数传入函数内部,返回处理后的结果用于页面插值渲染。

    <div class="item"><span>系统内存格式化方式3:</span><span>{{ memorySizeParams(memorySize) }} GB</span></div>

三、动态class、style绑定

class的绑定主要是对一个 自定义class名 做一个是否为 的判断,style的绑定主要是对 css属性名 赋予动态的 属性值

写法上只需要在原有的class和style属性名前加上冒号 : 即可,例如 :class:style 。此时这两个属性的值需要是一个表达式,而不是确定的值。(表达式可以是变量,可以是计算属性的返回值,也可以是通过代码运算后得到的值)

对于class的绑定:

  • 多个类的动态绑定我会采用对象形式,可以在data中设置对象变量,属性名为你需要设置的 class名,属性值为Boolean,用于判断当前class名是否授予这个标签。在style中也要提前编写好对应 class名 的样式类。
  • 你同样可以把这个对象直接搬到标签中,这和你使用data中的对象是等价的。需要要注意的是 双引号 " "单引号 ' ' 的嵌套关系,避免一些报错。
  • 当你需要动态添加单个class类,那可以不加 大括号 {},直接编写表达式(需要该表达式最终返回一个class名)。我这里用了一个 三元运算符 返回一个确定的class名,感兴趣的百度一下这个运算符用法。

对于style的绑定:

  • 和class的区别就是,style的绑定主要是对一个确定css属性赋予动态的值。通过表达式获取一个合规的css属性值。
<template><div class="container"><!-- 动态class --><div class="mainclass" :class="additionalClass">动态class测试</div><divclass="mainclass":class="{ customBg: customStr == 'world', customColor: customNum == 1 }">动态class测试</div><divclass="mainclass":class="customStr == 'world' ? 'customBg' : 'customColor'">动态class测试</div><!-- 动态style --><div class="mainclass" :style="additionalStyle">动态style测试</div><divclass="mainclass":style="{background: customBackground,color: customColor,}">动态style测试</div><div class="mainclass" :style="{ color: customNum == 1 ? 'red' : 'blue' }">动态style测试</div></div>
</template><script>
export default {data() {return {//动态classadditionalClass: {customBg: true,customColor: false,},customNum: 1,customStr: "hello",// 动态styleadditionalStyle: {background: "yellow",color: "blue",},customBackground: "yellow",customColor: "blue",};},};
</script>
<style scoped>
.mainclass {margin-top: 20px;
}.customBg {background: #f8a5d4;
}.customColor {color: #0ade0d;
}
</style>

观察对比开发者工具中标签属性和代码,理解下动态绑定的过程

在这里插入图片描述


四、条件渲染与列表渲染

这两个语法在官网中有着较为详尽的介绍,参考:条件渲染 、列表渲染

本篇针对列表渲染与条件渲染嵌套使用时如何处理。

在这里插入图片描述

这个问题常发生在一些场景中,例如从后端拿到了一组原始数据,数据中有个 A属性 代表该数据是否渲染。我们一般做法是提前根据这个 A属性 对数据进行筛选,然后在进行列表渲染,避免列表渲染和条件渲染同时使用。

举个例子:

<template><div class="container"><!-- 列表渲染 --><div class="mainclass" v-for="item in handleFruits" :key="item.id">{{ item.name }}</div></div>
</template><script>
export default {data() {return {// 列表渲染Fruits: [{ id: 1, name: "苹果", visible: true },{ id: 2, name: "香蕉", visible: false },{ id: 3, name: "橙子", visible: true },{ id: 4, name: "桃子", visible: false },],};},// 计算属性computed: {handleFruits() {return this.Fruits.filter((item) => item.visible);},},};
</script>

五、事件处理

关于vue2的事件处理语法,建议参考:事件处理

本篇介绍一些需要注意的地方:

  • 在官方文档中绑定事件的方法为 v-on: ,日常工作中使用简写方式 @ ,例如:@click
  • 如果你需要在事件处理器中访问原生事件对象,可以使用 $event 关键字作为参数传入调用的方法中。
    <div @click="handleClick($event)">

六、表单输入绑定

关于vue2的表单输入绑定语法,建议参考:表单输入绑定

本篇介绍一些需要注意的地方:

  • 表单输入绑定主要用于需要用户输入信息或者选择信息的标签,主要是这三种: <input><textarea><select>

七、总结

以上即为vue基础语法的内容,建议从官方文档入手,结合本篇介绍的需要注意的点一起学习。

本篇重点:

  • 再次熟悉 表达式 这个概念
  • 了解 computed 的传参用法
  • 掌握列表渲染与条件渲染嵌套使用时的应对方法。
  • vue的一些语法简写

接下来我们将学习vue工程引入第三方库,进行数据获取、路由配置、全局状态管理等。

再接再厉~

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

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

相关文章

【STM32F1】——无线收发模块RF200与串口通信

【STM32F1】——无线收发模块RF200与串口通信 一、简介 本篇主要对调试无线收发模块RF200的过程进行总结&#xff0c;实现了以下功能。 串口普通收发&#xff1a;使用STM32F103C8T6的USART2串口接收中断&#xff0c;实现两个无线收发模块RF200间的通信。 二、RF200介绍 电压…

《TCP/IP网络编程》学习笔记 | Chapter 8:域名及网络地址

《TCP/IP网络编程》学习笔记 | Chapter 8&#xff1a;域名及网络地址 《TCP/IP网络编程》学习笔记 | Chapter 8&#xff1a;域名及网络地址域名系统什么是域名&#xff1f;DNS 服务器IP 地址和域名之间的转换使用域名的必要性利用域名获取 IP 地址利用 IP 地址获取域名 基于 Wi…

前端开发中常用的包管理器(npm、yarn、pnpm、bower、parcel)

文章目录 1. npm (Node Package Manager)2. Yarn (Yarn Package Manager)3. pnpm4. Bower5. Parcel总结 前端开发中常用的包管理器主要有以下几个&#xff1a; 1. npm (Node Package Manager) 简介&#xff1a; npm 是 Node.js 的默认包管理器&#xff0c;也是最广泛使用的包…

HarmonyOS 如何实现传输中的数据加密

文章目录 摘要引言数据传输加密概述选择加密算法和传输协议加密实现方案与 Demo 代码配置 HTTPS/TLSAES 加密的实现代码详解RSA加密的实现代码详解 QA环节总结参考资料 摘要 本文将介绍在 HarmonyOS 应用中如何实现数据传输的加密策略。我们将讨论常见的加密算法&#xff08;如…

ArkTs简单入门案例:简单的图片切换应用界面

在鸿蒙 OS 应用开发的过程中&#xff0c;我们常常需要通过组合各种组件和编写相应的逻辑来实现丰富多样的功能。今天&#xff0c;我就来和大家详细解析一段实现简单图片切换功能的代码&#xff0c;希望能帮助到那些刚接触鸿蒙 OS 应用开发的朋友们。 一、代码导入部分 Entry …

influxDB 时序数据库安装 flux语法 restful接口 nodjsAPI

安装 Install InfluxDB | InfluxDB OSS v2 Documentation Debian和Ubuntu用户可以用apt-get包管理来安装最新版本的InfluxDB。 对于Ubuntu用户&#xff0c;可以用下面的命令添加InfluxDB的仓库&#xff0c;添加之后即可apt-get 安装influxdb2 wget -q https://repos.influx…

丹摩征文活动|丹摩智算平台使用指南

目录 1. 登录平台与工作环境设置1.1 访问与登录1.2 创建或选择项目1.3 初始化项目环境 2. 数据上传与管理2.1 数据上传2.2 数据管理与预处理2.3 数据可视化 3. 模型构建与训练3.1 模型选择3.2 参数配置3.3 模型训练与评估 4. 模型部署与应用4.1 模型部署4.2 接口调用与集成4.3 …

NAT网络工作原理和NAT类型

NAT基本工作流程 通常情况下&#xff0c;某个局域网中&#xff0c;只有路由器的ip是公网的&#xff0c;局域网中的设备都是内网ip&#xff0c;内网ip不具备直接与外部应用通信的能力。 处于内网的设备如何借助NAT来实现访问外网的应用&#xff1f; 对于开启了NAT功能的局域网…

LLMs 如何处理相互矛盾的指令?指令遵循优先级实验

编者按&#xff1a;想象一下&#xff0c;你正在开发一个 AI 助手&#xff0c;突然发现 system message 和用户提示词存在冲突&#xff0c;这时 AI 会听谁的&#xff1f;这种情况不仅困扰着开发者&#xff0c;还可能导致 AI 系统的不稳定和不可预测&#xff0c;影响用户体验和系…

qt QProcess详解

1、概述 QProcess是Qt框架提供的一个类&#xff0c;它用于在应用程序中执行外部进程。QProcess提供了一系列函数来启动、控制和与外部进程进行交互&#xff0c;使得开发者能够在自己的应用程序中集成和调用其他程序或服务。这个类在需要执行系统命令、启动其他应用程序或进行文…

Appium配置2024.11.12

百度得知&#xff1a;谷歌从安卓9之后不再提供真机layout inspector查看&#xff0c;仅用于支持ide编写的app调试用 所以最新版android studio的android sdk目录下已经没有了布局查看工具... windows x64操作系统 小米k30 pro手机 安卓手机 Android 12 第一步&#xff1a…

《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明

参考 《element plus 使用 icon 图标(两种方式)》使用 icon 升级 Vue2 升级 Vue3 项目时&#xff0c;遇到命名时的实心与空心点差异&#xff01; ElementUI&#xff1a; 实心是 el-icon-more空心是 el-icon-more-outline ElementPlus&#xff1a; 实心是 el-icon-more-fill…

WebSocket和HTTP协议的性能比较与选择

WebSocket和HTTP协议的性能比较与选择 引言&#xff1a; 在web应用开发中&#xff0c;无论是实时聊天应用、多人在线游戏还是实时数据传输&#xff0c;网络连接的稳定性和传输效率都是关键要素之一。目前&#xff0c;WebSocket和HTTP是两种常用的网络传输协议&#xff0c;它们…

【数据结构与算法】第11课—数据结构之选择排序和交换排序

文章目录 1. 选择排序1.1 直接选择排序1.2 堆排序 2. 交换排序2.1 冒泡排序2.2 快速排序(找基准值法1----Hoare版本)2.2.1 特殊场景12.2.2 特殊场景22.2.3 代码2.2.4 快速排序的时间复杂度 2.3 快速排序(找基准值法2---挖坑法)2.3.1 特殊情况1处理2.3.2 特殊情况2处理 2.4 快速…

MySQL技巧之跨服务器数据查询:进阶篇-从A数据库复制到B数据库的表中

MySQL技巧之跨服务器数据查询&#xff1a;进阶篇-从A数据库复制到B数据库的表中 基础篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的连接名: MY_ODBC_MYSQ…

UVC 输出视频格式修改和windows下数据分析

文章目录 前言一、UVC MJPEG视频帧描述符1.MJPG视频帧格式示例 二、UVC YUV2、NV12、M420、I420无压缩视频帧描述符GUID1.如YUV2数据参数初始为: 三、UVC Windows下UVC摄像头数据分析总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 项目需要&#…

大数据开发面试宝典

312个问题&#xff0c;问题涵盖广、从自我介绍到大厂实战、19大主题&#xff0c;一网打尽、真正提高面试成功率 一、Linux 1. 说⼀下linux的常⽤命令&#xff1f; 说一些高级命令即可 systemctl 设置系统参数 如&#xff1a;systemctl stop firewalld关闭防火墙 tail / hea…

更改Ubuntu22.04锁屏壁纸

更改Ubuntu22.04锁屏壁纸 sudo apt install gnome-shell-extensions gnome-shell-extension-manager安装Gnome Shell 扩展管理器后&#xff0c;打开“扩展管理器”并使用搜索栏找到“锁屏背景”扩展

GxtWaitCursor:Qt下基于RAII的鼠标等待光标类

有时我们需要以阻塞的方式执行一点耗时的操作&#xff0c;这时需要主窗口光标呈现忙状态&#xff0c;GxtWaitCursor正是为此设计&#xff1b;重载的构造函数&#xff0c;可以让光标呈现忙状态一定时间后自动恢复。 GxtWaitCursor.h #pragma once#include <QObject>// // …

Unity3D实现视频和模型融合效果

系列文章目录 unity工具 文章目录 系列文章目录👉前言👉一、效果展示如下👉二、VideoPlayer播放视频(一)👉2-1、Hieraechy面板右键创建videoPlayer👉2-2、Assets面板右键创建RenderTexture👉2-3、把设置好的RenderTexture拖到videoPlayer里面还有本地视频视频�…