ladymorgana的博客

上节,我们学习了侦听器watch的用法点击进入上一节。

上节,我们学习了Vue指令之v-model双向数据绑定点击进入上一节。

上节,我们学习了Vue指令之v-on事件处理、事件修饰符、v-for列表渲染点击进入上一节。

v-model。

前言本节内容1、`v-on`使用`v-on`好处效果2、事件修饰符2.1、按键码 (已废弃，不用研究)示例效果3、`v-for` 列表渲染示例效果

前言本节内容1、`v-text` 和 `v-html`代码效果2、`v-if ` 和 `v-show`代码效果3、`v-bind`3.1、用法：`v-bind:` + `属性` ，简写 `:`3.2、动态 attribute 名效果3.3、内联字符串拼接效果3.4、绑定 class效果3.5、style 绑定3.6、绑定一个全是 attribute 的对象效果其它用法4、附录html 标签属性大全

我先定义一个变量a，给它附上一个初始值，我们打印一下结果之后我们对这个变量进行重复的定义，再打印一下结果发现初始值被覆盖了所以说var是可以重复定义变量名的。直接就报错了2、修改值。

angular 09年，年份较早，一开始大家是拒绝谷歌公司团队研发 目前star:59.6kreact 2013年,用户体验好，社区大facebook公司团队研发目前star:135k·vue 2014年，用户体验好，API齐全，对初学者非常友好尤雨溪 目前star: 147kjquery库->DOM(操作DOM)+请求art-template库->模板引擎框架 = 全方位功能齐全简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 + 数据管理。

目前我们的webpack是没有服务环境的，那么如何启动一个web服务器呢？可以通过webpack-dev-server模块，下载使用即可。安装好后，再package.json中配置scripts脚本，，然后运行serve脚本。这样就会启动一个http://localhost:8080的服务。当开启了web服务后，咱们的/dist文件可以不用存在了，服务会把dist的资源打入到内存中，这样可以大大加快编译的速度，所以/dist文件夹可以删除掉了，不影响服务的启动和访问。

为了更好的理解项目脚手架的使用，我们来学习一下webpack工具，因为脚手架的底层就是基于webpack工具实现的。

Vue 单文件组件（又名 *.vue 文件，缩写为 SFC）是一种特殊的文件格式，它允许将 Vue 组件的模板、逻辑 与 样式封装在单个文件中。

上节,我们学习了slot插槽，组件内容的分发处理。

前言问题本节内容插槽 slot>> 使用>> 效果 (前后相同)插槽的特性实战> 实例 1：【作用域】根组件中渲染> 效果> 原因>> 实例 2：【具名插槽】即多个插槽> 效果>> 实例 3：【作用域插槽】插槽能访问子组件的数据> 代码> 效果

一、组件通信特征1.1 特征一 :不通过props接收属性，会直接挂载到组件容器上>实操注释props: ['title'] 前注释props: ['title'] 后> 效果1.2 特征二 : 不通过emits接收事件，会直接挂载到组件容器上> 实操：在组件上定义handleClick事件，点击组件触发打印当前目标> 效果1.3 特征三: inheritAttrs：true 选项阻止属性和事件挂载>实操> 效果1.4 特征四 : 可通过

一、组件之间为什么要做通信二、组件之间通信方式2.1、父传子：由传递属性实现stage 1：申明 （即定义）stage 2：注册stage 3：使用【示例】：父组件将title 和 count 传递给子组件（普通数据 和 响应式数据的传递）＞​​​​​​​代码＞效果2.2、子传父：由自定义事件实现stage 1：申明 （即 父组件：定义方法 + 子组件：调用方法）stage 2：注册stage 3：使用【示例】：子组件将data 传递给

一、组件的概念1.1、【案例】评分组件与按钮组件的抽离过程二、组件的使用2.1、【案例】简易首页＞效果＞​​​​​​​代码 - 原始＞​​​​​​​代码 - 组件抽离结构＞​​​​​​​代码 - 测试响应式数据三、组件的命名方式与规范四、根组件4.1、【测试】根组件中 template的结构 优先级高于 app容器中的结构＞​​​​​​​【效果】当template和app容器中同时出现结构时，效果＞​​​​​​​【效果】当只有temp

一、本章学习目标Vue3组件相关概念掌握组件之间的通信封装一个可复用的组件单文件组件SFC：即.vue文件 = 样式 + 结构 + 逻辑脚手架的使用和底层实现机制工程化的认知二、课程安排组件的概念及组件的基本使用方式组件之间是如何进行互相通信的组件的属性与事件是如何进行处理的组件的内容是如何组合与分发处理的Element Plus框架的el-button按钮组件实现单文件组件SFC及Vue CLI脚手架的安装使用脚手架原理之webpack处理html文件和模块打

一、总结内容二、习题2.1 【选择题】以下Vue指令中，哪些指令具备简写方式？2.2 【编程题】以下Vue指令中，哪些指令具备简写方式？＞效果＞代码

一、【案例】搜索关键词加筛选条件的综合1.1、逻辑1.2、效果1.3、json数据 -02-data.json1.4、代码

一、组件生命周期概述1.1 官方生命周期1.2 钩子函数（回调函数）▶生命周期可划分为三个部分(- >表示执行循序)：二、实战：测试生命周期流程＞代码＞ 效果

一、表单处理1.1、【双向绑定】实现方式一：v-model＞代码＞ 效果1.2、【双向绑定】实现方式二：:value属性 + input事件＞代码＞ 效果(同上)二、实战2.1 【v-model 示例】输入框＞代码 +效果 （见1.1）2.2 【v-model 示例】单选框＞代码＞ 效果2.3 【v-model 示例】复选框＞代码＞ 效果2.4 【v-model 示例】下拉菜单＞代码

