Vue 基础(二):条件渲染与列表渲染
条件渲染v-if写法:
v-if=”表达式” v-else-if=”表达式”v-else=”表达式” 示例:当n为1、2、3时,Angular、React、Vue会分别显示,为0和其他值时,显示的是哈哈。
<div id="root">
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
<div v-if="n === 1">Angular</div>
<div v-else-if="n === 2">React</div>
<div v-else-if="n === 3">Vue</div>
...
Vue 基础(一):入门与模板语法
目录
Vue简介
简单上手
模板语法
数据绑定
el与data的两种写法
Vue中的数据代理
事件处理
计算属性
监视属性
绑定样式
Vue简介 Vue是现代前端开发中非常受欢迎的框架之一,它的以下特点让他不仅在开发体验、更在性能方面表现优异。
渐进式框架 Vue 是渐进式的,我们可以根据需求逐步引入想要的功能。
双向数据绑定 Vue.js 提供了类似于 Angular 的双向数据绑定机制,确保了数据和页面的自动同步。
组件化 Vue.js 是基于组件构建的,我们可以通过创建和复用组件来构建复杂的 UI 界面。每个组件都有其独立的逻辑、样式和视图。
虚拟 DOM Vue.js 使用虚拟 DOM 技术来提高性能。通过对比虚拟 DOM 中的差异,只对真正发生变化的部分进行更新,从而减少不必要的 DOM 操作。
指令系统Vue 提供了一些内置指令(如 v-if、v-for、v-model 等),简化了对 DOM 的操作。
简单上手下载引用 首先需要下载Vue.js,可以在Vue官网下载vue.js以及vu ...
Markdown 基础语法与常用技巧
markdown语法总结一 标题1.=以及-标记我展示的是一级标题=================我展示的是二级标题-----------------
效果:
=标记的一级标题-标记的二级标题2.#标记# 用#标记的一级标题## 用#标记的二级标题### 用#标记的三级标题#### 用#标记的四级标题##### 用#标记的五级标题###### 用#标记的六级标题
效果:
用#标记的一级标题用#标记的二级标题用#标记的三级标题用#标记的四级标题用#标记的五级标题用#标记的六级标题二 字体格式字体*斜体文本*_斜体文本_**粗体文本**__粗体文本__***粗斜体文本***___粗斜体文本___
效果:
斜体文本斜体文本粗体文本粗体文本粗斜体文本粗斜体文本
分割线一行中用三个以上的星号、减号、底线来建立一个分隔线,行内不能有其他东西。也可以在星号或是减号中间插入空格。下面每种写法都可以建立分隔线:
**** * ******- - -----------
效果:
删除线如果段落上的文字要添加删除线,只需要在文字的两端加上两个波浪线 ~~ 即可,实 ...
JavaScript FormData:数据提交与文件上传
一 、简介 我们经常需要向服务器发送数据。而在前端,我们可以使用FormData对象来方便地收集和发送数据。FormData是一个用于构建表单数据的JavaScript对象,可以将数据序列化为键值对的形式,然后发送到服务器。
二、FormData的使用1.创建一个FormData对象const formdata=new FormData()
2.FormData的方法通过输出这个新创建的对象,我们就可以看到这个对象内置的方法
console.log(formdata);
(1)append(key,value)以名值对的形式向对象中添加值。如果key已经存在,后添加的新值将与旧值一起作为集合形式保存。
formdata.append('name','张三')
formdata.append('name','李四')
(2)get(key)获取该name对应的value集合中添加的第一个值。
console.log(formdata.get('name')) ...
Thymeleaf 基础语法与常用表达式
Thymeleaf 的语法简单易懂,类似 HTML,但又具有更强大的功能。我们可以在模板中使用 Thymeleaf 表达式访问后端数据,并将其展示在页面中。此外,它还支持条件判断、循环和模板片段等功能,让页面展示更加灵活。
一、创建模板文件在 HTML 根标签中声明 th 命名空间,即可使用以 th: 开头的 Thymeleaf 属性。
<!DOCTYPE html><html lang="zh-CN" xmlns:th="https://www.thymeleaf.org"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body>&l ...
JavaScript 数组常用方法详解
在 JavaScript 开发中,数组是最常用的数据结构之一。熟练掌握数组方法,不仅能让你更高效地处理数据,还能写出更简洁优雅的代码。本文将系统介绍常用的数组方法及其使用示例与技巧。
push() —— 向数组末尾添加元素用途向数组的末尾添加一个或者多个元素,然后返回新数组的长度。
用法let person = [‘张三’, ‘李四’];console.log(person.push(‘王五’)); // 输出:3,返回新数组的长度console.log(person); // [‘张三’, ‘李四’, ‘王五’]
提示:
push() 会修改原数组。如果希望返回一个新数组,可以使用展开运算符:
const newArr = […person, ‘赵六’];console.log(person); // [‘张三’, ‘李四’, ‘王五’, ‘赵六’]
pop() —— 移除数组末尾元素用途移除数组末尾的元素,并返回该元素的值。
用法let perso ...



