html登录页面代码美观漂亮_免费网页代码大全

Vue 　　VUE2 　　https://v2.cn.vuejs.org/ 　　（1）介绍 　　VUE是渐进式框架 　　可以一点一点地使用它，只用一部分，也可以整个工程都使用它 　　Vue特点 　　易用 通过 HTML、CSS、JavaScript构建应用 　　灵活 不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。 　　高效 20kB min+gzip 运行大小 超快虚拟 DOM 最省心的优化 　　
　　（2）引入vue 　　vue2 　　vue3 　　（3）M-V-VM思想 　　（1）介绍 　　MVVM 是 的缩写，它是一种基于前端开发的架构模式，是一种事件驱动编程方式 ：vue对象的data属性里面的数据，这里的数据要显示到页面中 ：vue中数据要显示的HTML页面，在vue中，也称之为“视图模板” （HTML+CSS） ：vue中编写代码时的vm对象，它是vue.js的核心，负责连接 View 和 Model数据的中转，保证视图和数据的一致性，所以前面代码中，data里面的数据被显示中p标签中就是vm对象自动完成的（双向数据绑定：JS中变量变了，HTML中数据也跟着改变） 　　
　　MVVM的特性 低耦合：（View）可以，1个ViewModel可以绑定到不同的View上，当View变化的时候 Model可以不变，当Model变化的时候，View也可以不变 可复用：可以把一些视图逻辑放在1个ViewModel中，让很多View（以此减少代码冗余） 独立开发：人员可以专注于和（ViewModel），人员可以专注于 可测试：界面素是比较难以测试的，而现在的测试可以来编写 　　MVVM的逻辑 　　
　　组件化开发、单页面开发 　　组件化开发 　　类似于DTL中的，每一个组件的内容都可以被替换和复用 　　
　　单页面开发 　　只需要1个页面，结合组件化开发来替换页面中的内容 　　页面的切换只是组件的替换，页面还是只有1个 　　（4）简单使用 　　
　　（5）模板语法 　　（1）插值语法 　　语法： 　　
　　（6）指令 　　（1）文本指令 　　vue中 以v-xx开头的都是vue的指令系统 指令都放在标签上 指令 释义 v-html 让HTML渲染成页面 v-text 标签内容显示js变量对应的值 v-show 放1个布尔值：为真 标签就显示；为假 设置标签属性为display: none v-if 放1个布尔值：为真 标签就显示；为假 直接注释掉标签 　　
　　（2）事件指令 　　事件，双击事件，拖动事件，得到焦点，失去焦点… 　　还有一种写法，直接用@代替 　　事件指令–>函数有参数 不传参数，函数有参数的情况下，会自动把事件对象传入(event) 　　传参数，函数有参数的情况下，打印出传入的参数，也可以传对象… 如果传入 会打印出 　　传参数，函数有参数，把事件传入，固定写法，也会打印出事件对象 　　传参数，有多个参数，少传 不加括号，第一个参数会打印event对象 加了括号，不会自动传入event，只会显示undefined 　　传参数，多个参数多传，不影响，只会打印出函数上的参数 　　（3）属性指令 　　使用变量动态设置属性的值 　　,,只要写冒号就是绑定 　　图片1s切换一张小案例 　　（7）class和style 　　（1）class 　　class属性可以是字符串，数组，对象 　　字符串 字符串替换控制样式 　　数组 追加数组，删除数组控制样式 　　对象 里面放true和false，控制样式 　　（2）style 　　style属性也可以是字符串，数组，对象 　　字符串 字符串替换控制样式 　　数组 追加数组，删除数组控制样式 　　对象 根据key修改value控制样式 　　（8）条件渲染if elseif else 　　,, 　　（9）列表渲染v-for 　　循环显示多行 还可以循环出索引 在v-for都要在标签上加 :key=”key” 但是key必须唯一，会提高虚拟dom的替换效率 　　
　　（10）input数据绑定 v-model 　　（1）单向绑定 　　在input中输入值，变量不会改变 　　（2）双向绑定 　　在input中输入值，变量也会跟着变 　　
　　（3）v-model修饰符 　　是 Vue.js 中用于实现双向数据绑定的指令，它能够自动将表单控件的值与 Vue 实例中的数据进行同步。 修饰符是用来修改 的行为，以满足特定需求。以下是一些常用的 修饰符： 修饰符：失去焦点(change)触发。 　　修饰符：将用户输入的值转换为数值类型。 　　修饰符：自动过滤用户输入的首尾空白字符。 　　这些修饰符可以单独使用，也可以组合使用，以满足不同的需求。 　　（11）input的事件 　　: 当输入框进行输入的时候，触发 　　: 当素值发生改变，触发 　　: 当输入框失去焦点，触发 　　: 当获得焦点，触发 　　（1）input 　　输入触发 　　
　　（2）change 　　修改触发 　　
　　（3）blur 　　失去焦点触发 　　（4）focus 　　获得焦点触发 　　（12）过滤 　　方法的语法如下： 　　：要操作的原始数组。 ：用来测试数组的每个素的函数，接受三个参数： ：当前正在处理的数组素。 （可选）：当前正在处理的数组素的索引。 （可选）：调用 方法的数组。 （可选）：执行 函数时的 值。 　　方法会对数组中的每个素调用 函数，并根据 函数的返回值来决定是否保留该素。如果 返回 ，则保留该素，如果返回 ，则过滤掉该素。 　　最终， 返回一个新的数组，其中包含所有满足条件的素。 　　例如： 　　在这个例子中， 将包含数组 中所有偶数素。 　　案例 　　优化版 　　箭头函数版 　　（13）箭头函数 　　箭头函数（Arrow Functions）是ES6引入的一种函数表达式，提供了一种更简洁的语法来定义函数。下面是箭头函数的主要用法： 　　基本语法 　　箭头函数作为回调函数 　　箭头函数与解构赋值结合 　　箭头函数和数组方法结合 　　注意事项 箭头函数没有自己的 值，它会继承外层作用域中的 值。 箭头函数不能用作构造函数，因为它没有 属性。 箭头函数不能使用 对象，但可以使用剩余参数（rest parameters）来所有传入的参数。 箭头函数不能使用 关键字，因此不能用作 Generator 函数。 如果箭头函数只有一个参数，并且函数体只有一行代码，那么连参数的括号和函数体的花括号都可以省略。 　　（14）事件修饰符 　　Vue.js 提供了一些事件修饰符，用于在处理 DOM 事件时提供额外的控制或语法糖。以下是一些常用的 Vue.js 事件修饰符： 　　只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） 　　阻止a链接的跳转 　　只处理自己的事件，子控件冒泡的事件不处理 　　事件只会触发一次 　　（15）按键事件、修饰符 　　Vue.js 中的按键修饰符允许监听键盘事件时指定特定的按键。这些修饰符用于在触发事件时过滤按键，以便只在特定的按键被按下时才触发对应的事件处理函数。以下是 Vue.js 中常用的按键修饰符： 　　只在回车键按下时触发事件。 　　只在 Tab 键按下时触发事件。 　　/ 　　只在删除键或退格键按下时触发事件。 　　只在 Esc 键按下时触发事件。 　　只在空格键按下时触发事件。 　　只在上箭头键按下时触发事件。 　　只在下箭头键按下时触发事件。 　　只在左箭头键按下时触发事件。 　　只在右箭头键按下时触发事件。 　　这些按键修饰符可以用于 和 事件。帮助我们更精确地控制在特定按键按下时触发事件的情况。 　　（16）表单控制 　　在Vue.js中，可以通过使用v-model指令来轻松地实现表单控件的双向数据绑定。这意味着当用户在表单控件中输入内容时，Vue.js会自动更新相关的数据，并且当数据发生改变时，表单控件也会自动更新。 checkbox v-model 布尔：选中没选中 数组：多选 radio v-model 字符串:value的值 　　for循环渲染出来数据，可以增加商品数量，可以全选，单选，计算总价 　　
　　（17）vue和ajax 　　前后端交互，一提交会报错，这是跨域问题 　　
　　需要在后端的请求头中配置，由于我使用的是flask框架，所以是这样配，数据正常返回 　　
　　但是现在一般不使用jquery这种处理数据！！！！ 　　
　　使用js原生fetch XMLHTTPRequest 需要做浏览器兼容 所以出了fetch方案 　　使用第三方axiox 　　语法： 　　发送 GET 请求 　　： 用于指定 GET 请求的 URL 参数。当你需要将数据附加到 GET 请求的 URL 中时，可以使用 配置选项。这些参数会被添加到 URL 的末尾，形成查询字符串（query string），例如 。在 Axios 中， 是一个对象，其中键值对表示参数名和参数值。 ： 用于设置请求头（Headers）信息。请求头是发送给服务器的额外信息，例如身份验证信息、内容类型等。在 Axios 中， 是一个对象，其中键值对表示请求头的名称和值。你可以在 对象中设置自定义的请求头，例如 、 等。 　　发送 POST 请求 　　使用 Axios 发送 POST 请求通常需要指定要发送的数据和要发送到的 URL。下面是 Axios 发送 POST 请求的基本用法： 　　在这个示例中， 函数接收三个参数： ：表示要发送请求的 URL。 ：表示要发送的数据，通常是一个 JavaScript 对象。 （可选）：表示请求的配置，比如请求头、超时时间等。 　　接着，我们使用 方法和 方法来处理请求的响应和错误： 方法用于处理请求成功时的响应，接收一个回调函数作为参数，该回调函数接收一个 对象作为参数，其中包含了服务器返回的数据等信息。 方法用于处理请求失败时的错误，接收一个回调函数作为参数，该回调函数接收一个 对象作为参数，其中包含了请求失败的相关信息。 　　以下是一个完整的示例，演示了如何使用 Axios 发送 POST 请求： 　　在这个示例中，我们发送了一个 POST 请求到 ，并发送了一个包含用户名和密码的数据对象。当请求成功时，我们打印出了服务器返回的数据，当请求失败时，我们打印出了错误信息。 　　其他常用方法： 　　: 发送GET请求。 　　: 发送POST请求。 　　: 发送 PUT 请求。 　　: 发送 DELETE 请求。 　　: 发送 PATCH 请求。 　　显示电影案例 　　按钮，加载最新电影 　　html 　　backend.py 　　
　　（18）计算属性computed 　　计算属性是基于它们的依赖进行缓存的 计算属性只有在它的相关依赖发生改变时才会重新求值 计算属性就像Python中的property，可以把方法/函数伪装成属性 写在中，必须返回值，返回值才是属性，以后当属性用，都能被for循环 　　（19）监听属性watch 　　监听一个属性，只要这个属性发生变化，就执行函数 在Vue.js中，选项用于监听对象中定义的数据属性。当对象中列出的任何属性发生变化时，将执行相应的处理程序函数。 　　监听函数 　　（20）组件使用component 　　组件就是：扩展HTML素，封装可重用的代码，目的是复用 例如：有一个轮播图，可以在很多页面中使用，一个轮播有js,css,html 组件把js，css，html放到一起，有逻辑，有样式，有html 局部组件和全局组件 局部组件：只能在当前页面中使用 全局组件：全局都可以用 　　（1）全局组件 　　（2）局部组件 　　（21）生命周期钩子 　　Vue.js 组件的生命周期钩子是一组在组件创建、更新和销毁阶段调用的钩子函数，它们允许你在特定阶段执行代码。这些钩子函数可以用来执行一些任务，例如初始化数据、侦听事件、发送网络请求等。 　　
钩子函数 描述 beforeCreate 创建Vue实例之前调用 created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据） beforeMount 渲染DOM之前调用 mounted 渲染DOM之后调用 beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染） updated 重新渲染完成之后调用 beforeDestroy 销毁之前调用 destroyed 销毁之后调用 　　组件销毁 – 给组件写一个定时器 　　setTimeout: 用于在指定的时间后执行一次函数或一段代码。 语法： : 要执行的函数或代码块。 : 延迟的时间，以毫秒为单位。 示例： 　　只执行一次指定的函数，即使指定的延迟时间过去后页面在这段时间内处于不活动状态。 　　setInterval: 用于在指定的时间间隔内重复执行函数或一段代码。 语法： : 要执行的函数或代码块。 : 重复执行的时间间隔，以毫秒为单位。 示例： 　　会根据指定的时间间隔重复执行指定的函数，直到调用 来清除定时器或者页面被关闭。 　　只执行一次指定的函数，而 会重复执行。 　　在指定的时间后执行，而 在每个指定的时间间隔后重复执行。 　　对于需要重复执行的任务，应该使用 ；对于只需要执行一次的任务，应该使用 。 　　测试代码 　　（1）vue2和vue3的生命周期钩子 　　Vue 2.x 的生命周期钩子： beforeCreate： 在实例初始化之后，数据观测 (data observer) 和事件配置 (event/watcher setup) 之前被调用。 created： 实例已经创建完成之后被调用，此时实例已完成数据观测 (data observer)，属性和方法的运算，watch/event 事件回调已经准备好，但是挂载阶段还未开始。 beforeMount： 在挂载开始之前被调用：相关的 render 函数首次被调用。 mounted： el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 beforeUpdate： 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 updated： 由于数据更改导致的虚拟 DOM 重新渲染和打补丁后调用。 beforeDestroy： 实例销毁之前调用。在这一步，实例仍然完全可用。 destroyed： 实例销毁后调用。此时，所有的事件监听器和子实例都已被移除。 　　Vue 3.x 的生命周期钩子： 　　在 Vue 3.x 中，生命周期钩子的名称与 Vue 2.x 中基本相同，但是有两个重大的更改： beforeCreate 和 created 钩子保持不变。 beforeMount 和 mounted 钩子保持不变。 beforeUpdate 和 updated 钩子保持不变。 beforeDestroy 钩子变为 beforeUnmount。 在组件实例从 DOM 中卸载之前调用。 destroyed 钩子变为 unmounted。 在组件实例从 DOM 中卸载后调用。 　　（22）父子间通信 　　（1）父传子(自定义属性名)props 　　在组件中自定义属性名，然后通过在组件中的 关键字传数据 　　（2）子传父(自定义事件)emit 　　固定用法，使用，然后要在父中接收到这个参数，赋值即可 　　（3）ref属性(this.$refs) 　　ref是个属性，可以放在普通标签上，也可以放在组件上，在方法中 打印出来的是一个dom对象，可以通过点修改值… 　　普通标签 　　组件 会是一个 对象，可以进行.操作进行修改值等操作 　　补充： 　　​ 可以在子组件中拿到父组件对象 　　​ 但是如果一个组件会被很多次引用，根本找不到父亲是谁，所以不建议使用 　　（23）动态组件&keep-alive 　　用来做缓存，避免切换的时候数据丢失 　　（24）插槽slot(相似于block) 　　其实就是block 　　一般情况下，编写完一个组件之后，组件的内容都是写死的，需要加数据，只能去组件中修改，扩展性很差 　　然后就出现了插槽这个概念，只需要在组件中添加，就可以在body的组件标签中添加内容了 　　使用插槽 　　命名插槽 　　组件中使用插槽 　　testslot.vue 组件 　　AboutView.vue 页面组件 　　组件中使用命名插槽 　　testslot.vue 　　（25）vue项目创建&目录结构 　　创建项目 　　运行项目 　　目录结构 　　vue项目运行机制 　　组件写法 　　（26）ES6 　　（1）let 和 const 　　和 关键字用于声明变量和常量，取代了 。 声明的变量具有块级作用域，而 声明的变量具有函数级作用域。 声明的常量在声明后不能再被重新赋值 　　（2）let与var的区别 　　（1）全局作用域 　　（2）函数作用域 　　（3）块作用域 　　（4）重新声明 　　（3）const 　　（4）箭头函数 　　（1）this指向问题 　　（5）模版字符串 　　（6）解构赋值 　　（7）默认参数 　　（8）展开运算 　　（27）导入导出语法 　　（1）默认导出和导入 　　导出 　　导入 　　（2）命名导出和导入 　　命名导出 　　命名导入 　　如果在文件夹下有个index.js,只要导到文件夹一层即可 　　（3）组件的使用 　　vue项目中，组件的使用 　　在的script中先导入组件，再在里面注册该组件 　　（28）vue-router 　　单页面应用，就无法实现页面的跳转 　　借助于vue-router实现组件切换，效果就是页面跳转 　　使用的话，App.vue为固定写法 　　（1）router-view 　　App.vue 　　src/router/index.js 　　登录验证跳转案例 　　使用 方法进行路由跳转 　　使用 方法进行路由跳转 　　首页 src/views/HomeView.vue 　　登录页 src/views/LoginView.vue 　　电影页 src/views/FilmsView.vue 　　App.vue 　　路由 src/router/index.js 　　
　　
　　
　　（2）router-link 　　组件跳转 　　使用跳转 to里面填写路由地址 　　（3）路由跳转携带数据 　　以?形式携带 　　方式一 　　方式二 　　用配置方式传参 　　在另一个页面组件中取：会到object对象，以?带过来的数据，都会在query中 　　取数据 : 　　以 /路径/数据/ 跳转 　　必须在路由中写 路径后带/数据 　　这时候路径就会变成这个样子 　　
　　方式一 　　取值需要在中取 　　
　　方式二 　　取值需要在中取 　　（29）elementui 　　（30）混入 mixin 　　可以把多个组件共用的配置提取成一个混入对象，不需要在每个组件中都写 　　（1）局部使用 　　定义混入 　　mixin/index.js 　　注意，这个地方一定要在自己的里面也写入和 　　混入的导入： 　　（2）全局使用 　　在中定义，就不用在每个页面中导入了 　　（31）插件 install 　　功能：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据 　　使用步骤 　　是原型链，一般定义在原型中的变量，都用$开头，防止定义同名属性冲突 　　plugins/index.js 　　需要在main.js中注册使用 　　在组件中使用 　　还可以使用混入 　　（32）本地存储 　　: 永久生效，除非代码删除或者清空浏览器缓存 　　: 当前浏览器生效，关闭浏览器将就没有了 　　: 登录信息存放在这里，有过期时间，一旦过期就没了 　　使用cookie前提是要安装 　　然后在main.js中注册 　　（33）vuex 　　在vue2中，大量使用，到vue3中使用pinia vuex作用：集中式状态管理，组件有自己的数据，放在组件中，有了状态管理器，多个组件可以共同操作这个状态管理器 　　store/index.js 　　： 是一个包含了 Vuex store 中的 state、getters、commit 和 dispatch 方法的对象。通过 ，可以在 actions 中访问 state 中的状态、调用 getters、提交 mutations 或者分发其他 actions。 提供了一个统一的接口，使得可以在 actions 中进行状态的读取和修改，而不需要直接访问 Vuex store 对象。在以上代码中， 参数在 方法中使用，用于提交 mutation。 　　： 是 Vuex store 中的状态对象，用于存储应用中的各种数据。在 Vuex store 中，state 是唯一的、可响应的数据源。可以通过 来访问和修改 store 中的状态。在 mutations 和 getters 中，可以直接接收 参数来读取状态或者修改状态。在以上代码中， 参数在 mutation 中使用，用于修改 状态的值。 　　HomeView 　　shooping.vue 　　goods_list.vue 　　: 用于存储应用中的状态数据。 : 包含了一些用于修改 state 的同步方法。 : 包含了一些用于提交 mutations 的异步方法，适合通过后端校验数据。 　　（34）相关API 　　: 相当于路由链接(可以返回到当前路由界面) : 用新路由替换当前路由(不可以返回到当前路由界面) : 请求(返回)上一个记录路由 : 请求(返回)上一个记录路由 : 请求下一个记录路由 　　（35）多级路由 　　HomeView 　　router/index.js 　　App.vue 　　
　　（36）路由守卫 　　全局守卫、独享守卫、组件内守卫 　　全局守卫 　　路由两种工作模式 　　VUE3 　　（1）vite & vue3项目创建 　　配置npm本地镜像站 　　官方文档：https://v3.cn.vuejs.org/guide/installation.html#vite 　　vite官网：https://vitejs.cn 　　介绍：https://cn.vitejs.dev/guide/why.html#the-problems 什么是vite？—— 新一代前端构建工具。 优势如下： 开发环境中，无需打包操作，可快速的冷启动。 轻量快速的热重载（HMR）。 真正的按需编译，不再等待整个应用编译完成。 　　创建 　　（2）setup 　　初级写法 　　用法 　　1 生命周期钩子created 　　直接写在script内部即可 　　2 计算属性 　　3 监听属性 　　4 组件间通信 　　父传子 自定义属性 　　父组件 HomeView.vue 　　子组件 test.vue 　　子传父 自定义事件 　　父组件 HomeView.Vue 　　子组件 test.vue 　　5 slot插槽 　　插槽就是在父里面的子组件中加入内容 　　HomeView.vue 　　test.vue 　　6 混入minxin 　　直接导入导出用 只有局部的了 　　7 插件一样使用 　　8 ref属性 　　拿到组件对象通过.操作 　　父组件 HomeView.vue 　　注意：这个地方必须要放在函数内，不然还没挂载是拿不到参数的 　　ref后面的名字必须要和在script内定义的名字一样 　　子组件 test.vue 　　（3）ref和reactive 　　ref : 包裹值类型[数字，字符串，布尔]，做成响应式 reactive包裹引用类型[对象，数组] 　　（4）计算属性 　　（5）监听属性 　　在 Vue 3 中， 函数是一个基于函数的 API，用于监视响应式数据的变化，并在数据变化时执行一些逻辑。与 Vue 2 中的 选项相比，Vue 3 中的 函数更加灵活和直观。 　　监听基础属性 　　监听函数属性 　　（1）watchEffect函数 　　不用指定监听谁，只要watchEffect内部用了某个变量，某个变量发生变化，就会触发 　　（6）生命周期钩子 　　配置项API生命周期 　　组合式API生命周期 Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下： ===> =======> ===> =======> ===> =======> ==> =====> 　　
　　（7）toRefs & toref 　　toRefs简单来说就是全部做成响应式 　　如果用setup写法的话 　　toref 　　指定某一个key值做成响应式 　　（8）axios 　　基本使用 　　async await 　　（9）pinia 　　http://pinia.cc/ 　　1 安装 　　2 use 　　3 定义 　　在 Setup Stores 中： 成为 的属性 变成 变成 　　使用pinia进行存储数据 　　HomeView.vue 　　AboutView.vue 　　src/store/index.js 　　（10）vue-router 　　https://router.vuejs.org/zh/ 　　携带数据跳转 query 　　放数据 通过在地址栏方式 　　取数据 通过 route.query取 　　携带数据跳转 params 　　放数据 通过在路径/后面带值 　　取数据 通过route.params取 　　补充 　　es6的对象写法 　　如果修改属性不成功，用 　　js的循环方式 　　let 和 const 　　定义局部变量 　　定义常量，不能修改 　　1 普通索引循环 　　2 基于迭代的循环 　　of循环 循环出一个值 　　in循环 循环出索引 　　3 数组的方法实现循环 　　nodejs npm安装问题 　　scoped 　　加在style上，表示样式只在当前vue中生效 　　Object.assign 　　主要用于对象合并，将源对象中的属性复制到目标对象中，他将返回目标对象。