AZURE060606的博客

现在浏览器输入服务器公网ip或者域名即可访问vue项目。设置安全组-80端口默认开放。安装nginx所需依赖。如果未配置可以自行设置。

* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。/* space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。/*align-content: stretch 不设置高度*//* flex-start：与交叉轴的起点对齐。/* flex-start：与交叉轴的起点对齐。/* flex-end：与交叉轴的终点对齐。/* flex-end：与交叉轴的终点对齐。/* center：与交叉轴的中点对齐。/* 使第二个项目在交叉轴上终点对齐 *//* 使用弹性布局 */

pinia有三个概念stategetter和action，我们可以假设这些概念相当于组件中的datacomputed和methods另外，你应该避免在 Store 中引入那些原本可以在组件中保存的本地数据，例如，当你不需要让一个元素具有全局状态时，便不需要使用pinia。

用于在子组件中从父组件或根组件中注入已经创建的实例，如果不想使用也可以直接引入。

watchEffect函数不用指定监听谁，只要watchEffect内部用了某个变量，某个变量发送变化，就会触发。toRefs的作用将一个包含响应式对象属性的普通对象转换为包含 ref 对象的普通对象，通俗一点就是。都适用于不同场景，生产项目中，低复杂度场景用选项式API，单页应用用组合式API+单文件组件。函数用于监视一个数据，并在数据变化时执行特定的逻辑。该方法也是Vue2中所使用的，其特点是例如。等对象所定义的属性都会暴露在函数内部的。单文件组件中组合式API通常和。上，它会指向当前的组件实例。

自定义代理用于执行 HTTP 和 HTTPS 请求的代理。: 与请求一起发送的 URL 参数，必须是一个简单对象或。: 带有 xsrf token 值的 HTTP 请求头名称。: HTTP 请求内容的最大字节数（仅Node.js）: 在发送请求前修改请求数据的函数，仅适用于。: 用于解码响应的编码（Node.js 专属）: 定义对于给定的 HTTP 状态码是。: 创建请求时使用的方法，默认为。: 作为请求体发送的数据，适用于。: HTTP 响应内容的最大字节数。: 用于请求的服务器 URL。

具体环境配置请点这里记得新建配置时这里选vue31.选定路径后再cmd输入创建指令2.项目创建完毕后用webstorm打开项目3.安装依赖4.启动项目看到该页面即表示成功5.配置快速启动vue2ref和reactive这种方式下的count仅是一个普通的number数据，想要将他转换为响应式对象需要用到ref和reactive

需求：在同一个html页面中，左边有两个跳转链接负责切换组件，右边展示不同的组件，仅以切换路由为示例。路由守卫会在用户访问某个路由之前提前进行判断检查和各种操作，确保用户已符合规定的方式访问路由。此时访问路由不会返回任何东西，并触发函数。其他与history基本没有区别。当添加token后便能正常访问。

【代码】Vuex存储数据实例。

【代码】Vue简易登录注册模版(基于ElementUI)

【代码】Vue中引入ElementUI。

而跳转的路径要以router/index.js中的path为准。现在访问active路径就可以显示Active组件了。所谓路由，就是将一个个组件映射到不同的路由url中。首先要将App内的内容换成router-view。现在去注册路由，还是以上面的Active组件为例。

注：使用cookie需要下载vue-cookies。在main.js中导入。

可以将组件中共用的配置提取到一个对象内，以此便不用再每个组件中都写一遍了。

这样便是成功了以上是通过直接操作state来实现需求的，但是实际中为了安全和更好的处理数据，应该将数据由actions和mutations过滤后再与state进行交互。

package-lock.json - - - - - - - - - - 锁定依赖文件版本的文件。HelloWorld. vue - - - - - - - - - - helloworld组件。jsconfig.json - - - - - - - - - - 不管。index.js - - - - - - - - - - 路由配置文件。HomeView.vue - - - - - - - - - - 首页。index.js - - - - - - - - - - 状态管理器。

Django中接受axios请求时会遇到的问题，这是因为当你用axios发送一个请求到不同网站上（比如域名不同、端口不同），浏览器会认为这是不安全的操作，会拒绝这个请求Django中会有专门的中间件解决这个跨域问题。

ECharts是一个基于 JavaScript 的开源可视化图表库所有示例。

es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。任何可以使用函数表达式的地方，都可以使用箭头函数，并且在Vue中使用箭头函数不会出现this指向不同的问题，同时还能一定程度的简化代码。在es6以后就不建议使用var变量了，let和const在语义上比var更清晰，使代码的可读性、安全性更符合现代JS的编程标准。模版字符串在需要大量字符串拼接时会比老语法。如果调用函数时不传参则会以默认参数为准。对象名与接受参数名不符时则不会被解构。es6之前的字符串拼接。

package-lock.json - - - - - - - - - - 锁定依赖文件版本的文件。HelloWorld. vue - - - - - - - - - - helloworld组件。jsconfig.json - - - - - - - - - - 不管。index.js - - - - - - - - - - 路由配置文件。HomeView.vue - - - - - - - - - - 首页。index.js - - - - - - - - - - 状态管理器。

