大河之犬的博客

全局状态管理是一个大型系统不可避免的存在，因为经常有一些需要全局共享的信息需要存储，比如用户信息，所以 PRO 中内置了 Pinia 用于信息共享。权限控制是中后台场景非常常见的基础功能，在 v2.2.0 将权限控制功能集成至 Arco Design Pro。设置路由守卫，在路由守卫中对用户的页面进出进行管理。例如：（这两个子路径，一个权限为所有用户均可访问，一个为只允许admin用户访问）针对菜单及路由权限控制，可以在 路由配置项 中，对某项增加。如下，将有权限的角色类型放置在数组中即可。

路由通常都和菜单绑定在一起，为了减少维护的量，Arco直接通过路由表生成了菜单。中新增一个 kaka文件夹，并在其中新增。访问网站测试，新的导航已经添加成功啦！现在我们来解析一下仪表盘的路由代码（首先，需要先了解一下路由表的配置。en-US.ts：（英文支持）zh-CN.ts：（中文支持）最后，在国际化语言包中引入：（

开始开发之前，请确认本地环境中安装好了。看到以下输出就是创建成功了。访问地址，运行成功！

【代码】ArkUI框架，条件渲染，生命周期。

Flex组件用于创建弹性布局，开发者可以通过Flex的接口创建容器组件，进而对容器内的其他元素进行弹性布局，例如：使三个元素在容器内水平居中，垂直等间隔分散。我们需要拿到用户输入的数据，以向后端发送一个登录请求，这就需要父子组件的双向绑定机制。Previewer的页面无法进行实时的交互操作，所以我们要学会使用真机进行模拟。例如：如下的布局代码分别表示：（垂直排列，水平居中，垂直居中）自定义一个组件内容：（myInput.ets）

接下来需要填写项目信息并且创建项目（创建项目完成后，会加载一段时间的配置信息，耐心等待即可）第一次使用需要安装一些 SDK并且有用户协议，一路同意即可。点击pages页面里面的。

最接近原生APP体验的高性能前端框架追求性能体验，是开始启动MUI项目的首要目标，轻量必然是重要特征；MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K鉴于之前的很多前端框架（特别是响应式布局的框架），UI控件看起来太像网页，没有原生感觉，因此追求原生UI感觉也是我们的重要目标MUI以iOS平台UI为基础，补充部分Android平台特有的UI控件MUI官方文档。

下载如图所示版本：（请根据自己的系统环境选择）修改用户Path变量中的npm为自己的。输入如下命令进行模块的全局安装。下载完成后傻瓜式安装即可。输出版本则代表安装成功。

Vue 版本推荐使用 axios 来完成 ajax 请求。Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。CDN引入：

是一个组件，该组件用于设置一个导航链接，切换不同 HTML 内容。to 属性为目标地址， 即要显示的内容。// 4. 内部提供了 history 模式的实现。，及在鼠标移动到 Router Link 1 上时导航的 HTML 内容会发生改变。可以是一个字符串或是一个包含字符串的数组。Vue 路由允许我们通过不同的 URL 访问不同的内容。// 2. 定义一些路由，每个路由都需要映射到一个组件。类指定何种标签，同样它还是会监听点击，触发导航。// 1. 定义路由组件，也可以从其他文件导入。

除了默认设置的核心指令(v-model和v-show), Vue 也允许注册自定义指令。下面我们注册一个全局指令v-focus, 该指令的功能是在页面加载时，元素获得焦点：// 当被绑定的元素挂载到 DOM 中时…… mounted(el) {// 聚焦元素 el . focus() } }) app . mount('#app') // 当被绑定的元素挂载到 DOM 中时…… mounted(el) {

我们可以用v-model指令在表单及等元素上创建双向数据绑定。v-model会根据控件类型自动选取正确的方法来更新元素。v-model会忽略所有表单元素的属性的初始值，使用的是data选项中声明初始值。v-modeltext 和 textarea 元素使用 value 属性和 input 事件；checkbox 和 radio 使用 checked 属性和 change 事件；select 字段将 value 作为属性并将 change 作为事件。

但是在通常情况下，我们需要使用一个方法来调用 JavaScript 方法。指令来监听 DOM 事件，从而执行 JavaScript 代码。提供了事件修饰符来处理 DOM 事件细节。添加了事件修饰符，此按钮只能点击一次。可以接收一个定义的方法来调用。"第一个事件处理器逻辑...""第二个事件处理器逻辑..."表示的指令后缀来调用修饰符。Vue.js 通过由点。

