随笔分类 - 前端
静态网页、vue、Javascript
摘要：全局API之Vue.set 监听数据层的数据变化 Vue.set` Vue的核心具有一套响应式系统，简单来说就是通过监听器监听数据层的数据变化，当数据改变后，通知视图也自动更新。 Vue.set用于向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 如果数据源是数组 第一个
阅读全文
摘要：移动端页面布局 一、流式布局（百分比布局） 概念：流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，所以也称百分比自适应布局。流式布局实现方法是，将CSS固定像素宽度换算为百分比宽度。 换算格式：目标元素宽度 / 父盒子宽度 = 百分数宽度 没有流式布局 <html lang="
阅读全文
摘要：Web 本地存储 Web Storage API 关键对象 window.sessionStorage对象用于区域存储； window.localStorage对象用于本地存储。 特点 数据的设置和读取比较方便。 容量较大，sessionStorage大约为5MB，localStorage大约为20
阅读全文
摘要：Vue实例—— 计算属性（computed）、 watch 状态监听和filter 过滤器 Vue实例配置对象 选项 说明 data Vue实例数据对象 methods 定义Vue实例中的方法 components 定义子组件 computed 计算属性 filters 过滤器 计算属性（compu
阅读全文
摘要：ES6使用规则和常见使用方法 let命令 let命令与var的区别 let命令作用域只局限于当前代码块 使用let声明的变量作用域不会被提前 在相同的作用域下不能声明相同的变量 for循环体中let的父子作用域 //for循环用let来定义变量 const命令 定义常用 数组的解构赋值 // 传统赋
阅读全文
摘要：axios的使用规范 axios在线库：https://unpkg.com/axios/dist/axios.min.js 获取网络请求 get格式 axios.get(地址？key=value&key2=value2).then(function(response){},function(err)
阅读全文
摘要：Vue小项目——标签记录器 功能：用户在文本框里输入文本，按回车键，文本添加到信息栏里，并清空文本框里的内容，最左侧有信息编号，下方有所以信息条数，每条信息右测有删除叉，最下方有全部清空按钮，当信息全部清空，最下方一栏将隐藏。 <!DOCTYPE html> <html lang="en"> <he
阅读全文
摘要：v-model命令（双向绑定） 格式：v-model="变量" 作用2：获取和设置表单里的值 作用2：表单里输入可以改变变量的值，修改变量可以改变表单的值 <div id="app"> <!--v-model:双向绑定,用户输入按提交可以更改变量的值，用户按修改也可以反向修改-->> <form>
阅读全文
摘要：Vue指令03——v-bind和v-for v-bind命令 效果：更改元素属性，如 src、title、href 格式：v-bind：属性=”变量“ 格式：：属性=”变量“ 修改行类样式1 <!--绑定样式--> <div id="app"> <!-- 绑定样式属性值 --> <div v-bin
阅读全文
摘要：Vue指令02——v-on指令和v-show的使用 v-on指令 格式1：v-on:事件=”方法“ 格式2：@事件=”方法“ 格式3：@事件=”方法（参数1，参数2）“ //把参数传到到方法中 格式4：@键盘事件 . 键盘的键名称=”方法“ //按下指定键才触发 作用：为元素绑定事件 v-on的实例
阅读全文
摘要：Vue 指令01——v-test和v-html的使用 V-test指令 作用：替换标签里的文本内容 v-test的实例 <!--程序1--> <!--把h2标签的”1234“，替换成”笑哈哈“--> <div> <h2 v-text="message">1234</h2> </div> <!--程序
阅读全文
摘要：Vue 是什么应该怎么用？ 前言 vue是Javascript里的一个框架，因为是一套框架所以在编写Vue程序前要导入Vue的包。 <!-- 包1 --> <!-- 开发环境版本，包含所有东西 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/d
阅读全文
摘要：Web(vue)本地存储 Web Storage API 关键对象 window.sessionStorage对象用于区域存储； window.localStorage对象用于本地存储。 特点 数据的设置和读取比较方便。 容量较大，sessionStorage大约为5MB，localStorage大
阅读全文
摘要：CSS设置标签、图片，放大、缩小、旋转、移动、倾斜(transform) 1.缩小和放大属性（scale） 格式：transform：缩小类型（数值）； 注意：缩小和放大都是 scale ； 其中的值（0~1）代表缩小；大于1代表放大。其中0代表缩小到没有，1代表不变。 tranform:scale
阅读全文
摘要：ES6( ECMAScript 6.0)语法 一、let/const与var的区别 var 会进行预解析，let/const不会 var可以声明两个重名的变量，let/const不能 var没有块级作用域，let/const有块级作用域 二、箭头函数 1.普通函数 //xxx.onclick=fun
阅读全文
摘要：Javascript实现让小图片一直跟着鼠标移动实例 注意：图片可能加载不出来，注意更换 <!doctype html> <html> <head> <meta charset="utf-8"> <title>永恒之月</title> <style> body { margin: 0; paddin
阅读全文
摘要：HTML+CSS+Javascript实现轮播图效果 注意：根据自己图片大小来更改轮播图大小。 <!doctype html> <html> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } /*去掉ul、ol、li
阅读全文
摘要：Javascript实现让图片一直跟着鼠标移动 注意：图片可能加载不出来，还请及时更换图片 <!doctype html> <html> <head> <meta charset="utf-8"> <title>永恒之月</title> <style> body { margin: 0; paddi
阅读全文
摘要：Javascript中常用事件集合和事件使用方法 一、事件绑定 格式： 事件源 . on事件类型=事件处理函数 事件绑定三要素 1、事件源：和谁绑定 2、事件类型：什么事件 3、事件处理函数：触发了要执行什么 二、常用事件类型 鼠标事件 键盘事件 浏览器事件 触摸事件 表单事件 click - 单击
阅读全文
摘要：Javascript实现全选按钮 效果：有全选选项框和单个选项框，选择全选框，所有的的选择都打上的钩，取消全选钩所有的都去掉了钩，如果取消其中某一个的钩，那么全选的钩也取消，反之全选所有的选项，那么全选的钩就会打上。 <!doctype html> <html> <head> <meta chars
阅读全文