JS构造器与new操作符
{} 语法可以创建一个对象,但是通常我们需要创建一些类似的对象,这个时候通常使用构造函数和 new 操作符来实现 构造函数 构造函数也是常规函数,但是约定构造函数以大写字母开头,并且只能通过 new 关键字来执行 123456789101112131415161718192021222324252627function Dog(name, age, six){ // 隐藏的操作 // let this = {}; this.name = name; this.age = age; this.six = six; this.eat = function(){ console.log('吃吃吃'); } // 隐藏的操作 // return this;}Dog.prototype.color = 'white';Dog.prototype.say = function(){ console.log(thi ...
js类型转换
类型转换 大多数情况下,运算符和函数会自动将赋给它们的值转换为正确的类型 比如,alert 自动将值转换为字符串进行显示 在特殊情况下,我们需要将值显式的转换为所期望的类型 字符串转换 12345let num = 14;console.log(typeof num); // numbernum = String(num); // 14 - 字符串console.log(typeof num); // string 字符串的转换非常明显,false -> ‘false’ null -> ‘null’ 数字类型转换 在算术表达式中,会自动进行 number 类型转换 1234console.log('6' / '2'); // 3 string -> number// 当然特殊的 + 法时表达式中有字符串是不会转换的let result = "33" + 2;console.log(result); // 332 在 js 中可以使用 Number(value) 显式的将这个 value 转换为 numbe ...
butterfly分类页面魔改
觉得分类页面不是很好看,打算魔改一下分页页面,恰好店长有写过首页分类的磁贴插件,于是打算利用店长的插件中的配置来进行魔改一番(具体效果可查看分类页面),下面记录一下魔改步骤~ 修改源码 修改 [Blogroot]\themes\butterfly\layout\includes\page\categories.pug 123456.category-lists- .category-title.is-center= _p('page.category')- | - - span.category-amount= site.categories.length- div!= list_categories() div!= list_category() 新建 [Blogroot]\themes\butterfly\scripts\helpers\category.js 12345678910111213141516171819202122232425262728293031323334353637383940 ...
网格布局
网格布局(grid) 网格布局是一套二维页面布局系统,以下内容来自学习css网格布局 启用网格 display 属性设为 grid 或 inline-grid 就创建了一个网格容器,容器的所有直接子节点自动成为网格项目 display: grid 网格项目按行排列,网格项目占用整个容器的宽度 display: inline-grid 网格项目宽度由自身宽度决定 display: subgrid 继承其父级网格容器的行列大小,它是其父级网格容器的一个网格项目 column、float、clear 和 vertical-align 对网格容器没有效果 网格容器的一些属性 grid-template-columns 和 grid-template-rows 属性 grid-template-columns 和 grid-template-rows 用来显式定义网格,分为行轨道和列轨道 grid-template-rows 定义行尺寸,即轨道尺寸,轨道尺寸可以是任何非负的长度值(px、%、em 等) 12345678910111213141516171819202122232425 ...
基于observable的状态管理插件
突然之间看到 vue2.x 文档中的两个 api,Vue.observable(object) 可以让一个对象可响应,并且返回的对象可以直接用于渲染函数和计算属性中,并且会在发生变更时触发相应的更新,也可以作为最小化的跨组件状态存储器 于是心血来潮决定尝试写一个 vue 的状态管理插件 关于上方提到的两个 api 可以在下方文档中找到,这里不多作介绍 查看文档 使用脚手架创建一个 vue 项目 1vue create app 因为 Vue.observable 在 2.6.0 版本之后新增的,请确保 vue 和 vue-template-compiler 的版本高于 2.6.0 且二者版本一致 插件源码 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878 ...
vue2.x的api
全局配置 Vue.config 是一个对象,包含 Vue 的全局配置,可以在启动应用之前修改下列属性 silent 类型:boolean 默认值:false 作用:取消 vue 所有的日志和警告 1Vue.config.silent = true; optionMergeStrategies 类型:{[key: string]: Function} 默认值:{} 作用:自定义混入时的合并策略,合并策略选项分别在接收父实例和子实例上定义的该选项的值作为第一个和第二个参数,vue 实例上下文被定义为第三个参数传入 123Vue.config.optionMergeStrategies._my_option = function(parent, child, vm){ return child + 1;} devtools 类型:boolean 默认值:true (生产版本为 false) 作用:配置是否允许 vue-devtools 检查代码,开发版本默认是 true,生产版本默认是 false,生产版本设为 tr ...
vue2.x进阶用法
混入 混入提供了一种非常灵活的方式,来分发 `vue` 组件中的可复用功能,一个混入对象可以包含任意组件选项,当组件使用混入对象时,所有混入对象的选项将被混入到组件本身的选项 12345678910111213141516171819// 定义一个混入对象var myMixin = { created: function () { this.hello() }, methods: { hello: function () { console.log('hello from mixin!') } }}// 定义一个使用混入对象的组件var Component = Vue.extend({ //使用Vue.extend方法创建一个组件构造器 mixins: [myMixin]})//将组件构造器实例化var component = new Component() // => "hello from mixin!&quo ...
vue2.x基本用法
插值 文本插值 格式{{expression}} 使用v-once指令执行一次插值,后续不再更新 html 插值 双大括号将数据解释为普通文本而不是html代码,如果需要渲染为html,则需要使用v-html指令 指令 带有v-前缀的特殊的attribute 参数 一些指令能够接收一个参数,在指令名称之后以冒号表示 12<a v-bind:href="url">跳转</a><a v-on:click="todo">点击</a> 动态参数 用方括号括起来的js表达式作为指令的参数 动态参数会转换为字符串,异常情况下为null,将会移除绑定 123456789101112<a v-bind:[attributeName]="url">跳转</a><a v-on:[eventName]="todo">事件</a><script> var ap ...
几个不常见的html、css属性
以下内容提到的标签和属性均不考虑浏览器的兼容性,使用时根据实际场景选择是否可以使用和代替 line-clamp 属性 line-clamp 是一个不规范的属性,使用它时可以视情况组合-webkit或-moz进行使用 line-clamp 用于限制块元素显示文本的行数,并且只有当 display 属性设置为 -webkit-box 或 -webkit-inline-box 并且-webkit-box-orient属性设置为 vertical 之后才会生效,通常需要搭配 overflow: hidden 实现指定显示行数的内容。-webkit-line-clamp: 1 配合其他属性和以下样式实现的效果一样 123overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
vercel托管node.js的api服务
vercel vercel提供免费的网站托管服务,类似于github page,但它远比page更加强大,速度也快很多。同时vercel支持部署serverless接口,支持py、node等 托管服务 github托管服务vercel cli托管服务 npm init初始化一个工程创建远程仓库之后clone下来创建api目录在api目录中创建index.js代码推入远程仓库1234module.exports = (req, res) => { let data = {number: 1, name: req.query.name || 'peiqi'}; res.json(data);} 登录vercel官网授权github登入vercelnew project导入github中对应的仓库deploy部署 首页visit(会出现404)在浏览器地址栏追加/api?name=suxi 避免404 根目录添加vercel.json的配置根目录添加ind ...