当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。此元素上的现有 class 将不会被覆盖。实例中将 isActive 设置为 true 显示了一个蓝色的 div 块，如果设置为 false 则不显示。在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用。直接设置样式，可以简写为。// 创建一个Vue 应用。我们可以把一个数组传给。

以上代码中我们创建了两个输入框，data 属性中， kilometers 和 meters 初始值都为 0。watch 对象创建了 data 对象的两个监控方法： kilometers 和 meters。当我们再输入框输入数据时，watch 会实时监听数据变化并改变自身的值。// 这个回调将在 vm.kilometers 改变后调用。// 判断是否是当前输入框。// 判断是否是当前输入框。"，修改后值为: "

属性默认只有 getter ，不过在需要时你也可以提供一个 setter。是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。，在重新渲染的时候，函数总会重新调用执行。计算属性在处理一些复杂逻辑时是很有用的。，效果上两个都是一样的，但是。

Vue3条件与循环

组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。指令用于在表达式的值改变时，将某些行为应用到 DOM 上。指令将该元素的 href 属性与表达式 url 的值绑定。

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

可扩展标记语言（英语：Extensible Markup Language，简称：XML）是一种标记语言，是从标准通用标记语言（SGML）中简化修改出来的。它主要用到的有可扩展标记语言、可扩展样式语言（XSL）、XBRL和XPath等。XML 被设计用来传输和存储数据，不用于表现和展示数据，HTML 则用来表现数据。HTML 旨在显示信息，而 XML 旨在传输信息。

如果你需要存储 Date 对象，需要将其转换为字符串。方法将 JavaScript 对象转换为字符串。方法将数据转换为 JavaScript 对象。之后再将字符串转换为 Date 对象。JSON 不能存储 Date 对象。

document对象其实是window对象下的一个子对象，它操作的是HTML文档里所有的内容。实际上，浏览器每次打开一个窗口，就会为这个窗口生成一个window对象，并且会为这个窗口内部的页面（即HTML文档）自动生成一个document对象，这样我们就可以通过document对象来操作页面中所有的元素了window是浏览器为每个窗口创建的对象。通过window对象，我们可以操作窗口，如打开窗口、关闭窗口、浏览器版本等，这些操作又被统称为“BOM（浏览器对象模型）”

对于window对象，无论是它的属性，还是方法，都可以省略window前缀。如window.alert()可以简写为alert(),window.open()可以简写为open()，甚至window.document.getElementById()可以简写为document.getElementById()，以此类推。在JavaScript中，窗口常见的操作有两种：一种是“打开窗口”，另一种是“关闭窗口”。在线时钟中，秒针每隔一秒转一次。输入内容，然后点击对话框中的【确定】按钮，就会返回刚刚输入的文本。

每次调用一个事件的时候，JavaScript都会默认给这个事件函数加上一个隐藏的参数，这个参数就是event对象。只可以解除“事件监听器”添加的事件，不可以解除“事件处理器”添加的事件。在事件操作中，可以这样理解：哪个DOM对象（元素节点）调用了this所在的函数，那么this指向的就是哪个DOM对象。如果我们要给元素添加一个事件，一般会通过操作HTML属性的方式来实现，这种方式其实也叫作“事件处理器”当一个事件发生的时候，这个事件有关的详细信息都会临时保存到一个指定的地方，这个地方就是。

在这个例子中，浏览器从上到下解析到window.onload时，就会先不解析window.onload里面的代码，而是继续往下解析，直到把整个HTML文档解析完后才会回去执行window.onload里面的代码。在这个例子中，我们使用div元素模拟出一个按钮，并且为它添加了单击事件。选取文本后点击鼠标右键，【复制】这个选项还可以点击，但实际上，点击【复制】选项后再粘贴，是粘贴不出内容来的。实际开发中，我们在使用搜索框的时候，每次点击搜索框，它就自动帮我们把文本框内的文本全选中了，此时就用到了。

属性很方便地获取和设置一个元素的“内部元素”，也可以使用。在JavaScript中，我们可以使用。属性获取和设置一个元素的“内部文本”获取的是元素内部所有的内容，而。获取的仅仅是文本内容。

DOM遍历，可以简单地理解为“查找元素”。举个例子，如果你使用等方法获取一个元素，然后又想得到该元素的父元素、子元素，甚至是下一个兄弟元素，这种操作涉及的就是DOM遍历。