在将 v-bind 用于 class 和 style 时，字符串拼接麻烦且易错，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

​​​​​​​一、条件渲染 -v-if = 表达式1.1 真值与假值1.2 v-if ，v-else-if，v-else1.3 实战：isShow1 为真值时 显示 bbbbb＞代码＞效果二、列表渲染 -v-for2.1 渲染 - 数组＞代码＞效果2.2 渲染 - 对象＞代码＞效果2.3 渲染 - 整数＞代码＞效果2.3 渲染 - 文本（字符串）＞代码＞效果三、v-if 和 v

一、监听器 -watch: {}1.1 目的1.2 应用场景1.3 语法二、计算属性和侦听器的区别三、实战示例1：已知 n1=3 ，n2=4 求 n3 = n1 * n2 ，改变n1,n2,求n3＞代码 - 计算属性＞代码 - 监听器＞效果示例2：已知 n3求 n1 和n2＞代码＞效果

一、计算属性 -computed:{}1.1 目的1.2 写法代码二、特征2.1 调用时当属性调用2.2 缓存重复调用时，调用的是缓存2.3 默认只读2.4可赋值：需要定义成对象，并写get，set方法 （类似于java）三、原理

一、声明式渲染1.1 什么是JS表达式：能够进行赋值的操作▶正确▶错误示例二、示例：2秒后，页面中 message 由hello world 变成hi vue▶效果三、原理：利用ES6的Proxy对象对底层进行了监控

一、标签属性中的使用 - 指令系统1.1 那么模板语法是否可以在标签属性中进行使用呢?▶当然可以：使用指令系统二、指令系统2.1 v-bind2.2 v-on三、实战3.1 methods 选项3.2 $event语法

选项式API - 三大优势。不会出现参数顺序的问题，不会出现参数顺序的问题，非常适合添加默认值的。非常适合添加默认值的。

一、为什么使用Vue框架?二、什么是MVC设计模式第一阶段：后端MVC第二阶段：前后端分离第三阶段：前端MVC主要问题：第四阶段：前端MVVM三、MVVM设计模式双向绑定vue：将MVVM发扬光大四、VUE 的核心思想MVVM：view影响data，data影响view，即双向绑定实战一：如何使用vueStage 1：引入vueStage 2：编写 view ，model，vm层Stage 3：演示：修改input ，div中{{message

一、为什么做这样一门课程?二、本门课的亮点有哪些?2.1、轻松驾驭2.2、体系系统2.3、高效快捷2.4、融合贯通三、课程内容包括哪些?四、项目实战《在线考勤系统》五、课适合哪些同学?

​【章节介绍】第2章 Vue3核心概念及选项式API 本书目录：点击进入一、本章学习目标二、课程安排三、学习前的准备工作​

第1章课程导学-了解本课程必看第2章Vue3核心概念及选项式API-入门Vue3第一步第3章Vue3组件应用及单文件组件-抽象独立的代码第4章Vue3语法系统进阶-全面掌握Vue3特性第5章Vue3组合式API详解-大型应用的高端写法第6章VueRouter路由与Vuex状态管理-组织与架构应用第7章TS4类型系统之基础使用-TS4带来的编码优势第8章TS4类型系统之进阶使用-带您探索类型的世界第9章TS4扩展内容与Vue3结合使用-融会贯通TS结合Vue第10章Vue

1、实验环境说明2、Prometheus介绍3、Prometheus特点4、Prometheus组件5、Prometheus工作流程6、prometheus和zabbix区别7、Prometheus部署模式8、Prometheus数据类型9、Prometheus能监控什么？10、Prometheus对k8s监控如何做？11、安装node-exporter组件12、node-exporter采集物理节点监控数据.13、创建sa：进行RBAC授权14、relabel_configs重写

一、场景二、解决方案三、实战1. 键盘 Win + R 键，在弹出的对话框中输入netplwiz，回车2. 去掉必须输入用户名和密码的勾选，点击应用3. 在弹出的对话框中输入用户名和密码

一、场景二、原因三、解决方案方法一：（需要能访问github网站）方法二：（下载对应版本）

一、需求二、场景三、思路四、实现A. 设置来电开机B. 设置及定时关机

一、开启 Hyper-V二、下载 docker三、安装 docker四、问题Stage 1：打开 powershell，并执行Stage 2：下载Linux内核更新包，并安装Stage 3：将 WSL 2 设置为默认版本Stage 4：安装所选的 Linux 分发

第1章 课程简介&&自我介绍1-1 自我介绍1-2 课程大纲内容介绍1-3 课程更新通知第2章 K8s必备知识-Docker容器基础入门2-1 课程介绍2-2 docker容器介绍2-3 docker优缺点2-4 安装和配置docker2-5 修改内核参数2-6 配置镜像加速器2-7 配置常用镜像加速器站点2-8 docker镜像操作第3章 运行docker容器3-1 创建交互式docker容器3-2 创建守护进程容器3-3 容器相关命令汇总3-4 docker部署web网

一、collect（）方法二、两个重载方法2.1 方法一2.2 方法二（常用）三、Collector 的 作用四、Collectors 的作用> Collectors.toList()>Collectors.toMap()>Collectors.toSet()>Collectors.toCollection() : 用自定义的实现Collection的数据结构收集五、实战Stage 1：准备工作，实体类实现Comparable接口Stage 2：示例

一、foreach1. JDK8之前集合遍历的方式2. Jdk8 里面的新增接口二、注意点三、实战> 执行结果