【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.mzph.cn/pingmian/60444.shtml

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

相关文章

vuepress+vdoing主题搭建自己的知识管理库

在github上建2个仓库 仓库1&#xff0c;文档源文件&#xff08;markdown&#xff09;&#xff0c;可以是私有或公有仓库。 仓库2&#xff0c;build生成的文件&#xff08;发布为github pages&#xff09;&#xff0c;公有仓库。 克隆模板 https://github.com/xugaoyi/vdoing…

开源项目推荐——OpenDroneMap无人机影像数据处理

实景三维作为GIS最火的课题&#xff0c;最近在想做一套自己的三维构建工具&#xff0c;考察了几个开源项目&#xff0c;把自己的搜索过程用csdn记录下来&#xff0c;希望也能帮助到各位同仁。 OpenDroneMap&#xff08;ODM&#xff09;是一个开源项目&#xff0c;旨在处理无人…

深入浅出《钉钉AI》产品体验报告

1. 引言 随着人工智能技术的迅猛发展&#xff0c;企业协同办公领域迎来了新的变革。钉钉作为阿里巴巴集团旗下的企业级通讯与协同办公平台&#xff0c;推出了钉钉AI助理&#xff0c;旨在提高工作效率&#xff0c;优化用户体验。本报告将对钉钉AI助理进行全面的产品体验分析&am…

夹耳开放式耳机好用吗?夹耳开放式耳机推荐

夹耳式耳机作为开放式耳机的一种&#xff0c;在最近几年里深受大家欢迎。它能够受到大家欢迎的原因主要是其不入耳的特性&#xff0c;既有助于保护听力健康&#xff0c;又能让人尽情享受极致的音乐体验。不过&#xff0c;很多小伙伴不知道夹耳式耳机到底好不好用&#xff1f;夹…

opencv(c++)----图像的读取以及显示

opencv(c)----图像的读取以及显示 imread: 作用&#xff1a;读取图像文件并将其加载到 Mat 对象中。参数&#xff1a; 第一个参数是文件路径&#xff0c;可以是相对路径或绝对路径。第二个参数是读取标志&#xff0c;比如 IMREAD_COLOR 表示以彩色模式读取图像。 返回值&#x…

SwiftUI-基础入门

开发OS X 图形应用界面时有三种实现方式&#xff1a;XIB、Storyboard、SwiftUI。Storyboard基于XIB做了优化&#xff0c;但XIB基本被放弃了&#xff0c;而SwiftUI是苹果公司后来开发的一套编程语言&#xff0c;用来平替Objective-C。虽然现在Swift 6 还是有些不完善的地方&…

string------1

文章目录 一. STL1.概念2.版本 二. string类2.1 为什么学习string类2. 标准库中的string类2.2.1 构造&#xff08;7个&#xff09;2.2.2 对string类对象进行“访问和修改”&#xff08;1&#xff09;operator[]&#xff08;2&#xff09;迭代器1.迭代器的使用2.迭代器的价值&am…

css-50 Projects in 50 Days(3)

html <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>旋转页面</title><link rel"sty…

【线性代数\矩阵论】矩阵逆引理证明、应用

矩阵逆引理证明、应用 矩阵求逆引理要解决的问题是&#xff1a;减少矩阵求逆的计算量。已知一个矩阵 A A A及其逆矩阵 A − 1 A^{-1} A−1&#xff0c;当矩阵产生了变化时&#xff0c;例如增加一个扰动 P P P&#xff0c;能不能根据已知的逆矩阵 A − 1 A^{-1} A−1&#xff0c…

1111111111待修改--大流量分析(三)-BUUCTF

总结摘要 题目来来源URL https://buuoj.cn/challenges#%E5%A4%A7%E6%B5%81%E9%87%8F%E5%88%86%E6%9E%90%EF%BC%88%E4%B8%89%EF%BC%89 答题过程 这道题是看大佬写着说查找phpinfo&#xff0c;我现在也不知道为什么能够一下子就定位到这里了 这里先按照phpinfo进行&#xff…

OCRSpace申请free api流程

0.OCRSpace概述 OCR.Space是一款功能强大的在线光学字符识别&#xff08;OCR&#xff09;工具。 格式与语言支持广泛&#xff1a;支持多种图片格式&#xff0c;如 JPG、PNG、GIF、PDF 等作为输入。在语言方面&#xff0c;它支持英语、中文、法语、德语等20多种语言的文字识别…

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

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

C语言 | Leetcode C语言题解之第552题学生出勤记录II

题目&#xff1a; 题解&#xff1a; const int MOD 1000000007;struct Matrix {long mat[6][6];int row, col; };struct Matrix multiply(struct Matrix a, struct Matrix b) {int rows a.row, columns b.col, temp b.row;struct Matrix c;memset(c.mat, 0, sizeof(c.mat)…

【Linux系统编程】第四十六弹---线程同步与生产消费模型深度解析

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】【C详解】【Linux系统编程】 目录 1、Linux线程同步 1.1、同步概念与竞态条件 1.2、条件变量 1.2.1、认识条件变量接口 1.2.2、举例子认识条件变量 1.2.3、…

ML 系列:第 21 节 — 离散概率分布(二项分布)

一、说明 二项分布描述了在固定数量的独立伯努利试验中一定数量的成功的概率&#xff0c;其中每个试验只有两种可能的结果&#xff08;通常标记为成功和失败&#xff09;。 二、探讨伯努利模型 例如&#xff0c;假设您正在抛一枚公平的硬币 &#xff08;其中正面成功&#xff…

godot--自定义边框/选中时样式 StyleBoxTexture

前提知识&#xff1a; stylebox就像一个贴图&#xff0c;把图案贴到控件是。多个stylebox同时生效的话&#xff0c;那当然也有层级之分&#xff0c;上层覆盖下层&#xff08;可以设置透明度来显示下层&#xff09; 关于主题的概念&#xff1a; godot——主题、Theme、StyleB…

PCB+SMT线上报价系统+PCB生产ERP系统自动化拼板模块升级

PCB生产ERP系统的智能拼版技术&#xff0c;是基于PCB前端报价系统获取到的用户或市场人员已录入系统的板子尺寸及set参数等&#xff0c;按照最优原则或利用率最大化原则自动进行计算并输出拼版样式图和板材利用率&#xff0c;提高工程人员效率&#xff0c;减少板材的浪费。覆铜…

去中心化联邦学习与TinyML联合调查:群学习简介

中英文论文标题&#xff1a; 英文标题&#xff1a;A Joint Survey in Decentralized Federated Learning and TinyML: A Brief Introduction to Swarm Learning中文标题&#xff1a;去中心化联邦学习与TinyML联合调查&#xff1a;群学习简介 作者信息&#xff1a; Evangelia…

亚马逊正准备推出其最新的人工智能芯片

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

【学习笔记】数据结构(七)

图 文章目录 图7.1 图的定义和术语7.2 图的存储结构7.2.1 数组表示法 - 邻接矩阵&#xff08;Adjacency Matrix)7.2.2 邻接表 -&#xff08;链式&#xff09;表示法(Adjacency List&#xff09;7.2.3 十字链表(Orthogonal List)7.2.4 邻接多重表(Adjacent MultiList) 7.3 图的遍…