使用style对象来设置一个CSS属性的值，其实就是在元素的style属性中添加样式，这种方式设置的是“行内样式”需要注意的是，这里的属性名使用的是“骆驼峰型”的CSS属性名。在JavaScript中，我们可以使用cssText属性来同时设置多个CSS属性。在JavaScript中，想要设置一个CSS属性的值，有两种方式可以实现。obj表示DOM对象，attr表示CSS属性名，采用的同样是“骆驼峰”型。语法：obj表示DOM对象，cssText的值是一个字符串。应该写成borderBottomWidth。

HTML属性操作，指的是使用JavaScript来操作一个元素的HTML属性。如下面的input元素，HTML属性操作指的就是操作它的id、type、value等< input id = " btn " type = " button " value = " 提交 " />< input id = " btn " type = " button " value = " 提交 " />< input id = " btn " type = " button " value = " 提交 " />

参数obj表示被复制的元素，而参数bool是一个布尔值，取值如下。A表示父元素，new表示新子元素，old表示旧子元素。A表示父元素，B表示父元素内部的某个子元素。在JavaScript中，我们可以使用。在JavaScript中，我们可以使用。在JavaScript中，我们可以使用。//根据2个文本框的值来创建一个新节点。方法来删除父元素下的某个子元素。//获取body中的第1个元素。案例：删除最后一个子元素。//删除最后一个子元素。

所谓的“动态DOM”，指的是使用JavaScript创建的元素。来创建一个文本节点，然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中，这时才会显示出内容。动态创建了一个strong元素，但是此时strong元素是没有内容的。//将strong元素插入div元素（这个div在HTML已经存在）方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素，B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”

DOM，全称是“Document Object Model（文档对象模型）”，它是由W3C定义的一个标准。在实际开发中，我们有时候需要实现这样的效果：鼠标移到元素上改变元素的颜色，或者动态添加新元素及删除元素等。这些效果就是通过DOM提供的方法来实现的。简单地说，DOM里面有很多方法，我们可以通过它提供的方法来操作一个页面中的某个元素，如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。DOM采用的是“树形结构”，用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。对于上

CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动，能够创建多种高级而精确的布局。其中，定位布局共有4种方式。固定定位（fixed相对定位（relative绝对定位（absolute静态定位（static。

由于box1设置为左浮动，box1变成了浮动元素，因此此时box1的宽度不再延伸，而是由内容宽度决定其宽度。在实际开发中，我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动，往往都是直截了当地使用“clear:both”来把所有浮动清除，既简单又省事。浮动是CSS布局的最佳利器，我们可以通过浮动来灵活地定位页面元素，以达到布局网页的目的。从上图可以看出，如果两个子块都没有设置浮动，由于div是块元素，因此会各自向右延伸，并且自上而下排列。属性来清除浮动带来的影响。

在“CSS盒子模型”理论中，页面中的所有元素都可以看成一个盒子，并且占据着一定的页面空间一个页面由很多这样的盒子组成，这些盒子之间会互相影响，因此掌握盒子模型需要从两个方面来理解：一是理解单独一个盒子的内部结构（往往是padding），二是理解多个盒子之间的相互关系（往往是margincontent（内容）、padding（内边距）、margin（外边距）和border（边框）1、内容区内容区有3个属性：width、height和overflow。

除了使用浏览器自带的鼠标样式，我们还可以使用cursor属性来自定义鼠标样式cursor:url(图片地址),属性值;这个“图片地址”是鼠标图片地址，其中鼠标图片后缀名一般都是“.cur”，我们可以使用一些小软件来制作这个“属性值”一般只会用到3个，分别是default、pointer和text。

颜色值有两种，一种是“关键字”，另外一种是“十六进制RGB值”。其中，关键字指的是颜色的英文名称，如red、green、blue等。属性取值为“关键字”时，也要同时设置水平方向和垂直方向的值，只不过这两个值使用关键字来代替而已。”表示背景图片距离该元素左上角的水平方向距离为12px，垂直方向距离为24px。我们在本地浏览器中拖动右边的滚动条，可以发现，背景图片在页面固定不动了。属性取值为“像素值”时，要同时设置水平方向和垂直方向的数值。属性常用取值有两种：一种是“像素值”，另外一种是“关键字”

下面详细介绍一下`border-width、border-style`以及`border-color`属性

去除a元素的下划线，这个技巧我们在实际开发中会大量用到。主要是因为超链接默认样式不太美观，极少网站会使用它的默认样式。属性来定义文本的修饰效果（下划线、中划线、顶划线）属性来控制文本在水平方向上的对齐方式。属性来定义两个单词之间的距离。属性来定义p元素的首行缩进。属性来控制字与字之间的距离。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。在CSS中，我们可以使用。属性来控制一行文本的高度。在CSS中，我们可以使用。在CSS中，我们可以使用。