一叶凉夏

HTTP协议1.http报文http请求由四部分组成： method：常为get或者是postget主要是请求服务器资源，而post则是向服务器发送html表单 url：常为要获取资源的路径，就是很明显的元素资源的url http协议的版本号 为服务端表达一些信息的可选头部headers 对于post请求，body中会包含发送的资源 响应报文： http协议版本号 状态码：显示对应请求执行是否成功，以及失败原因 状态信息：状态码描述信息，可以由服务器端自行设定 header，与请求类似 可选，响应报文包含资源body更为常见 2.url也就是网址 基本组成：scheme://host[:port#]/path/.../[?query-string][#anchor] scheme：访问服务器以获取资源时要使用哪种协议，http.https等 host：http服务器的ip地址 port#：端口号 path：访问资源的路径 query-string：发给http服务器的数据 anchor：锚

swiper插件用法 首先进行安装 1npm install swiper vue-awesome-swiper@2.6.7 --save 然后可以在main.js中全局注册 12345678910import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper'// import style (>= Swiper 6.x)import 'swiper/swiper-bundle.css'// import style (<= Swiper 5.x)import 'swiper/css/swiper.css'Vue.use(VueAwesomeSwiper, /* { default options with global component } */) 或者是组件内局部注册 1234567891011121314151617import { Swiper,...

v-bind绑定css1.绑定class直接上官网的例子： 1<div :class="classObject"></div> 首先，该div绑定了一个数据对象为classobject 然后将这个对象通过计算属性进行改写 123456789101112data: { isActive: true, error: null},computed: { classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } ...

5.201.变更方法（触发响应式的方法）： push() pop() shift() unshift() splice() sort() reverse() 使用这些方法对数组进行操作，会使页面更新。 变更方法会==改变原始数组== 2.替换数组：替换数组会返回一个新的数组，如（filter()、concat() 和 slice()） 3.由于 JavaScript 的限制，Vue 不能检测数组和对象的变化：==待补充== 补充： 在vue中，有时候你修改了数组的某一项值或索引时，视图并未如你想的那样发生变化，虽然你修改了数组但是视图上显示的还是未修改时的值。 12345//由于 JavaScript 的限制，Vue 不能检测以下变动的数组：//（1）当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue//（2）当你修改数组的长度时，例如：vm.items.length = newLength 官方的解决方案： 12345//...

5.301.插槽slot如果想更好的进行组件复用，那么插槽就是必不可少的，有了插槽，就可以自由定义组件内的各种标签， 在复用的时候，使用默认的公用的标签，然后通过插槽，再自定义特有的功能样式 12345678910111213141516<div class="app"> <!--<cpn><span slot="center">hahha</span></cpn>从Vue2.6已经废弃--> <cpn> <template v-sort:center> <span>hahaha</span> </template> </cpn></div><template id="cpn"> <div> <slot...

5.181.箭头函数：==函数声明尽量使用箭头函数的方式== 绝大多数情况下都可以用=> 代替function来声明函数。 =>函数的作用已经完全包围了function，并且this指向清晰。 vue react里 this是一个高频使用的model。 vue里就出现了一种=>代替不了function的情况： 在声明data和生命周期函数中如：mounted，created等的情况下，依然要用function或函数名+()的方式来声明函数。 （这个跟vue作者尤雨溪当年在google angular项目组的一个bug有关，他在这里规避掉了箭头函数声明的情况） 更简短的函数并且不绑定this 1234567891011121314151617181920212223var elements = [ 'Hydrogen', 'Helium', 'Lithium', ...

5.211.组件化基本使用：（1）创建组件构造器对象： 12345678const cpnC = Vue.extend({ //template:组件自定义的模板。 template: "<div>\n" + " <h2>我是标题</h2>\n" + " <p>我是内容1</p>\n" + " <p>我是内容2</p>\n" + " </div>" }) （2）注册组件 1Vue.component('my-cpn',cpnC) （3）实例化Vue 123456const...

vue3+ts后台管理1.项目搭建配置文件在搭建项目的时候会统一规范，比如统一编辑器中的tab键的空格数目，还有对于代码格式的美化，通过.prettierrc文件设置 123456789{ "useTabs": false, "tabWidth": 2, "printWidth": 80, "singleQuote": true, "trailingComma": "none", "semi": false} useTabs：使用tab缩进还是空格缩进，选择false； tabWidth：tab是空格的情况下，是几个空格，选择2个； printWidth：当行字符的长度，推荐80，也有人喜欢100或者120； singleQuote：使用单引号还是双引号，选择true，使用单引号； trailingComma：在多行输入的尾逗号是否添加，设置为...

...

Tic Tac Toe小游戏目前实现的功能： 初始化3×3的子组件网格 绑定网格id 点击网格，向父组件传递id值 父组件接收到id，会对其进行计数，初始为0接受到一次id，计数加一（第一次接受id，count =1） 判断逻辑，如果count为奇数，且clickstate为1，修改其player值为1为偶数就修改为2,clicktate值置0 判断逻辑，如果点击过该网格（clickstate ==...