Манго нектар-优快云博客

数据绑定的一个常见需求场景是操纵元素的 CSS stye列表，因为 se是 attribute，我们可以和其他attribute 一样使用 vbind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 sye的 vtind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组.

2024-10-11 14:36:45 202

原创 vue Class绑定

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表，因为 class 是 attribute，我们可以和其他attribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 cass 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组。

2024-10-10 17:10:42 410

原创 vue 计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。我们可以利用计算属性computed 函数来优化上述代码。

2024-10-10 16:52:04 240

变更方法，顾名思义，就是会对调用它们的原数组进行变更。相对地，也有一些不可变(immutable)方法，例如filter()，concat（) 和 slice()，这些都不会更改原数组，而总是返回一个新数组。当遇到的是非变更方法时，我们需要将旧的数组替换为新的。Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。点击按钮时页面没有发生变化，但数组已经发生改变，可以在控制台上输出新的数组。如果想要在页面上显示可以重新赋值。

2024-10-10 16:42:19 389

原创 vue 事件修饰符

在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好为解决这一问题，Vue 为 v-on 提供了事件修饰符，常用有以下几个:具体参考：事件处理 | Vue.js (vuejs.org)

2024-10-10 16:26:40 322

原创 vue 事件传参

事件参数可以获取 event 对象和通过事件传递数据。

2024-10-10 09:09:28 361

原创 vue 事件处理

我们可以使用 v-on 指令 (简写为 @)来监听 DOM 事件，并在事件触发时执行对应的JavaScript。用法:v-on:click="methodName"或 @click="handler"。

2024-10-10 08:52:09 641

原创 vue 列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for指令的值需要使用 item in items 形式的特殊语法。其中 items 是源数据的数组，而 item 是迭代项的别名。

2024-10-10 08:39:33 667

原创 vue 条件渲染

总的来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。如果在运行时绑定条件很少改变，则v-if 会更合适。v.-if也是惰性的:如果在初次渲染时条件值为 false，则不会做任何事。相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有CSS display 属性会被切换。顾名思义，v-else-if 提供的是相应于 v-if 的“else-if 区块”。v-if是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

2024-10-09 22:14:06 482

原创 vue 的属性绑定

双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令。注意：v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicid 属性保持一致。如果绑定的值是 null 或者undefined ，那么该 attribute 将会从渲染的元素上移除。由于v-bind比较常用所以可以简写，将v-bind省略只留下冒号。

2024-10-09 21:59:43 555

原创 vue 模板语法

Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上。所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML解析器解析。

2024-10-09 21:41:44 504

原创初识Vue

Vue (发音为 /vju:/，类似 view)是一款用于构建用户界面的JavaScript 框架。它基于标准 HTML、CSS 和JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。Vue 是一个框架，也是一个生态。其功能覆盖了大部分前端开发常见的需求。但 Web 世界是十分多样化的,不同的开发者在 Web 上构建的东西可能在形式和规模上会有很大的不同。

2024-10-09 21:20:29 468

原创 JavaScript 数组方法

数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始)，整个数组用方括号表示。两端的方括号是数组的标志。除了在定义时赋值，数组也可以先定义后赋值。任何类型的数据都可以放入数组,如果数组的元素还是数组，就形成了多维数组。

2024-10-03 23:50:06 1149

原创 JavaScript 字符串方法

字符串就是零个或多个排在一起的字符，单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。双引号字符串内部使用双引号，也是如此注意：字符串默认只能写在一行内，分成多行将会报错。

2024-10-02 22:22:54 1614

原创 JavaScript break与continue语句

break语句和continue语句都具有跳转作用，可以让代码不按既有的顺序执行。

2024-10-02 21:22:45 345

原创 JavaScript while循环语句

While语句包括一个循环条件和一段代码块，只要条件为真，就不断循环执行代码块。注意：所有的for循环都可以改写为while循环。

2024-10-02 21:13:54 385

原创 JavaScript for循环语句

循环语句用于重复执行某个操作，for语句就是循环命令，可以指定循环的起点、终点和终止条件。布尔表达式(test):每轮循环开始时，都要执行这个条件表达式，只有值为真，才继续进行循环。初始化表达式(initialize):确定循环变量的初始值，只在循环开始时执行一次。迭代因子(increment):每轮循环的最后一个操作，通常用来递增循环变量。for语句后面的括号里面，有三个表达式。

2024-10-02 21:01:40 622

原创 JavaScript的条件语句

if结构先判断一个表达式的布尔值，然后根据布尔值的真伪，执行不同的语句。所谓布尔值，指的是JavaScript 的两个特殊值，true表示真，false表示伪。：注意，if后面的表达式之中，不要混淆赋值表达式(=)、严格相等运算符(===)和相等运算符(==)。注意：需要注意的是，每个case代码块内部的break语句不能少，否则会接下去执行下一个case代码块，而不是跳出switch结构。，也可以用于逻辑判断.if代码块后面，还可以跟一个else代码块，表示不满足条件时，所要执行的代码。

2024-09-26 23:18:12 925

原创 JavaScript 算数运算符

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作;放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。比较运算符用于比较两个值的大小，然后返回一个布尔值，表示是否满足指定的条件。+=：x+=y 等同于 x=x+y。-=：x-=y 等同于 x=x-y。*=：x*=y 等同于 x=x*y。/=：x/=y 等同于 x=x/y。%=：x%=y 等同于 x=x%y。==：严格不相等运算符。===：严格相等运算符。<=：小于等于运算符。

2024-09-25 17:01:15 883

原创 JavaScript typeof运算符

在js中可以typeof来做到确定一个值到底是什么类型。

2024-09-25 15:49:33 805