到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )到这里就可以正常使用npm命令安装需要的工具了。如(npm install -g cnpm )然后会在该路径下生成一个文件夹，直接用webstorm打开。这是由淘宝提供的npm镜像，以后装模块用它代替npm。如果想要保存该配置可以在这里选y然后为配置命名。可以使用默认配置，但这里我选择自行创建。完成以上配置后便可以再次在终端输入。这里使用的是vue2因此选2.x。指令，显示版本号证明安装成功。

组件可以向父组件发送自定义事件，父组件可以监听这些事件并做出相应的处理**

Vue 能够追踪计算属性的依赖关系，当依赖的数据发生变化时，相关的计算属性会自动更新。只有在依赖发生改变时，才会重新计算计算属性的值，否则会直接返回缓存的结果。es6 新增了箭头函数，箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。：在实例初始化之后，数据观测和事件配置之前被调用，此时实例还未初始化完成。：实例销毁后调用，此时实例及其所有的指令被解绑，事件监听器被移除。：只处理自己的事件，父控件冒泡的事件不处理，：只处理自己的事件，子控件冒泡的事件不处理，

/ 将词库中的词过滤后赋值给keyMessage：对this.keyword数组中的每个元素使用方法，item就是每个元素。// 如果词库中的词存在于用户输入就将其返回，indexOf会判断左边元素是否存在括号元素中，并返回索引。对于有参函数来说，超出部分不计入，不足的用undefined显示，没有参数则将事件对象传入。如果原对象、数组值非空的情况下，修改对象属性是无效的，需要用语法。地绑定一个或多个属性，或一个来自父组件的 prop 里的表达式。控制元素的显示隐藏，元素存在并占据空间。

v-html会用一个HTML标签字符串，替换该元素下面的所有内容。地绑定一个或多个属性，或一个来自父组件的 prop 里的表达式。当我们使用Vue将数据和 DOM 建立关联，所有东西都是。控制元素的显示隐藏，元素存在并占据空间。，也就是当数据更新时页面也会跟着更新。该指令的意思是：“将这个元素节点的。实现表单输入和应用状态之间的双向绑定。实现表单输入和应用状态之间的双向绑定。，你会发现列表最后添加了一个新项目。会把该元素下面的所有内容替换掉。，你会发现之前显示的消息消失了。时页面的数据也会跟着改变。

精灵图（Spritesheet）是指将多个小图标、图像或动画合并到一个大图像中的技术。在网页设计和游戏开发中，精灵图通常用于减少网络请求次数和优化页面性能，通过减少加载多个小图标的请求，从而加快页面加载速度本篇仅以使用精灵图为示例，不涉及PS相关技术。

起因：在导入模态框时页面被一层灰色的标签覆盖住。的问题，但经过挨个修改后感觉也不是，最后发现是。，可能会出现遮罩层无法覆盖整个页面内容的情况。如果模态框的遮罩层的定位也使用了。F12查看后发现是一个。

【代码】HTML选择文件的实时预览。

欢迎进入jQuery世界</p>""<p>欢迎进入jQuery世界

Bootstrap是一个开源的前端框架，用于对HTML和CSS代码进行封装，因此可以直接在标签中加入现成的属性来实现需求v3官方文档库：官方书写好了大量现成的CSS样式以及组件。

获取用户输入的信息只需添加变量。"这是一个报错信息""这是一个警告信息""这是一个普通信息"

BOM：browser，浏览器对象，提供了访问和操作浏览器窗口的方法和属性DOM：document，文档对象，通过js来访问和修改html文件中的元素。

【代码】JS基础之常用方法。

jQuery最重要的两个部分分别是jQuery核心函数和jQuery核心对象jQuery核心函数：即$()或jQuery()，这个工具对象可以在项目任何位置使用，他可以使用css中的选择器来选择元素，亦或更简洁的使用DOM操作等等jQuery核心对象：即执行jq核心函数返回的对象，jq对象拥有很多的属性和方法，让程序员更方便的操作dom。

(可选)用于过滤和转换结果的函数或数组。:(可选)指定缩进量。

将时间戳转换为当前地区的时间并用字符串格式化。默认创建当前时间的对象。

函数的作用就是将一段代码块封装打包到一起，方便后期重复使用。

JavaScript 是一种前端脚本编程语言，主要依赖于Web浏览器运行，同时也可以进行后端开发，例如Node.js。通过DOM操作网页元素，POM设计模式使测试代码更可维护、可扩展，提高自动化测试效率。在JS中定义变量会用varlet关键字进行声明var x = 10;// 可以修改值//可以修改值在JS中定义常量会用const关键字进行声明//不可修改值常量一旦被赋值后便不可被修改，如果修改则会报错。

表格的头部区域(注意和 th 区分, 范围是比 th 要大的): 表示表头单元格. 会居中加粗。：当图像无法显示时显示替代文本。可以使用相对路径和绝对路径。注释信息不会作为代码执行。: 表格得到主体区域.：表示这个图片的路径。标签: 表示整个表格。表示将数据传入何处，

CSS（Cascading Style Sheets）是一种用于描述网页样式的样式表语言。它与 HTML 结合使用，用于控制网页的布局、外观和交互效果。CSS与HTML结合使用，它赋予HTML更强大的样式控制以及动态性，并且CSS结构与格式分离，更有利于页面的重用与维护。