随笔分类 -  前端

模版--v-if、v-show
摘要:v-if 指令用于条件渲染。当v-if 指令的表达式的值为真时,对应的元素会被渲染到DOM中。如果表达式的值为假,该元素则不会被渲染 <div id="app"> <h1 v-if="showMessage">你好,世界!</h1> </div> var app = new Vue({ el: '# 阅读全文
posted @ 2024-01-07 14:39 黑逍逍 阅读(22) 评论(0) 推荐(0)
组件--事件处理
摘要:事件处理分类 内联事件处理:内联事件处理是指直接在 Vue 模板的 HTML 元素上写入 JavaScript 代码来处理事件。这种方式允许你在模板中直接定义事件响应逻辑,而不是在 Vue 实例的 methods 部分。这种方式适用于简单的逻辑,可以避免为了小功能而编写额外的方法 <button @ 阅读全文
posted @ 2024-01-05 00:20 黑逍逍 阅读(51) 评论(0) 推荐(0)
vue书写风格API
摘要:Vue 的组件可以按两种不同的风格书写:选项式 API 和组合式 API。 vue2只支持选项式 API vue3支持两种 选项式 API (Options API) 在 Vue 2 中引入并继续在 Vue 3 中支持的选项式 API,是一种通过声明式选项(如 data, methods, comp 阅读全文
posted @ 2024-01-05 00:14 黑逍逍 阅读(96) 评论(0) 推荐(0)
组件--异步组件
摘要:啊 阅读全文
posted @ 2024-01-04 21:42 黑逍逍 阅读(13) 评论(0) 推荐(0)
组件--依赖注入
摘要:啊 阅读全文
posted @ 2024-01-04 21:42 黑逍逍 阅读(14) 评论(0) 推荐(0)
组件--插槽(用的少)
摘要:插槽(Slot)是一种模板语法,用于让子组件能够接收来自其父组件的 HTML 或组件内容 <slot> 是用来定义组件插槽的,放在子组件,父组件定义的内容会被放到子组件的 <slot> 位置 简单的说:就是你父组件引用了子组件,然后你还想对子组件进行局部更改,在子组件设置上插槽,就能改那了 多个插槽 阅读全文
posted @ 2024-01-04 21:42 黑逍逍 阅读(21) 评论(0) 推荐(0)
组件
摘要:一个.vue 文件就是一个组件,分为根组件和组件 吐槽:vue的官网文档,是我见过最垃圾的,说不明白,让新手很难上手。当我多次再来看的时候,依旧懵懵懂懂。很多都搞不清。谁说前端简单?我给他大比斗 一般将App.vue作为根组件,将vue2_demo和vue3_demo等作为子组件导入并注册 // A 阅读全文
posted @ 2024-01-03 22:45 黑逍逍 阅读(44) 评论(0) 推荐(0)
模版和渲染函数
摘要:Virtual DOM (虚拟 DOM): 挂载 (mount):一个运行时渲染器将会遍历整个虚拟 DOM 树,并据此构建真实的 DOM 树。这个过程被称为挂载 (mount)。 更新 (patch):如果我们有两份虚拟 DOM 树,渲染器将会有比较地遍历它们,找出它们之间的区别,并应用这其中的变化 阅读全文
posted @ 2024-01-03 21:30 黑逍逍 阅读(36) 评论(0) 推荐(0)
选项式,组合式,响应式
摘要:"选项式"(Options API)、"组合式"(Composition API)和"响应式"(Reactivity API) 是Vue中重要的API概念,它们定义了组件的结构和行为,以及如何管理状态和逻辑 选项式 API(Options API) 概念:选项式API是Vue最初提供的API,通过定 阅读全文
posted @ 2024-01-01 21:21 黑逍逍 阅读(134) 评论(0) 推荐(0)
模版语法
摘要:文本插值:使用双大括号 {{ }} 来绑定数据到文本节点。 <template> <div id="counter"> <!-- 组件根元素通常不需要 id,除非你需要它来进行 DOM 操作 --> <h1>Counter Example</h1> <p>{{ name }}</p> <p>{{ a 阅读全文
posted @ 2024-01-01 18:43 黑逍逍 阅读(17) 评论(0) 推荐(0)
vite创建项目
摘要:打开cmd npm create vite@latest 选择vue 再选择jsavscript npm install 下载依赖 npm run dev ok 阅读全文
posted @ 2023-11-06 21:10 黑逍逍 阅读(27) 评论(0) 推荐(0)
tailwailcss入门,都学什么
摘要:核心概念: Utility-First Fundamentals: 这是指Tailwind CSS的设计理念,其中大量使用工具类,即小的、单一用途的CSS类,用于构建复杂的设计。这种方法的好处是它可以快速地迭代和维护样式。 Hover, Focus, and Other States: Tailwi 阅读全文
posted @ 2023-11-05 14:10 黑逍逍 阅读(260) 评论(0) 推荐(0)
Tailwind--安装
摘要:Tailwind CLI:这是指通过Tailwind的命令行界面安装。这种方式通常是全局安装,可以在终端或命令行中直接使用Tailwind命令。 Using PostCSS:PostCSS是一个用于转换CSS的工具,Tailwind CSS可以作为PostCSS插件来使用。这种方法通常需要在项目的构 阅读全文
posted @ 2023-11-01 12:52 黑逍逍 阅读(160) 评论(0) 推荐(0)
vs设置自动保存
摘要:Mac: 搜索autosave 选择afterDelay 阅读全文
posted @ 2023-10-27 16:46 黑逍逍 阅读(140) 评论(0) 推荐(0)
yarn报错
摘要:打开powershell 输入 Set-ExecutionPolicy RemoteSigned Y 阅读全文
posted @ 2023-10-27 16:17 黑逍逍 阅读(24) 评论(0) 推荐(0)
后端传递给前端的参数,怎么处理
摘要:1. 直接传递布尔值 2.传递状态码 3. 传递json【用这种吧】 阅读全文
posted @ 2023-08-27 12:48 黑逍逍 阅读(45) 评论(0) 推荐(0)
第二步:安装依赖环境
摘要:element 组件 | Element 安装:npm i element-ui -S 引用: 阅读全文
posted @ 2023-08-06 01:10 黑逍逍 阅读(12) 评论(0) 推荐(0)
第一步:创建vue项目
摘要:打开cmd vue create projectname 用默认的就行,创建好了没router Manually select features(手动选择特性)用这个创建、 空格进行选择,回车下一步 创建好了 阅读全文
posted @ 2023-08-05 21:24 黑逍逍 阅读(18) 评论(0) 推荐(0)
进阶-ajax
摘要:Ajax代表"异步JavaScript和XML"(Asynchronous JavaScript and XML)的缩写。 它是一种用于在不重新加载整个网页的情况下从服务器异步获取数据的技术 Axios是一个现代的JavaScript库,用于执行HTTP请求,它是基于Promise的,使得在浏览器和 阅读全文
posted @ 2023-07-08 02:37 黑逍逍 阅读(21) 评论(0) 推荐(0)
进阶-this
摘要:在JavaScript中,this是一个特殊的关键字,表示当前执行代码的上下文对象。它的值根据代码的执行环境不同而变化。以下是对this的详细介绍: 全局上下文中的this: 在全局作用域中,this指向全局对象,通常是window对象(在浏览器环境中)。在严格模式下,全局作用域中的this将是un 阅读全文
posted @ 2023-07-08 02:25 黑逍逍 阅读(19) 评论(0) 推荐(0)