原创 JavaScript数据类型

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种，分别是数值、字符串、布尔值、null、对象和undefined。(ES6 又新增了第七种 Symbol 类型的值和第八种 BigInt类型）。对象:因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于null和undifined 一般会将它们看作特殊的值。原始数据类型为数值、字符串和布尔值。

2024-09-25 15:36:20 445

原创 JavaScript的注释与常见输出方式

源码中注释是不被引擎所解释的，它的作用是对代码进行解释。Javascript 提供两种注释的写法:一种是单行注释，用//起头;另一种是多行注释，放在/*和*/之间。-- -->标签来实现。这种输出方式会在页面上出现弹框。这种输出方式会在页面上显示输出。这种输出方式会在控制台输出内容。

2024-09-23 23:22:48 284

原创 JavaScript引入到文件的三种方式

首先命名一个由.js为后缀的文件，然后在HTML文件中使用Script标签中的src属性引入。利用script标签，将js文件引入到HTML文件中。使用Script标签中的src属性引入网页地址。

2024-09-23 23:02:38 698

原创 JavaScript的语句与标识符

标识符(identifier)指的是用来识别各种值的合法名称。最常见的标识符就是变量名标识符是由:字母、美元符号($)、下划线( )和数字组成，其中数字不能开头。JavaScript 程序的单位是行(line)，也就是一行一行地执行。一般情况下，每一行就是一个语句，语句以分号结尾，一个分号就表示一个语句结束。javaScript有一些保留字，不能用作标识符:arguments、break、case、catch、class、const.注意：中文是合法的标识符，可以用作变量名(不推荐)

2024-09-23 22:50:16 297

原创初识JavaScript

JavaScript 是一种轻量级的脚本语言。所谓“脚本语言"，指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。JavaScript 是一种嵌入式(embedded)语言它本身提供的核心语法不算很多。

2024-09-23 22:44:30 441

原创 CSS文档流以及脱离文档流的方法

脱离文档流之后，元素相当于在页面上增加了一个浮层来放置内容，此时可以理解为由两层页面，底层是原页面，上层是脱离文档流的页面。注意：设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。设置元素的堆叠顺序，拥有跟高堆叠顺序的元素总是处于堆叠顺数较低的元素前面。当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动。float属性定义了元素浮动的方向，任何元素都可以浮动。浮动元素会造成父元素高度塌陷，后续元素会受到影响。

2024-09-22 21:28:51 1130

原创 CSS的弹性盒子模型（Flex box)

弹性盒子模型是CSS3的一种新的布局模式，弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保拥有合适的布局方式，引入弹性盒子模型的目的时提供更加有效的方式来对一个容器中的子元素进行排列，对齐和分配空白空间。弹性盒子由弹性容器(Flex container) 和弹性子元素(Flex item）组成。弹性容器通过设置display属性的值为flex将其定义为弹性容器，弹性容器包含了一个或多个弹性子元素。注意：弹性容器外及弹性子元素内是正常渲染的，弹性盒子只是定义了弹性子元素如何在弹性容器内布局。

2024-09-22 00:47:50 1354 1

原创 CSS的盒子模型（Box Model)

所有HTML元素都可以看作盒子，在CSS中盒子模型是用来设计和布局的，CSS盒子模型本质上是一个盒子，分装周围的HTML元素包括：外边距，边框，内边距和实际内容。

2024-09-21 21:10:14 654 1

原创 CSS中的多种关系选择器

选择进更E元素后的F元素，用+号来表示，选择相邻的第一个兄弟元素。选择E元素之后的所有兄弟元素F，用~符号表示。子元素F，对更深一层的元素不起作用，用>符号表示。选择所有被E元素包含的F元素，中间用空格隔开。选择所有作为E元素的。

2024-09-20 17:02:58 649

原创 CSS的表格属性

如果在表的内容中控制空额之间的边框，引用td和th元素和填充属性padding（单位px）。vertical-align属性：设置表格文本垂直对齐方式。text-align属性：设置摆个文本的水平对齐方式。设置表格的边框是否被折叠成一个单一的边框或隔开。规定表格的高度和宽度。规定CSS表格边框。center: 居中。center: 居中。bottom: 居下。

2024-09-20 16:32:06 525

原创 CSS的文本属性

规定添加到文本的修饰，下划线，上划线，删除线等。captialize: 定义每个单词开头大写。规定文本块中首航文本的缩进（单位px）text-decorration属性。left: 文本居左对齐（默认值)line-through: 删除线。uppercase: 定义全部大写。lowercase: 定义全部小写。text-transtorm属性。underline：下划线。overline：上划线。text-indent属性。text-align属性。指定文本的水平对齐方式。right: 居右对齐。

2024-09-20 15:52:06 579

原创 CSS的背景属性

元素的背景是元素的总大小，包括填充和边界（不包括外边距）默认情况下background-image属性放置在元素的左上角，如果图像不够大的话会在垂直和水平方向平铺图像，如果图像大小超过元素大小，从图像的左上角显示元素的那部分。percenbtage: 设置计算新颖位置区域的百分比，第一个为宽，第二个值为高，如果只设置一个值，则另一个值为auto。length: 设置背景图片的宽度和高度，第一个值为宽度，第二个值为高度，如果只设置一个值，则另一个值为auto。设置背景图像的起始位置，器默认值为0%，0%

2024-09-20 15:28:25 704

原创 CSS的字体属性

100~900：定义由细到粗，400等同于默认，700等同于bold。lighter: 定义更细的字符。设置文本的字体大小（单位px)bolder: 定义更粗的字符。font-weight属性。bold: 定义粗体文字。italic: 定义斜体。normal:默认粗细。normal: 默认值。

2024-09-19 17:00:56 733 1

空空如也

空空如也